/************************************/
var photos = [ {
		"title" : "Prospective Students",
		"image" : "slide_1.jpg"
	}, {
		"title" : "Current Students",
		"image" : "slide_2.jpg"
	}, {
		"title" : "Alumni",
		"image" : "slide_3.jpg"
	}, {
		"title" : "Parents",
		"image" : "slide_4.jpg"
	}, {
		"title" : "Faculty & Staff",
		"image" : "slide_5.jpg"
	}
];

var countSlides = 0;

$(document).ready(function() {

	var speed = 800;
	var pause = 100;
		  pause2 = 5000;
	var which= 1;
	var next = 1;
	var current = which;

	var animating = true;
	var currentZindex = -1;
	//var currentSlide = false;
	//var slide = 0;


    $("#image-buffer-" +  1).css({
			"background-image" : "url(/images/brandbox/slides/" +  photos[0].image + ")",
			"display" : "block",
			"z-index" : currentZindex--
	  });

		  intervalFadeOut = setInterval(animate, pause);



	function animate()
	{
		countSlides++;


		next = which + 1;
		if (next > 5) { next = 1; }

		//alert ("which:"+which + ", next:" + next + " -- photo#" + photos[which].image);
		// so what we're going to do is fade out the "current" image
		// which will reveal the image beneath it
		if (which < 5)
		{
			//$('#image-buffer-' + which.toString()).animate({opacity: 0}, speed);
			//alert ("1photo#" + photos[which].image + " , " + "#image-buffer-" + next);
			// Make sure the new container is always on the background
			currentZindex--;
			// Set the background image of the new active container
			//alert ("which:"+which + ", next:" + next + " -- photo#" + photos[which].image + " , " + "#image-buffer-" + next);



			$("#image-buffer-" + next ).css({
				"background-image" : "url(/images/brandbox/slides/" +  photos[next-1].image + ")",
				"display" : "block",
				"z-index" : currentZindex
			});

			// Fade out the current container
			// and display the header text when animation is complete
			$('#image-buffer-' + (next-1)).animate({opacity: 0}, speed);  // opacity=0 fadeout(no show)
			/*
			$("#image-buffer-" + which).fadeOut(function() {
				setTimeout(function() {
					animating = false;
				}, 2000);
			});
			*/
			// now swap the image on the left side
			// first, turn this one off
			brandboxLeftOff(which);
			// now turn on the next one
			brandboxLeftOn(next);
			//alert ("##which:"+which + ", next:" + next + " -- photo#" + photos[which].image + " , " + "#image-buffer-" + which);
		}
		else {
			currentZindex = -1;
			// last one, back to starting positions
			$('.brandbox .image-buffer').animate({opacity: 1}, speed);

			// swap the image on the left side
			brandboxLeftOff(which);
			brandboxLeftOn(1);
			//alert ("##which:"+which + ", next:" + next + " -- photo#" + photos[which].image + " , " + "#image-buffer-" + which);
		}

    /*
		if (which >=5){
		   //alert ("#####which:"+which + ", next:" + next + " -- photo#" + photos[0].image + " , " + "#image-buffer-" + 1);
		   //intervalFadeOut = clearInterval(intervalFadeOut);
		   $("#image-buffer-" + 1).css({
				"background-image" : "url(images/" +  photos[0].image + ")",
				"display" : "block",
				"z-index" : currentZindex
			});
		}
		else
		{
		}
    */
		which = next;
		//whichOut = next;


		if(countSlides >=5){
		  intervalFadeOut= clearInterval(intervalFadeOut);
      intervalFadeOut = setInterval(animate, pause2);
		}


		if(countSlides >=100){
			intervalFadeOut = clearInterval(intervalFadeOut);
			countSlides = 5;
		}

	} //END function animate


  function brandboxLeftOn(which) {
		  var imgsrc = $('.brandbox .brandbox-list #brandbox-list-' + which.toString()).children('a').children('img').attr('src');
		  $('.brandbox .brandbox-list #brandbox-list-' + which.toString()).children('a').children('img').attr('src', imgsrc.replace(/_off/, '_on'));
  }

  function brandboxLeftOff(which) {
		  var imgsrc = $('.brandbox .brandbox-list #brandbox-list-' + which.toString()).children('a').children('img').attr('src');
		  $('.brandbox .brandbox-list #brandbox-list-' + which.toString()).children('a').children('img').attr('src', imgsrc.replace(/_on/, '_off'));
  }

  function brandboxLeftOffAll() {
   		$('.brandbox .brandbox-list li').each(function() {
			  var imgsrc = $(this).children('a').children('img').attr('src');
			  $(this).children('a').children('img').attr('src', imgsrc.replace(/_on/, '_off'));
   		  });
   		countSlides = 0;
   		intervalFadeOut = clearInterval(intervalFadeOut);
  }


   	/*
   		now, if you hover over something on the left side
   		the animation stops
   		the arrow goes to whatever you've moused over
   		and the appropriate slide is shown

   		hover( handlerIn(eventObject), handlerOut(eventObject) )
   		:: handlerIn(eventObject) A function to execute when the mouse pointer enters the element.
			:: handlerOut(eventObject) A function to execute when the mouse pointer leaves the element.
   	*/

   $('.brandbox .brandbox-list ul li').each(   function()
   {
   		$(this).hover(
	   		// over
	   		function() {
	   			// stop the animation
	   			intervalFadeOut = clearInterval(intervalFadeOut);

	   			// turn off all the hover states
	   			brandboxLeftOff(which);

	   			// find out which li we're over
	   			var this_li = $(this).attr('id');
				this_li = this_li.split('-');
				var new_which = this_li[this_li.length - 1];

				// highlight that left side
				brandboxLeftOn(new_which);

		    //alert ("which:"+which + "; new_which:" + new_which);
				// show that slide

				if (countSlides >=5)
				{
					if (which < new_which)
					{
						for (var j = which; j < new_which; j++)
						{
							/*
							$("#image-buffer-" + new_which).css({
								"background-image" : "url(/images/brandbox/slides/" +  photos[new_which].image + ")",
								"display" : "block",
								"z-index" : currentZindex
							});
							*/


							$('.brandbox #image-buffer-' + j.toString()).animate({opacity: 0}, 0);
						}//END for
					}//END which < new_which
					else if (which > new_which)//which > new_which
					{
						for (var j = which; j >= new_which; j--)
						{
							/*
							$("#image-buffer-" + j).css({
								"background-image" : "url(/images/brandbox/slides/" +  photos[j].image + ")",
								"display" : "block",
								"z-index" : currentZindex
							});

							$('.brandbox #image-buffer-' + new_which.toString()).animate({opacity: 0}, 0);
							*/
							$('.brandbox #image-buffer-' + j.toString()).animate({opacity: 1}, 0);

						}//END for
					}//END which > new_which
				}//END if (countSlides >=5)

				which = new_which;

	   		},

	   		// out
	   		function() {
	   			// resume animation
				  brandboxLeftOff(which);
	   			//brandboxLeftOffAll();

	   		  //if(which != 1)
	   			/*
				  which = 1;
					next = which;

					$("#image-buffer-" + 1).css({
						"background-image" : "url(/images/brandbox/slides/" +  photos[0].image + ")",
						"display" : "block",
						"z-index" : currentZindex
					});
					*/
					//alert ("##which:"+which + ", next:" + next + " -- photo#" + photos[which].image + " , " + "#image-buffer-" + which);
	   			intervalFadeOut = setInterval(animate, pause);
	   		}
		); // end hover

	}  //END function()
	); //END each



});


function waitme(){
  return;
}