/*
 * Image rotator
 *
 * Copyright (c) 2009 Wirepoint Media, LLC (www.wirepointmedia.com)
 *
 * @Author: Chris Cox <chris.cox@wirepointmedia.com> 
 * @Date: 03-23-09
 * @version: 1.1 REV. 03-25-09
 * @version: 1.2 REV. 04-02-09
 */
 

$(function(){

	var speed = 500;
	var speedHover = 500;
    var instructionTimeout = 3000;
	
	//Hide image rotator and preload images
	$("#rotatorWrapper").hide();	
	jQuery.preloadImages();

    //Run Once
   // showInstructions();
        
	//Assign classes
	$("#mask img").addClass("rotator-item");
	$("#mask img:first").addClass("rotator-item-active");
	
	
	//Initial position	
	$("#rotatorWrapper").width(1000);	
    $("#mask").width(500);
    $("#mask").css("left", 300);	
	
	/*
	$("#rotatorWrapper").width(840);
	
	$("#mask").width( $("#mask img:first").width() );	
	//$("#mask").height( $("#mask img:first").height() );	
    $("#rotator").width( $("#mask img:first").width() + 80 );		
	
	var pos = ( $("#rotatorWrapper").width() / 2) - ( $("#mask .rotator-item").eq(0).width() / 2 );
	$("#mask").css("left", pos);
   */

	
	 // loadHoverImage();
		
		
	$("#rotator #next").click(function(){
		var currIndex = $("#mask img").index( $(".rotator-item-active") );	
		var nextIndex = currIndex;			
		(currIndex == $("#mask img.rotator-item").length - 1) ? nextIndex = 0 : nextIndex += 1;		
		animateMask(currIndex, nextIndex); 
	});


	$("#rotator #prev").click(function(){
		var currIndex = $("#mask img").index( $(".rotator-item-active") );	
		var nextIndex = currIndex;
        (currIndex == 0) ? nextIndex = $("#mask img.rotator-item").length - 1 : nextIndex -= 1;		
		animateMask(currIndex, nextIndex); 
	});
	
	function animateMask(currIndex, nextIndex) {
		//Misc actions
		$("#instructions").remove();		
		$("#mask .rotator-item-hover").remove();	
		$("#mask .rotator-item").removeClass("rotator-item-active");
		$("#mask").addClass("bordered");
		$("#loader").show();	

		//Set mask to size of previous image to enable amnimation
		$("#mask").width( $("#mask .rotator-item").eq(currIndex).width() );	
		$("#mask").height( $("#mask .rotator-item").eq(currIndex).height() );		
		
		//New values
		var newWidth = $("#mask .rotator-item").eq(nextIndex).width();	
		var newHeight = $("#mask .rotator-item").eq(nextIndex).height();	
		var pos = ($("#rotatorWrapper").width() / 2) - ($("#mask .rotator-item").eq(nextIndex).width() / 2);
			
		//Animate arrow wrapper
		$("#rotator").animate({
			width: newWidth + $("#rotator #prev").width() + $("#rotator #next").width()
		}, speed );
		
		//Animate image mask
		$("#mask").animate({
			width: newWidth,
			height: newHeight,
			left: pos
		}, speed , '', function() { showImage(nextIndex) }  );
	}
	
	function showImage(index){
		$("#loader").hide();
		$("#mask").removeClass("bordered");
		$("#mask .rotator-item").eq(index).addClass("rotator-item-active");
		// loadHoverImage();
	} 

		
	function loadHoverImage() {
		//Get "Before" version of image
		var src = $("#mask .rotator-item-active").attr("src");		
		if (src) {
			var len = src.length;
			var ext = src.substring(len - 3, len);
			var src_hover = src.substring(0, len - 5) + "b." + ext;
			$("#mask").append("<img src='" + src_hover + "' class='rotator-item-hover' style='display:none'></img>") ;
								
			//Assign hover action
			$("#mask").hover(
				function() {
					$("#mask .rotator-item-hover").fadeIn(speedHover);     
				},
				function() {
					$("#mask .rotator-item-hover").fadeOut(speedHover);
				}
			)
		}			
	}

	function showInstructions() {
		$("#mask").append( $("<div id='instructions'>Rollover images to see the Before version</div>") );
		//hide instructions after timer
		setTimeout(function() {
			 $("#instructions").remove();
		}, instructionTimeout );
	}
});

jQuery.preloadImages = function() {
	$("#mask img").each(function(i){
		var src = $(this).attr("src");
		var len = src.length;
		var ext = src.substring(len - 3, len);
		var src_hover = src.substring(0, len - 5) + "b." + ext;
		jQuery("<img>").attr("src", src_hover);
	});
	
    //Show image rotator after all images are loaded   
    $("#rotatorWrapper").fadeIn();
}