// JavaScript (jQuery) Scroll Images Slideshow Document

/******* custom jQuery slideshow for divs *****/

  function slideImage(){
	// if js enabled, hide extra divs
	$("#masthead").css("overflow","hidden");
	// define masthead width to full page
	$("#masthead").css("width","100%");
	// changed to 100% to scale with browser width (from 1050px;)
	
	// create slide image arrows dynamically
	var slideDivs = '<div id="slideLeft"></div> <div id="slideRight"></div>';
	
	$('div.quarters').eq(5).after(slideDivs);
	
	
	// create slide images with js, if no js, there's no slideshow so we don't need an image
	$("#slideLeft").append('<img title="Go back to previous product previews" src="/themes/subleds/images/slide-left.png" alt="Go back to previous product previews" />');
	$("#slideRight").append('<img title="Click for more product previews" src="/themes/subleds/images/slide-right.png" alt="Click for more product previews" />');
	
	// use pointer on hover of this image
	$("#slideLeft").mouseover(function(){
	  $(this).css("cursor", "pointer");
	});
	$("#slideRight").mouseover(function(){
	  $(this).css("cursor", "pointer");
	});
	
	// get total number of divs in masthead
    var nb = $("div.quarters").length; // total amount of divs in the masthead
	// loop through all of them to get the next div in turn
	for (i = 0; i < nb; i++){
	  var qtrs = $('div.quarters');
	  // alert(qtrs[i].innerHTML);
	  var innerInfo = qtrs[i].innerHTML;
	  var myQtrs = qtrs[i];
	  
	  // hide the div boxes more than the 4 that show initially	  
	  $("div.quarters:last").hide();	
	  
	  // if there's more than 4 divs in the masthead area
	  // remove the last border
	  if (i >= 3){
	    // alert(myQtrs.innerHTML);
	    myQtrs.className = "quarters last";
	  }
	  if (i>3){
		$('div.quarters').eq(i).hide();
	  }

	  $("#slideRight").show(); // initially show right "forward" slide image on page load  
	}	
  }
  
  var x = -1; // set -1 so first page 'pauses'
  
  function showDiv(){
  
    var t = setTimeout("showDiv();", 5000);
    // check that the number of divs called is less than or equal to the 
	// number of divs with the class "quarters" 
    var nb = $("div.quarters").length;
		  
	if (x <= 2){ // nb - 1){	
	/* show 4 divs at a time so I don't need to cycle through nb (all indexes of the div) */
	  
	  // call function on timer and add to it each time through
	  // set timeout to load event to slide through divs after 5 seconds
	  
	  // increment the x value before processing to move to the next div element
		x = x+1;
	  
	    if (x == 1){
		  $("div.quarters").eq(x-1).hide("slow");
		  $("div.quarters").eq(x+2).removeClass("last");
		  $("div.quarters").eq(x+3).show("slow");
		  $("#slideLeft").show();
		}
		if (x == 2){
		  $("div.quarters").eq(x-1).hide("slow");
		  $("div.quarters").eq(x+2).removeClass("last");
		  $("div.quarters").eq(x+3).show("slow");
		  $("#slideRight").hide();
		   // hide image when end is reached
		  clearTimeout(t); // stops the cycle through or check so user can click left or right button		  
		}
		
	} // end if x less than or equal to 2
		
		/* slide left/right image change */
	  
	$("#slideLeft img").mouseover(function(){
	  $(this).attr("src", "/themes/subleds/images/slide-left-hover.png");
	});
	$("#slideLeft img").mouseout(function(){
	  $(this).attr("src", "/themes/subleds/images/slide-left.png");
	});
	  
	$("#slideRight img").mouseover(function(){
	  $(this).attr("src", "/themes/subleds/images/slide-right-hover.png");
	});
	$("#slideRight img").mouseout(function(){
	  $(this).attr("src", "/themes/subleds/images/slide-right.png");
	});

	/*** end slide image change ***/
  // auto show div function
		
		// check visibility of divs to determine x/y value for 6 divs, 4 shown at a time
		// if [0] is shown, x/y == 0
		// if [0] is hidden && [5] is hidden x/y == 1
		// if [5] is shown x/y == 2
		
		// alert($("div.quarters").eq(4).css('display'));
		
		  $("#slideLeft img").click(function(){
		    // check which elements are hidden to determine which to show/hide next
			// fixes bug with increment/decrement of var
		    if ($("div.quarters").eq(0).css('display') == "none" && $("div.quarters").eq(1).css('display') == "none"){
			  y = 1;
			}
			if ($("div.quarters").eq(0).css('display') == "none" && $("div.quarters").eq(5).css('display') == "none"){
			  y = 0;
			}	
		
		    // y = y - 1; -- fix bug by removing --		  
			//alert("y left = " + y);
		    
			clearTimeout(t); // clear timeout as soon as click so the user can control the slideshow
		    switch (y){
			
			  case -2:
			    y = -1;
			  case -1:
			    y = 0;
			  case 0:
		        $("div.quarters").eq(0).show("slow");
		        $("div.quarters").eq(2).removeClass("last");
		        $("div.quarters").eq(3).addClass("last");
		        $("div.quarters").eq(4).hide("slow");
		        $("div.quarters").eq(5).hide("slow");
		        $("#slideRight").show();
				$("#slideLeft").hide();
			    break;
			  case 1:
		        $("div.quarters").eq(1).show("slow");
		        $("div.quarters").eq(4).addClass("last");
		        $("div.quarters").eq(5).hide("slow");
		        $("#slideRight").show();
				//$("#slideLeft").show();
			    break;
			  case 2:
			    $("div.quarters").eq(0).hide("slow"); // hide first element in case it wasn't hidden previously
		        $("div.quarters").eq(1).show("slow");
		        $("div.quarters").eq(1).removeClass("last");
		        $("div.quarters").eq(4).addClass("last");
				$("div.quarters").eq(4).show("slow");
		        $("div.quarters").eq(5).hide("slow");
		        $("#slideRight").show(); // show the slideshow right button
			    break;
			}
			
		  });
		  
		  $("#slideRight img").click(function(){
		    // check which elements are hidden to determine which to show/hide next
			// fixes bug with increment/decrement of var
		    if ($("div.quarters").eq(4).css('display') == "none" && $("div.quarters").eq(5).css('display') == "none"){
			  y = 1;
			}
			if ($("div.quarters").eq(0).css('display') == "none" && $("div.quarters").eq(5).css('display') == "none"){
			  y = 2;
			}
				
			// y = y + 1; -- fix bug by removing ++
			//alert("y right = " + y);
		    
			clearTimeout(t); // clear timeout as soon as click so user can control the slideshow
			
		    switch (y){
			
			  case -1:
			    y = 0;
				break;
			  case 0:
			    y = 1;
				break;
			  case 1: 
		        $("div.quarters").eq(0).hide("slow"); // hide first element
		        $("div.quarters").eq(3).removeClass("last");
		        $("div.quarters").eq(4).addClass("last");
		        $("div.quarters").eq(4).show("slow");
		        $("#slideLeft").show();
			    break;
			  case 2: 
		        $("div.quarters").eq(0).hide("slow"); // in case it didn't get hidden previously onclick
		        $("div.quarters").eq(1).hide("slow");
		        $("div.quarters").eq(4).removeClass("last");
		        $("div.quarters").eq(5).addClass("last");
		        $("div.quarters").eq(5).show("slow");
		        $("#slideLeft").show();
		        $("#slideRight").hide();
			    break;				
			}
			
		  });
		  
		/************
		Future upgrade: Add a parent div dynamically with class of 'quarters' to keep cycling through the elements (adding more
		as users see fit) in the slideshow like we're going from beginning to end and back to the beginning (loop).
		*************/
	 
  } // end image div function
	
/******* end custom jQuery slideshow for divs *****/

$(document).ready(function() {
	slideImage(); 
	showDiv();
});