/*
 * Insert #bulletsNav
 */
	$(function(){
		//var bulletsNav_HTML = '<ul id="bulletsNav"><li><a href="previous">previous</a></li><li><a href="next">next</a></li></ul>';
		//$("#bullets").prepend(bulletsNav_HTML);
	});

/*
 * Insert rounded corners 
 */
 	$(function(){
 		var cornerGraphic_HTML = '<div class="Corners2px bottomLeft"></div>';
 		cornerGraphic_HTML += '<div class="Corners2px bottomRight"></div>';
 		$("#searchPopup").append(cornerGraphic_HTML);
 	});
 
 /*
  * Widen the StylistSearch tab so the drop down arrow shows
  */
  	$(function(){
  		$("#searchStylists a").css({'width':'116px'});
  	});

/*
 * Attach click state to login popup
 */
  	$(function(){
  		$("#loginToolbar li:first").click(
			function(event){
				event.preventDefault();
				$("#loginPopup").show();
			}
		);
  		
  		$("#loginPopup ul:first li:first").click(
  				function(event){
  					event.preventDefault();
  					$("#loginPopup").hide();
  				}
  			);
  		
		$("#loginPopup").hover(
			function(){
				$("#loginPopup").attr({"superhold":"true"});
			},
			function(){
				if($("#loginPopup").attr("status")!="hold"){
					$("#loginPopup").hide();
				}
				$("#loginPopup").removeAttr("superhold");
			}
		);
		
		$("#loginPopup input").click(
			function(){
				$("#loginPopup").attr({"status":"hold"});
			}
		);

		$("#loginPopup input").blur(
			function(event){
				if($("#loginPopup").attr("superhold")!="true"){
					$("#loginPopup").removeAttr("status");
					$("#loginPopup").hide();
				}
			}	
		);
  	});
  	
 /*
  * Attach hover state to #searchPopup 
  */
  	$(function(){
  		var thisTab = $("#searchStylists");
  		var thisPopup = $("#searchPopup");
  	
  		var opening = false;
  		var closing = false;
  	
  		function openPopup(whichID,i){
  			if(!i){
  				i = 0;
  			}
  			
  			var tabStatus = $(thisTab).attr("status");
  			var popupStatus = $(thisPopup).attr("status");
  			
  			//alert("tabStatus = "+tabStatus+" & popupStatus = "+popupStatus);
  			
  			if(popupStatus != "hoverOff"){
  				if(i < 1){
  					i++;
  					setTimeout(function(){openPopup(whichID,i)},100);
  				}else{
					$("#searchStylists a").css({'background-position':'bottom left'});
					$(whichID).css({height:0}).show().animate(
  					{ height: 46 },{
  						duration: 'fast',
  						easing: 'easeOutBack'
  					});
  				}
  			}
  		}
  	
  		/*
  		 * This function will prevent #searchPopup from disappearing after hovering off #searchStylists
  		 */
  		function closePopup(whichID,i){
			if(!i){
  				i = 0;
  			}

			var tabStatus = $(thisTab).attr("status");
  			var popupStatus = $(thisPopup).attr("status");
  			var inputFocus = $("#searchField").attr("focus");
  			
  			if(popupStatus != "hold" && tabStatus != "hold" && inputFocus != "true"){
  				if(i < 1){
  					i++;
  					setTimeout(function(){closePopup(whichID,i)},1);
				}else{
					$(whichID).css({height:46}).animate(
						{ height: 0 },{
							duration: 'fast',
							easing: 'easeInBack'
						}
					).hide(function(){
		  				$("#searchPopup").hide();
		  				$("#searchPopup").removeAttr("status");
		  				$("#searchStylists a").css({'background-position':'top left'});
		  			});
					//slideUp().hide(function(){
		  			//	$("#searchStylists a").css({'background-position':'top left'});
		  			//});
				}
  			}
  		}
  		
  		$("#searchStylists").hover(
  			function(){
  				$("#loginPopup").hide();
  				$("#searchStylists a").css({'background-position':'bottom left'});
  				//$("#searchPopup").slideDown();
  				$(this).attr({'status':'hold'});
  				openPopup("#searchPopup");
  			},
  			function(){
				$("#searchPopup").attr({"status":""});
				$(this).attr({"status":""});
  				closePopup("#searchPopup");
  			}
  		);
  		
  		$("#searchPopup").hover(
  			function(){
  				$("#searchStylists a").css({'background-position':'bottom left'});
  				$("#searchStylists").attr({"status":""});
  				$(this).attr({'status':'hold'});
  			},
  			function(){
	  			$(this).attr({"status":"hoverOff"});
  				closePopup("#searchPopup");
  			}
  		);
  		
  		$("#searchStylists").click(function(e){
  			e.preventDefault();
  		});
  		
  		$("#searchField").click(function(){
  			$(this).attr({'focus':'true'});
  		});
  		
  		$("#searchField").blur(function(){
	  		$("#searchPopup").attr({"status":""});
			$("#searchStylists").attr({"status":""});
  			$(this).removeAttr("focus");
  			closePopup("#searchPopup");
  		});
  	});
 
 /*
  * Insert glow behind video graphic
  */
	$(function(){
		var animating = false;
		
		function showVideoThumbs(){
			if(!animating){
				animating = true;
				$("#videoShine").fadeIn("fast");
				$("#videosUL").stop().show().animate({left: 0},'fast');
				//$("#videosUL").stop().show('slide', {direction: 'left'}, 200);

				// Select the first item by default
					$("#mainFooter .videoThumbDetails").hide();
					$("#mainFooter .videoThumbDetails:eq(0)").fadeIn("slow");
					$("#videoThumbsArrow").show().fadeIn("slow").dequeue().animate({top: 30});
					$(".videoThumbOver").show();
					$(".videoThumbOver:eq(0)").fadeOut();
					
			}
			animating = false;
		}
		
		function hideVideoThumbs(i){
			var videosStatus = $("#videosUL").attr("status");
			
			if(!i){
  				i = 0;
  			}
  			
			if(i < 1){
  				i++;
  				setTimeout(function(){ hideVideoThumbs(i) },1);
			}else{
				if(!animating && videosStatus != "hold"){
					animating = true;
					$("#videoShine").fadeOut("fast");
					$("#videosUL").show().animate({left: -200},'fast');

					// Hide all sub items
						$("#mainFooter .videoThumbDetails").hide();
						//$("#videoThumbsArrow").hide();
						$("#videoThumbsArrow").fadeOut("slow").dequeue().animate({top: 0});
						$(".videoThumbOver").hide();
						
					//$("#videosUL").stop().show('slide', {direction: 'left'}, 200);
				}else{
					//alert("fail");
				}
				animating = false;
			}
		}
		
		$(function(){$("<span id='videoShine'><img src='/images/homepage/videoShine.png' /></span>").insertBefore("#videos");});
		$(function(){$("#videoShine").hide();});
		$(function(){
			$("#videoGraphic").hover(
				function(){
					showVideoThumbs();
				},
				function(){
					hideVideoThumbs();
				}
			)
			
			$("#videosUL").hover(
				function(){
					$("#videosUL").attr({"status":"hold"});
				},
				function(){
					$("#videoShine").fadeOut();
					$("#videosUL").stop().show().animate({left: -200},'fast');
					$("#videosUL").removeAttr("status");
				}
			);
		});
	});

