// JavaScript Document
(function($){
  
  	var bLoaded = false;
	var objList;
	var currentThumb = 0;
	var prevThumb = 0;
	
	var leftButton;
	var rightButton;
	var isAnimating = false;
	var isHoverOnList = false;
	var mouseOnImage;
	
	var aThumbs = [];
	//alert("test");
	$.bgChanger = {
	
		defaults: {			
			sTarget: "body",
			sImgContainer: "bgImages",
			sImgDir: "images_new/background",
			sLeftArrow: "leftArrow",
			sRightArrow: "rightArrow"		
		}	
	}
	
	$.fn.extend({	
		bgChanger:function( config, thumbs, images ) {			
			var config = $.extend( {}, $.bgChanger.defaults, config );			
			objList = this;

			init( config, thumbs, images );
			return this;
		}				
	})
	
	function init( config, thumbs, images ) {

		leftButton = $( "#" + config.sLeftArrow );
		rightButton = $( "#" + config.sRightArrow );
		var iSrc = "images_new/thumbMask.png";
		$.each(
			   thumbs,
			   function( intIndex, thumbPath ){
				   var path = config.sImgDir + thumbPath;
			   		objList.append(
						$( "<li><a href='' class='thumbAnchor' id='" + intIndex + "' ><img src='" + path + "' id='" + intIndex + "' class='thumb' /><img src='" + iSrc + "' class='thumbMask' /></a></li>" )			   
					);
					aThumbs.push( $("li:eq(" + intIndex + ") a", objList ));
					setOffState( $( aThumbs[intIndex]) );
			   }
			   );
		setOnState( aThumbs[currentThumb] );
		setBG( config, images, currentThumb ); //set default bg image
		
		//set event listeners
		setThumbListeners( config, images );
		setArrowListeners( config, images );
		setListListeners();	
	}
	
	function setArrowListeners( config, images ){
		$( leftButton ).click(function(event){
										 
			 	event.preventDefault();  
				onArrowClick( config, images, -1 );
		});		
		$( rightButton ).click(function(event){
										 
				event.preventDefault();  
				onArrowClick( config, images, 1 );				
		});	
	}
	
	function setThumbListeners( config, images ){
		$("a", objList).click(function(event){ 
				event.preventDefault(); 
				onImageClicked( $(this), config, images ) } );
		
		$("a", objList).hoverIntent(function(event){
 
			 	onImageOver( $( this ) ); 	
			 
			}, function(event){
				
			 	onImageOut( $( this ) ); 
		});	
	}
	
	function setListListeners(){
		objList.hover(function(event){
				isHoverOnList = true;
				maskThumbs( this );
			}, function(event){	
				isHoverOnList = false;
				unmaskThumbs();				
		});	
	}
	
	function onImageClicked( $ths, config, images ){	
		
		var $int = parseInt( $( $ths ).attr('id') );
		setBG( config, images, $int );
		/*setIndex( parseInt( $( $ths ).attr('id') ) );			
		setOnState( aThumbs[currentThumb] );
		setOffState( aThumbs[prevThumb] );
		maskThumbs();*/
	}
	
	function setOnState( $ths ){	
		$ths.parent().stop().animate({
			backgroundColor: "#c70000"						   
		}, 600);
	}
	
	function setOffState( $ths ){	
		$ths.parent().stop().animate({
			backgroundColor: "#ffffff"						   
		}, 600);
	}
	
	function onImageOver( $ths ){		
		//setOnState( $ths );
		mouseOnImage = $ths.attr( 'id' );
		unmaskSingleThumb( $ths );
	}
	
	function onImageOut( $ths ){		
		var imageIndex = $ths.attr( 'id' );
		mouseOnImage = -1;
		if ( currentThumb != imageIndex )
		{
			//setOffState( $ths );
			maskSingleThumb( $ths );
		}

	}
	
	function setBG( config, images, $int ){	
		
		if( isAnimating == false )
		{
			$( "a", objList ).css( "cursor", "wait" );
			$( leftButton ).css( "cursor", "wait" );
			$( rightButton ).css( "cursor", "wait" );
			setIndex( $int );			
			setOnState( aThumbs[currentThumb] );
			if( prevThumb != currentThumb ){ setOffState( aThumbs[prevThumb] ); }
			maskThumbs();
			var image = images[currentThumb];
			var imagePath = config.sImgDir + image;
			isAnimating = true;
			$(config.sTarget).stop(false, true).fadeOut( 300, function(){ 											 	 
												 $( "img", this ).remove(); //remove old bg image
												 $(this).append( "<img src='" + imagePath + "' />" );  
												 resizeWindow();
												 $(this).fadeIn( 500, function(){
																			   	$( "a", objList ).css( "cursor", "pointer" );
																				$( leftButton ).css( "cursor", "pointer" );
																				$( rightButton ).css( "cursor", "pointer" );
																				isAnimating = false;
																				}); } );
		}
	}
	
	function maskThumbs(){	
		//debug( currentThumb );
		$.each(
			   aThumbs, function( intValue, aThumb ){
			   		if( intValue != currentThumb && intValue != mouseOnImage )
					{
						$( "img.thumbMask", aThumb ).stop(true, true).fadeIn( 300 );
					}
					else
					{
						unmaskSingleThumb( aThumb );
					}
					
			   });
	}
	
	function unmaskThumbs(){
		$( "img.thumbMask" ).fadeOut( 300 );
	}
	
	function unmaskSingleThumb( $ths ){
		$( "img.thumbMask", $ths ).fadeOut( 300 );
	}
	
	function maskSingleThumb( $ths ){
		if( isHoverOnList ){
			$( "img.thumbMask", $ths ).fadeIn( 300 );
		}
		
	}
	
	function onArrowClick ( config, images, $int ){
			
		var index = currentThumb + $int;
		if( index >= images.length ){
			index = 0;
		}
		else if( index < 0 ){
			index = images.length - 1;
		}
		//setIndex( index );
		setBG( config, images, index );
		//setOnState( aThumbs[currentThumb] );
		//setOffState( aThumbs[prevThumb] );
	}
	
	function setIndex( $int ){
		prevThumb = currentThumb;
		currentThumb = $int;
	}

	function debug( $value ){
		$("#pageTop").append( "<p>" + $value + "</p>" );
	}

})(jQuery);