/*  declare the number of thumbnails on the page that is using this js 
    i.e.: var menuThumbs = 5;
    
    you will also need to declare the location of the thumbnail images
    i.e.  var thumbsLoc = "/library/hd/images/thumbs/";
    
    note that the thumbnails will have to be named correctly and be in the correct folder for it to work.
    Thumbnails are named thumb0/thumbOver0 , thumb1/thumbOver1 etc
    Each thumbnail must have corresponding display div too
*/
 
/*  to do:
    1) make named functions the mouseover and mouseout so that it can be re-used/re-applied
    2) ensure that id's are present before running the function(s)
    3) check browsers ]
    4) alt tag / array
    6) add a 'selected' value and pass it in the js
*/
 
/*
taken off the 'onDocumentReady function to avoid double click js preventing initialising of menu
$(document).ready(function() {
	initDisplays();
	buildMenu(menuThumbs);
	preLoadThumbs();
});

*/

var displays = [];

//initialise display and build menu
function preLoadThumbs() {
	imageObj = new Image();
	images = [];
	imagesOver = [];
	if(menuThumbs){
	    for(i=0; i<menuThumbs; i++) {
		    images[i] = thumbsLoc+"thumb"+i+".png";
		    imagesOver[i] = thumbsLoc+"thumbOver"+i+".png";
            imageObj.src=images[i];
		    imageObj.src=imagesOver[i];
        }
    }
} 


function buildMenu() {
	$("div#sectionMenu").append("<ul id=\"displaysMenu\"></ul>");
	
	for (i=0;i<menuThumbs;i++) {
		$("ul#displaysMenu").append("<li class=\"menuItem\" id=\"list"+i+"\"><img src=\""+thumbsLoc+"thumb"+i+".png\" alt=\"\" /></li>");
	}
	
	$("body#experience ul#displaysMenu li.menuItem:nth-child(1) img").attr("src",thumbsLoc + "thumbActive1.png")
	$("body#howitworks ul#displaysMenu li.menuItem:nth-child(1) img").attr("src",thumbsLoc + "thumbActive0.png")
	$("ul#displaysMenu li.menuItem:nth-child(1) img").addClass("active");
	$("div#noFlashImage img").attr("src","/library/hd/images/placeholder1.jpg");
    $("div#noFlashImage").show();	
	
    // Temp add to remove items 
    $("li.menuItem").click(function(i) {
        if (!$(this).hasClass("active")) {
            $("li.menuItem").removeClass("active");
            $(this).addClass("active")
        };
    });	
	
	$("li.menuItem").each(function(i) {
		$(this)
			.hover(
				function(){
					image = $("#" + this.id + " img");
					if (!image.hasClass("active")){
						image.attr("src",thumbsLoc + "thumbOver" + i + ".png");
					}
			},
				function(){
					image = $("#" + this.id + " img");
					if (!image.hasClass("active")){
						image.attr("src",thumbsLoc + "thumb" + i + ".png");
					}
				}
			)
			.click(function() {
				$("li.menuItem img").each(function(j){
					$(this).attr("src",thumbsLoc + "thumb" + j + ".png");
					$(this).removeClass("active");
				})
				
				if ($("body#experience").length > 0 ){
					flashObject = $("object#videoHolder");
					image = $("#" + this.id + " img");
					$("div#displaysContainer div.sectionDisplay").hide(); //hide all pods
					
					//clicking a menu item loads the advocate videos or for now replaces the placeholder images.
					//find a better way of doing this
					$("#swfPlaceholderMovies").replaceWith("<div id=\"swfPlaceholderMovies\"><img src=\"/library/hd/images/flashPlaceholderMovies.jpg\" width=\"616\" height=\"378\" /></div>");
                    $("#swfPlaceholderSports").replaceWith("<div id=\"swfPlaceholderSports\"><img src=\"/library/hd/images/flashPlaceholderSports.jpg\" width=\"616\" height=\"378\" /></div>");
                    $("#swfPlaceholderEntertainment").replaceWith("<div id=\"swfPlaceholderEntertainment\"><img src=\"/library/hd/images/flashPlaceholderEntertainment.jpg\" width=\"616\" height=\"378\" /></div>");

					switch(this.id)	{
						case "list0":
    						image.addClass("active");
							image.attr("src",thumbsLoc + "thumbActive1.png");
							_hbLink('Advocate+Menu+Sports'); //hbx tracking call
                            sc_trackLink('Advocate+Menu+Sports');  //Site Catalyst tracking call
							$("div#displaysContainer div#sportsPod").show();
							var titleText = $("div#displaysContainer #sportsPod h3:first").text("See Jos&eacute; Mourinho's favourite sporting moments");
                            $("div#displaysContainer #sportsPod h3:first").removeClass("highlightsHeading");   
							break;						
						case "list1":
							image.addClass("active");
							image.attr("src",thumbsLoc + "thumbActive0.png");
							_hbLink('Advocate+Menu+Movies'); //hbx tracking call
                            sc_trackLink('Advocate+Menu+Movies');  //Site Catalyst tracking call
							$("div#displaysContainer div#moviePod").show();
							var titleText = $("div#displaysContainer #moviesPod h3:first").text("See Anthony Hopkins' favourite movie moments");
                            $("div#displaysContainer #moviePod h3:first").removeClass("highlightsHeading");   
							break;
						case "list2":					
							image.addClass("active");
							image.attr("src",thumbsLoc + "thumbActive2.png");
							_hbLink('Advocate+Menu+Entertainment'); //hbx tracking call
                            sc_trackLink('Advocate+Menu+Entertainment');  //Site Catalyst tracking call
                            $("div#displaysContainer div#entertainmentPod").show();
						  	var titleText = $("div#displaysContainer #entertainmentPod h3:first").text("The entertainment you love in HD");
                            $("div#displaysContainer #entertainmentPod h3:first").removeClass("highlightsHeading");   

						  break;				  				  
					}				
				}
				
				if ($("body#howitworks").length > 0 ){
					image = $("#" + this.id + " img");
					$("div#displaysContainer div.sectionDisplay").addClass("hideMovie");
					switch(this.id)	{
						case "list0":
							image.addClass("active");
							image.attr("src",thumbsLoc + "thumbOver0.png");							
							$("div#displaysContainer div.sectionDisplay:eq(0)").removeClass("hideMovie");
							_hbLink('HD+Ready+TV'); //hbx tracking call
                            sc_trackLink('HD+Ready+TV');  //Site Catalyst tracking call
							break; 					
						case "list1":
							image.addClass("active");
							image.attr("src",thumbsLoc + "thumbOver1.png");
							$("div#displaysContainer div.sectionDisplay:eq(1)").removeClass("hideMovie");
							_hbLink('Sky+HD+Box'); //hbx tracking call
                            sc_trackLink('Sky+HD+Box');  //Site Catalyst tracking call
							break; 					
						case "list2":
							image.addClass("active");
							image.attr("src",thumbsLoc + "thumbOver2.png");						
							$("div#displaysContainer div.sectionDisplay:eq(2)").removeClass("hideMovie");
							_hbLink('HD+Pack'); //hbx tracking call
                            sc_trackLink('HD+Pack');  //Site Catalyst tracking call
							break; 					
					}
				}
		})
	});
}