/*
 * Create new details section for each video
 */
 	$(function(){
 		// Insert the parent container first
	 		$("<div id='videoThumbsInfo'></div>").insertBefore("#videoGraphic");
	 		
	 	// Insert the arrow
	 		$("#videoThumbsInfo").append('<img src="/images/homepage/videoThumbsArrow.gif" id="videoThumbsArrow" />');
 	
 		// Get all the vars
	 		var videoThumbsTitles = $("#videosUL li a h3");
	 		var videoThumbsTimes = $("#videosUL li a p.videoLength");
	 		var videoThumbsSummaries = $("#videosUL li a p:nth-child(2)");

		// Build the new DOM 	
			var i = 0;	
	 		$.each(
	 			videoThumbsTitles,
	 			function(){
			 		var videoDetails = '<div class="videoThumbDetails">';
			 		videoDetails += '<div class="title">'+$("#videosUL li a:eq("+i+") h3").html()+'</div>';
			 		videoDetails += '<div class="time">'+$("#videosUL li a:eq("+i+") p.videoLength").html()+'</div>';
			 		videoDetails += '<div class="summary">'+$("#videosUL li a:eq("+i+") p.summary").html()+'</div>';
			 		videoDetails += '</div>';
			 		$("#videoThumbsInfo").append(videoDetails);
			 		i++;
	 			}
	 		);
 	});
	
