var currentTop = 1; //Math.floor(Math.random()*7);
var rowHeight = 192;

var Dom = YAHOO.util.Dom;	
	
document.body.className="yui-skin-sam";
YAHOO.namespace("mediamobz");

function editGalleryItem(category, position, videoID, title, thumbURL, budget) {
	var iCategory = category;
	var iPosition = position;
	YAHOO.mediamobz.editGalleryItem = 
                    new YAHOO.widget.Panel("galleryItemEdit",  
                                                    { width: "450px",
						      height: "300px",
                                                      fixedcenter: true, 
                                                      close: true, 
                                                      draggable: false, 
                                                      zindex:1000,
                                                      modal: true,
                                                      visible: true
                                                    } 
                                                );
    
	YAHOO.mediamobz.editGalleryItem.setHeader("Edit Gallery Item - Category: " + (iCategory + 1) + " - Position: " + (iPosition + 1));	
    	YAHOO.mediamobz.editGalleryItem.setBody("<div id='editGallery style='height:300px;width:440px;visibility:inherit;'><form id='editGalleryItemForm' name='editGalleryItemForm' action='/home' method='post' enctype='multipart/form-data'>Edit the details for the gallery item.<br><br><input type=hidden name='category' value='" + category + "'><table style='width: 100%'><tr><td>Video ID:</td><td width='300px'><input type=text name='videoId' style='width: 275px' value='" + videoID + "'></td></tr><tr><td>Title:</td><td width='300px'><input type=text style='width: 275px' name='title' value='"+title+"'></td></tr><tr><td>ThumbURL:</td><td width='300px'><input type=text style='width: 275px' name='thumbURL' value='"+thumbURL+"'></td></tr><tr><td>Budget:</td><td width='300px'><input type=text style='width: 275px' name='budget' value='"+budget+"'></td></tr></table><input type=hidden name='position' value='" + position + "'><br><center><input type=submit name='iEditGalleryItem' value='Submit'></center></form></div>");
    	YAHOO.mediamobz.editGalleryItem.render(document.body);

	YAHOO.mediamobz.editGalleryItem.show();

}


function down() {
	var listLength = YAHOO.util.Dom.get("categories").getElementsByTagName("li").length;
	if(currentTop < listLength - 2) currentTop++;
	updateGallery();
	disableUpDownArrows();	
    	var scrollDown = new YAHOO.util.Scroll('categories', {scroll: { to: [0, document.getElementById('categories').scrollTop + rowHeight] }});
	scrollDown.onComplete.subscribe(checkArrows);
	scrollDown.animate();
}

function up() {
	//alert("Height: " + document.getElementById('categories').scrollTop);
	if(currentTop > 0) currentTop--;
	checkArrows();
	updateGallery();
	disableUpDownArrows();
    	var scrollUp = new YAHOO.util.Scroll('categories', {scroll: { to: [0, document.getElementById('categories').scrollTop - rowHeight] }});
	scrollUp.onComplete.subscribe(checkArrows);
	scrollUp.animate();
}

function disableUpDownArrows() {
	document.getElementById('downarrow').innerHTML = "<img src='images/homeDwnArrow.gif' width='37' height='22' border=0 class='opacity'>";
	document.getElementById('uparrow').innerHTML = "<img src='images/homeUpArrow.gif' width='37' height='22' border=0 class='opacity'>";
}

function checkArrows() {
	if(currentTop == 6) document.getElementById('downarrow').innerHTML = "<img src='images/homeDwnArrow.gif' width='37' height='22' border=0 class='opacity'>";
	else document.getElementById('downarrow').innerHTML = "<a href='javascript:down();' id='down'><img src='images/homeDwnArrow.gif' width='37' height='22' border=0></a>";

	if(currentTop == 0) document.getElementById('uparrow').innerHTML = "<img src='images/homeUpArrow.gif' width='37' height='22' border=0 class='opacity'>";
	else document.getElementById('uparrow').innerHTML = "<a href='javascript:up();' id='up'><img src='images/homeUpArrow.gif' width='37' height='22' border=0></a>";
}

function changeCategory() {
	document.getElementById('gallery0').innerHTML = galleries[document.getElementById('category').selectedIndex];	
}

function init() {
	new YAHOO.util.Scroll('categories', {scroll: { to: [0, currentTop * rowHeight] }}).animate();
	var list = YAHOO.util.Dom.get("categories").getElementsByTagName("li");
	for (var j=0;j<list.length;j++) {
		var shift = list[j].offsetWidth;
		YAHOO.util.Event.on('forward'+j, 'click', function(e, galleryNumber) {
		    	new YAHOO.util.Scroll('gallery'+galleryNumber, {scroll: { to: [document.getElementById('gallery'+galleryNumber).scrollLeft + 612, 0] }}).animate();
		}, j);
	
		YAHOO.util.Event.on('backward'+j, 'click', function(e, galleryNumber) {
		    	new YAHOO.util.Scroll('gallery'+galleryNumber, {scroll: { to: [document.getElementById('gallery'+galleryNumber).scrollLeft - 612, 0] }}).animate();
		}, j);
	}
	updateGallery();
	checkArrows();
}

function updateGallery() {
	var listLength = YAHOO.util.Dom.get("categories").getElementsByTagName("li").length;
	for(var i=0; i < listLength; i++) {
		var element = document.getElementById('gallerylist'+i);
		if(i == currentTop) {
			document.getElementById('blocker'+i).className = 'gallerySelected';
			if(element.style.opacity != 1) new YAHOO.util.Anim(element, {opacity: { to: 1.0 }}).animate();	
		} else {
			document.getElementById('blocker'+i).className = 'blocked2';
			if(element.style.opacity != .2) new YAHOO.util.Anim(element, {opacity: { to: 0.2 }}).animate();
		}				
	}
	
}	


