$(document).ready(function(){
													 
	$(".contentlayout li#nav_wardrobe a").addClass("selectedNav"); // make wardrobe top nav item the selected nav
	$("body").addClass("wardrobe"); // add class to body to assist client css
	
	var videoThumbs = $("div#thumbs ul"); // grab from page the ul container of video thumbnail list items
	initialize(); // run initialize function
	
	function initialize(){
		if(videoThumbs.is(".play")){ // check if the ul has a class of 'play'
			var videoNum = ""; // create blank video number variable
			$(videoThumbs.attr("class").split(" ")).each(function(i,n){ // split the ul's class string at each space and loop through
				if(n.match("video") != null){ // if class contains the word 'video' e.g. 'video5'...
					videoNum = n.replace("video",""); //... then remove 'video' and you're left with the video number
				}
			});
			if(videoNum != "" && videoNum <= videoThumbs.find("li").length){ // ensure video number exists and is valid
				setAsActive(videoNum); // run setAsActive function passing the video number through
			}
		} else { // if no video has been requested...
			scrollAction(); //... then run scrollAction function which activates the thumbnail scroller
		}
			
		$("div#thumbs ul li img").each(function(){ // loop through each thumbnail image
			var that = $(this);
			var defaultSrc = that.attr("src"); // get the image's src
			var hoverSrc = that.attr("src").replace("_0","_1"); // generate the hover src
			$.preloadImages(hoverSrc); // run preload function on the hover src so that that image is ready for the hover action
			that.hover(function(){ // on hover on of img...
				that.attr("src",hoverSrc).css("opacity",1.0); //... swap src out for the hover src
			},function(){ // on hover out of img...
				if(!that.is(".selected")){ //... check to make sure the image wasn't clicked during hover (selected video thumbnail will be the hover one)...
					that.attr("src",defaultSrc); //... and if not then swap the src back out for the default one
					if($("div#thumbs ul li img.selected").length > 0){ // if one of the thumbsnails is selected...
						that.css("opacity",0.5); //... then reset this thumbnail's opacity to 0.5
					}
				}
			});
			that.click(function(){ // on click of img...
				setAsActive(parseInt(that.parent("li").prevAll("li").length) + 1); // run setAsActive function passing the current video number through:
				// current video number is generated by getting the img's parent li and counting how many lis exist before it in the ul...
				//... we then add 1 to it to ensure the count starts at 1 e.g. the first li has no lis before it, therefore returning 0
			});
		});	
	}
	
	function setAsActive(videoNum){ // accepts a number which ensures the correct video is loaded and the correct thumbnail is highlighted
		$("div#video").addClass("active"); // class 'active' changes the background on div#video, removes the WARDROBE.TV graphic
		
		$("div.active").unbind("click").click(function(){ // allows non Flash users to click on the div (which will have a bg saying 'click to get Flash')
			if(!$("html").is(".flash")){
				window.open("http://www.adobe.com/products/flashplayer/");
			}
		});
		
		if($("img.selected",$("div#thumbs")).length > 0){ // checks that there is an image with the class 'selected' in div#thumbs...
			$("img.selected").attr("src",$("img.selected").attr("src").replace("_1","_0")).removeClass("selected"); //... so that there's no error when we deselect it
		}
		
		var img = videoThumbs.find("li:eq("+(videoNum-1)+") img"); // stores the video's thumbnail image
		
		videoThumbs.find("li img").css("opacity",0.5); // sets all images to 0.5 opacity
		img.css("opacity",1.0).addClass("selected").attr("src",img.attr("src").replace("_0","_1")); // sets video's thumbnail image to 1.0 opacity, gives class 'selected' and swaps src to hover state
		
		// embed's flash shell swf and imports the appropriate 'wardrobe_' flash video
		var so = new SWFObject("/pws/client/flash/videos/shell.swf", "wardrobeVideo", "512", "384", "8", "#000000");
		so.addVariable("movie", "wardrobe_"+videoNum+".flv");
		so.addParam("wmode", "opaque");
		so.write("video");
		
		if(videoNum > 3 && videoThumbs.find("li").length > 4){ // make sure that the video number is more than 3 and that there are more than 4 thumbnails
			var numPosMove = videoNum - 3; // calculates how many positions thumbnail needs to be moved to get the current thumbnail sitting in the 3rd position
			if(numPosMove > (videoThumbs.find("li").length - 4)){ // if calculated number of positions is great than number of available positions...
				numPosMove = videoThumbs.find("li").length - 4; //... then set calculated number of positions to available positions
			}
			var marginTop = -(numPosMove*106); // sets the amount of pixels the thumbnails need to scroll by. 106 is height of each thumbnail plus margins
			videoThumbs.animate({marginTop:marginTop},300); // animates the thumbnails by calculated amount
			scrollAction(marginTop); // run scrollAction function passing in the starting margin top
		} else { // if video selected doesn't require down scrolling...
			videoThumbs.animate({marginTop:0},300); //... reset back to the top...
			scrollAction(0); //... and just activate scrolling with no margin top
		}
	}
	
	function scrollAction(mt){ // accepts an optional margin top value that allows scrolling to start anywhere in the thumbnail list
		if(videoThumbs.find("li").length > 4){ // only deals with scrolling if there are more than 4 thumbnails
			var upLink = $("a#scrollUp");
			var downLink = $("a#scrollDown");
			upLink.addClass("disabled");
			downLink.addClass("disabled");			
			var marginTop = 0; // sets margin top to 0
			var currentPosition = 4; // sets current position to 4 (as when you click down arrow, the first video to appear is 5)
			if(typeof mt != "undefined"){ // if optional margin top variable has been passed in...
				marginTop = mt; //... then sets margin top to mt...
				currentPosition -= marginTop/106; //... adjusts current position of list by calculated number of thumbnails
				if(mt < 0){ // if scroller isn't being reset back to the top...
					upLink.removeClass("disabled"); //... remove class 'disabled' from the up arrow
				}
			}
			if(!(currentPosition >= videoThumbs.find("li").length)){ // if the requested thumbnail isn't the last one and is a valid request...
				downLink.removeClass("disabled"); //... remove class 'disabled' from the down arrow
			}
			downLink.unbind("click").click(function(){ // on click of down arrow
				if(!downLink.is(".disabled")){ // ensure down arrow isn't disabled
					upLink.removeClass("disabled"); // remove class 'disabled' from the up arrow
					currentPosition ++; // increase current position
					marginTop -= 106; // decrease margin top
					videoThumbs.animate({marginTop:marginTop},300); // animate thumbnails
					if(currentPosition == videoThumbs.find("li").length){ // if current position is the last thumbnail...
						downLink.addClass("disabled"); //... then disable down arrow
					}
				}
			});
			upLink.unbind("click").click(function(){ // on click of up arrow
				if(!upLink.is(".disabled")){ // ensure up arrow isn't disabled
					downLink.removeClass("disabled"); // remove class 'disabled' from the down arrow
					currentPosition --; // decrease current position
					marginTop += 106; // increase margin top
					videoThumbs.animate({marginTop:marginTop},300); // animate thumbnails
					if(currentPosition == 4){ // if current position is 4 (our default start position)...
						upLink.addClass("disabled"); //... then disable up arrow
					}
				}
			});
		}
	}
		
});