/*
 * Main video thumb section function:
 * ----------------------------------
 * 1.) Adds shadow .png graphics over the thumbnail links
 * 2.) Adds hover states and animations to video thumbs and video copy
 *
 */ 
	$(function(){
		var thumbnails = $("#videosUL a h3");
		var i = 0;
		
		$.each(
			thumbnails,
			function(){
				$("<img src='/images/homepage/videoThumbOver.png' class='videoThumbOver' alt='"+i+"' />").insertBefore("#videosUL a h3:eq("+i+")").end().hover(
					function(){
						$("#videosUL .videoThumbOver").fadeIn();
						$("#mainFooter .videoThumbDetails").hide();
						$("#mainFooter .videoThumbDetails:eq("+$(this).attr("alt")+")").stop().fadeIn("slow");
						//$("#videoThumbsArrow").show().fadeIn("slow").dequeue().animate({top: 30});
						$(this).fadeOut();
					},
					function(){
						//$("#videoThumbsArrow").hide();
					}
				);
				
				$("#videosUL a:eq("+i+")").hover(
					function(){
						//$("#videoThumbsArrow").show().fadeIn("slow").dequeue().animate({top: 30});	
					},
					function(){
						$("#mainFooter .videoThumbDetails").hide();
						$("#videosUL .videoThumbOver").fadeIn();
						//$("#videoThumbsArrow").hide();
					}
				);
				
				$("#videos").hover(
					function(){
						//$("#videoThumbsArrow").show().fadeIn("slow").dequeue().animate({top: 30});
					},
					function(){
						//$("#videoThumbsArrow").fadeOut("slow").dequeue().animate({top: 0}).hide();
						$("#videoThumbsArrow").fadeOut("slow").dequeue().animate({top: 0});
						$("#videoThumbsArrow").hide();
						$("#mainFooter .videoThumbDetails").hide();
						//$("#videoThumbsArrow").hide();
					}
				);
				
				i++;
			}
		);
		
	});

/*
 * Main bottom banner bar section:
 * -------------------------------
 */
 	$(function(){
 	
 		// Initial formatting
			//$("#bulletItems li:eq(2)").show();	
			//$("#bulletsNav").hide();
 		$("#bulletItems li:first-child").show();

		// Global variables & reusable functions
			var items = $("#bulletItems li");
			
			function getItem(direction,itemNum){
				var totalItems = $(items).length;
				if(direction === "left"){
					if(itemNum === totalItems){
						if(itemNum-1 > 0){
							return itemNum-1;
						}else{
							return 0;
						}
					}else if(itemNum === 0){
						return totalItems;
					}else if(itemNum > totalItems){
						return totalItems;
					}else if(itemNum < totalItems){
						if(itemNum-1 > 0){
							return itemNum-1;
						}else{
							return totalItems;
						}
					}else if(itemNum < 0){
						return totalItems;
					}else{
						return 0;
					}
				}else if(direction === "right"){
					if(itemNum === totalItems){
						return 0;
					}else if(itemNum === 0){
						if(itemNum+1 < totalItems+1){
							return itemNum+1;
						}else{
							return 0;
						}
					}else if(itemNum < totalItems){
						if(itemNum+1 < totalItems+1){
							return itemNum+1;
						}else{
							return 0;
						}
					}else if(itemNum < 0){
						return 0;
					}else{
						return totalItems;
					}
				}
			}
						
			function nextItem(currentItem){
				$(items).fadeOut("slow").dequeue().animate({bottom: 100});
				
			}
			
			function previousItem(currentItem){
				$(items).fadeOut("slow").dequeue().animate({bottom: 100});
			}

	 	
	 	
	 	// Create previous/next controls
	 		//$(function(){
	 			//
	 		//});
		 	
 	});	