// Plays the current reel
function playGalleryItem(videoid) {
	flowplayer("videoplayer", "/static/js/flowplayer.commercial-3.1.0.swf", { key: '#$d3ce079795650eafddd', wmode: 'opaque',
			clip: { url: "/video=" + videoid,
				autoPlay: true,  
				autoBuffering: true, 
				scaling: 'fit',

				onStart: function() {
					hideContent();
				},
				onFinish: function() { 
					showContent();                   
				} 
			},
			play: { 
				replayLabel: null 
			}, 
			canvas: { backgroundColor: '#FFFFFF' } , 
			plugins: { controls: { 
					url: 'flowplayer.controls-3.1.0.swf', 
					autoHide: 'always', 
				        play:true, 
				        volume:true, 
				        mute:true, 
				        time:true, 
				        stop:false, 
				        playlist:false, 
				        fullscreen:true, 
					scrubber: true 
				},
				content: {             
					// the only required property 
					url: '/js/flowplayer.content-3.1.0.swf', 
					zIndex: 1,
					// some display properties 
					height:'87%',
					padding:30, 
					backgroundColor: '#000000', 
					opacity: 0,
					border: '1px solid #000000', 
					backgroundGradient:'none',
					html: '<p></p>'           
				},
				contentReplayButton: { 

					// the only required property 
					url: '/js/flowplayer.content-3.1.0.swf', 
					zIndex: 9999,
					// some display properties 
					height:90,
					padding:0,
					margin:0, 
					width: 90,
					top:'45%',
					left:'25%',  
					opacity: 0, 
					backgroundColor: '#000000',
					border: '1px solid #000000',
					backgroundGradient:'none',
					html: '<p><a href="javascript:replay();"><img src="/images/replay.png"></a></p>'            
				},
				contentSeeMoreButton: { 

					// the only required property 
					url: '/js/flowplayer.content-3.1.0.swf', 
					zIndex: 9999,
					// some display properties 
					height:90,
					padding:0,
					margin:0, 
					width: 90,
					top:'45%',
					left:'50%',  
					opacity: 0, 
					backgroundColor: '#000000',
					border: '1px solid #000000',
					backgroundGradient:'none',
					html: '<p><a href="/Solutions/"><img src="/images/seeMore.png"></a></p>'            
				},
				contentEmailButton: { 

					// the only required property 
					url: '/js/flowplayer.content-3.1.0.swf', 
					zIndex: 9999,
					// some display properties 
					height:90,
					padding:0,
					margin:0, 
					width: 90,
					top:'45%',
					left:'75%',  
					opacity: 0, 
					backgroundColor: '#000000',
					border: '1px solid #000000',
					backgroundGradient:'none',
					html: '<p><a href="javascript:emailForm(' + videoid + ');"><img src="/images/email.png"></a></p>'            
				} 
			} 
		});

	
	overlay = $("#InfoVideo").overlay({ 
		api: true, 
		expose: 'black',

		onBeforeLoad: function() { 
			$("#emailPane").css('display','none');			 
	        },

		// when overlay is opened, load our player 
	        onLoad: function() { 			
			$('#mediaMobzHome').css('display','none');
			$('#flashFiller').css('display','block');
			$("#emailPane").css('display','none');
	            	$f().load();
			 
	        }, 
	         
	        // when overlay is closed, unload our player 
	        onClose: function() { 		
			$('#flashFiller').css('display','none');
			$('#mediaMobzHome').css('display','block');
			
			$f().unload();
	        }
	}).load();

	/*YAHOO.mediamobz.player.subscribe("hide", function(type, args) {
		swfobject.removeSWF("videoplayer");
	});*/
	
	//YAHOO.mediamobz.player.show();

}


var navTitles = ['<b>Category:</b> Documentary/Short Film','<b>Category:</b> Ads/Promotions', '<b>Category:</b> Customer/Vendor Communication', '<b>Category:</b> Product Placement', '<b>Category:</b> Entertainment', '<b>Category:</b> Events', '<b>Category:</b> Training/Educational' ];
var carousel;
						
YAHOO.util.Event.onDOMReady(function (ev) {	
	var carousel = new YAHOO.widget.Carousel("container", {
				selectOnScroll: false,
				animation: { speed: 3 },
				autoPlayInterval: 5000
		});
	carousel.CONFIG.MAX_PAGER_BUTTONS = 7;
				
	carousel.render(); // get ready for rendering the widget

	carousel.addListener("show", function () { 

		document.getElementById('container').style.display = "block";
		
		var title = document.createElement("span");
		title.id = "navTitle";
		title.style.cssFloat ="left";
		title.style.styleFloat ="left";
		title.style.paddingTop = "8px";
		title.style.paddingLeft = "8px";
		title.innerHTML = navTitles[0];
		
		var nav = YAHOO.util.Dom.getElementsByClassName('yui-carousel-nav', 'div');
		nav[0].insertBefore(title, nav[0].firstChild);

		//carousel.scrollTo(3);

		
		
	});



	carousel.addListener("stopAutoPlay", function() {
		carousel.set("animation", { speed: 1 });
	});

	carousel.addListener("pageChange", function () {
		document.getElementById('navTitle').innerHTML = navTitles[carousel.get("currentPage")];
	});

	carousel.show();   // display the widget

	carousel.startAutoPlay();
	
	init();
});