/*
 * jQuery.ImageSwitch
 * Version: 1.0.2
 * http://www.hieu.co.uk/ImageSwitch/
 *
 * Copyright (c) 2009 Hieu Pham - http://www.hieu.co.uk
 * COMMON DEVELOPMENT AND DISTRIBUTION LICENSE (CDDL)
 * http://www.opensource.org/licenses/cddl1.php
 *
 * Date: 13/03/2009
 * Revision: 50
 */
 //This function to preload the image before using it in the function
 var Debug = function(mess, line){
	if(!$("#Debug"))
	{
		$("body").append("<div id='Debug'></div>");
	}
	if(line){
		$("#Debug").html($("#Debug").html()+"<br/>"+mess);
	}
	else{
		$("#Debug").html($("#Debug").html()+mess);
	}
};
(function($){
	$.fn.ImageSwitch = function(Arguements, FuntionHandle) {
		var defaults = {
			Type: "FadeIn", // Type of effect to run the function
			NewImage: "", //The new image will be loaded in
			EffectOriginal: true,
			Speed: 1000, //Speed of the effect
			StartLeft: 50, //The position the effect start compare to the original position could be (-)
			StartTop: 0,
			StartOpacity: 0, //Which start opacity it would be
			EndLeft: -50, //The position the effect end compare to the original position could be (-)
			EndTop: 0,
			EndOpacity: 0, //Which start opacity it would be
			Direction: "RightLeft", //Which Way the image will be sroll
			Door1: "", //The image for the door 1
			Door2: "" //The image for the door 2
		};
		
		var Args = $.extend(defaults, Arguements);
		var Obj = this; // Just a way to reference to this obj in case we need to pass in another event handle
		//To specific which obj ID the effect will associate to
		var EffectID = 0;
		
		var EffectImageId;//The id of effect image layer : #GrpEffectImg + EffectID
		var EffectDivId1;//The id of effect div layer : #GrpEffectDiv2 + EffectID
		var EffectDivId2;//The id of effect div layer : #GrpEffectDiv2 + EffectID
		
        var EndFunction = function(){
			Obj.data("imageswitch", -1);
		};		
		if($.isFunction(FuntionHandle)){
		    EndFunction = function(){		
				FuntionHandle();	
				Obj.data("imageswitch", -1);
			};
		}
		//-----------------------------------------------------------------------------------------------------------
		//The original image will be fade out when the new image will fade in
		var FadeImage = function(){
			//Generate the effect map, move the effect map overlay the original map
			Obj.parent().append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");
			$(EffectImageId).css("background-image", Obj.css("background-image"));
			$(EffectImageId).css("position", "absolute");
			$(EffectImageId).css("top", Obj.position().top);
			$(EffectImageId).css("left", Obj.position().left);
			$(EffectImageId).css("opacity", 1);
			
			//Change image of the original map
			Obj.css("background-image", "url(" + Args.NewImage + ")");

			//Need something special when user want to keep no effect for the orignal
			if(Args.EffectOriginal)
			{
				//Set the start opacity, as the effect will fade out we set in start at 1, vice versa for the original
				Obj.css("opacity", Args.StartOpacity);		
				
				//Fade in the original image
				Obj.animate({"opacity":1}, Args.Speed);			
			}
			
			//Start effect animation
			$(EffectImageId).animate({"opacity":0}, Args.Speed, function(){
					//Remove the effect image when finish the effect
					$(EffectImageId).remove();
					EndFunction();
			});			
		};
		//-----------------------------------------------------------------------------------------------------------
		
		return this.each(function(){
			Obj = $(this);		
			if(!Obj.ImageAnimating())
			{
				EffectID = $.data(Obj);
				
				//Mark the effect is running				
				Obj.data("imageswitch", EffectID);
				EffectImageId = "#GrpEffectImg-" + EffectID;//The id of effect image layer : #GrpEffectImg- + EffectID
				EffectDivId1 = "#GrpEffectDiv1-" + EffectID;//The id of effect div layer : #GrpEffectDiv1- + EffectID
				EffectDivId2 = "#GrpEffectDiv2-" + EffectID;//The id of effect div layer : #GrpEffectDiv2- + EffectID
				
				var TempImg = new Image();
				TempImg.src = Args.NewImage;
				$.ImagePreload(Args.NewImage,function(){
					switch(Args.Type){
						case "FadeIn":		FadeImage();	break;
					}
				});
			}
		});	
	};	
})(jQuery);

//Check if a IS effect is running
(function($){
	$.fn.ImageAnimating = function(){
		if(this.data("imageswitch")>0){
			return true;
		}else{
			return false;
		}
	};
})(jQuery);
//Stop a specific the IS effect if it's running
(function($){
	$.fn.ImageStop = function(clearQueue, gotoEnd, EndFunction){
		return this.each(function(){
			if($(this).ImageAnimating()){
				var EffectID = $.data(this,"imageswitch");
				$("#GrpEffectImg-"+EffectID).stop(clearQueue, gotoEnd);
				$("#GrpEffectDiv-"+EffectID).stop(clearQueue, gotoEnd);
				$("#GrpEffectDiv1-"+EffectID).stop(clearQueue, gotoEnd);
				$(this).stop(clearQueue, gotoEnd);
				$("#GrpEffectImg-"+EffectID).remove();
				$("#GrpEffectDiv-"+EffectID).remove();
				$("#GrpEffectDiv1-"+EffectID).remove();
				if($.isFunction(EndFunction)){
					EndFunction();
				}
			}
		});
	};
})(jQuery);
//Stop all the IS effect running
(function($){
	$.ImageStopAll = function(clearQueue, gotoEnd, EndFunction){
		$(".GrpEffectImg").stop(clearQueue, gotoEnd);
		$(".GrpEffectDiv").stop(clearQueue, gotoEnd);
		$(".GrpEffectDiv1").stop(clearQueue, gotoEnd);
		$(this).stop(clearQueue, gotoEnd);
		$(".GrpEffectImg").remove();
		$(".GrpEffectDiv").remove();
		$(".GrpEffectDiv1").remove();
		$.data(this, "imageswitch", -1);
		if($.isFunction(EndFunction)){
			EndFunction();
		}
	};
})(jQuery);
//Preload a specific image
(function($){
	$.ImagePreload = function(FileName, EndFunction){
		var TempImage = new Image();
		TempImage.src = FileName;
		if($.isFunction(EndFunction)){
			$(TempImage).load(EndFunction());
		}
	};
})(jQuery);