// Featured Image slideshow
 	$(function(){
 		// Get featured items wrapped set
 			var featuredItems = $("#featuredImage li");
 			
 		// Loop through featuredItems and create the animation sequence
 			var featBullets = new String;
 			 			
 			$.each(
 				featuredItems,
 				function(i, val){
 					featBullets = featBullets+"<li id='featuredImage"+i+"'><a href='?showFeatured="+i+"'><div></div></a></li>";
 				}
 			);

		// Create bullets
			$("<div id='featBullets'><ul>"+featBullets+"</ul></div>").insertAfter("#featuredImage ul");

		// Create the hold function for hovering on the main link
			$("#featuredImage").hover(
					function(){
						$("#featBullets").attr({"status":"hold"});
					},
					function(){
						$("#featBullets").removeAttr("status");
					}
			);
			
	 	// Create click handler for bullets
 			$(function(){
 				var bullets = $("#featBullets li");
 				
 				$.each(
 					bullets,
 					function(i, val){
 						$(this).click(
 							function(event){
 								event.preventDefault();
 							}
 						);
 						$(this).hover(
 							function(){
 								// Set the hold val to stop the animation
 									$("#featBullets").attr({"status":"hold"});
 								
 								// Display the relevant item but hide everything else first
 									$("#featuredImage li").removeClass("active").hide();
 									$("#featBullets li").show();
 									$("#featuredImage li p").removeClass("active").hide();
 									$("#featBullets div").removeClass("active");
 									
 									$("#featuredImage li:eq("+parseFloat($(this).attr("id").substring(13))+")").fadeIn().addClass("active");
 									$("#featuredImage li p:eq("+parseFloat($(this).attr("id").substring(13))+")").fadeIn().addClass("active");
 									$("#featBullets div:eq("+parseFloat($(this).attr("id").substring(13))+")").show().addClass("active");
 							},
 							function(){
 								// Release the hold val to continue the animation
 									$("#featBullets").removeAttr("status");
 								
 								// Hide old items
 									//$("#featuredImage li:eq("+parseFloat($(this).attr("id").substring(13))+")").removeClass("active");
 									//$("#featBullets .img:eq("+parseFloat($(this).attr("id").substring(13))+")").removeClass("active");
 							}
 						);
 					}
 				);
 			});

		// Start animation loop
			$(function(){
				$("#featuredImage li:eq(0)").addClass("active").show();
				$("#featuredImage li p:eq(0)").addClass("active").show();
				$("#featBullets li div:eq(0)").addClass("active");

				function intervalTrigger(){
					setInterval(function(){
						// Only animate if user isn't hovering 
							if($("#featBullets").attr("status")!="hold"){
								var active = $("#featuredImage li.active");
								var activeP = $("#featuredImage li.active p");

								var next = ($(active).next().length > 0) ? $("#featuredImage li.active").next() : $("#featuredImage li:first");
								var nextP = ($(activeP).next().length > 0) ? $("#featuredImage li.active p").next() : $("#featuredImage li p:first");

								var nextID = parseFloat($("#featuredImage li").index($("#featuredImage li.active").next()));
								if(nextID < 0){nextID=0;}

								// For some reason this doesn't work so I'm using the index() workaround to find the nextID
								//var activeLink = $("#featBullets li .active");
								//var nextLink = ($(activeLink).next().length > 0) ? $("#featBullets li div.active").next() : $("#featBullets li div:first");

								$(active).fadeOut(function(){
									$(active).removeClass("active").hide();
									$(activeP).removeClass("active").hide();
									$("#featBullets li div").removeClass("active");

									$(next).fadeIn().addClass("active");
									$("#featuredImage li p:eq("+(nextID)+")").fadeIn().show().addClass("active");
									$("#featBullets li div:eq("+(nextID)+")").addClass("active");

								});
							}
					},4500);
				}

				intervalTrigger();

			});
 	});
 	
// Start animation loop
	$(function(){
		$("#bulletItems li:eq(0)").addClass("active").show();
		
		$("#previousButton").click(
			function(event){
				var active = $("#bulletItems li.active");
				var next = ($("#bulletItems li.active").prev().length > 0) ? $("#bulletItems li.active").prev() : $("#bulletItems li:last");
				$(active).fadeOut(function(){
					$(active).removeClass("active");
					$(next).fadeIn().addClass("active");
				});
				event.preventDefault();
			}
		);
		
		$("#nextButton").click(
			function(event){
				var active = $("#bulletItems li.active");
				var next = ($("#bulletItems li.active").next().length > 0) ? $("#bulletItems li.active").next() : $("#bulletItems li:first");
				$(active).fadeOut(function(){
					$(active).removeClass("active");
					$(next).fadeIn().addClass("active");
				});
				event.preventDefault();
			}
		);
		
		function intervalTrigger(){
			setInterval(function(){
				var active = $("#bulletItems li.active");
				var next = ($("#bulletItems li.active").next().length > 0) ? $("#bulletItems li.active").next() : $("#bulletItems li:first");
				$(active).fadeOut(function(){
					$(active).removeClass("active");
					$(next).fadeIn().addClass("active");
				});
			}, 5000);
		}
		
		intervalTrigger();
		
	});