/*

 * 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).attr("src", Obj.attr("src"));

			$(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.attr("src", 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();

			});			

		};

		//-----------------------------------------------------------------------------------------------------------

		//The new image will fly from the startPosition with the StartOpacity

		

		var Fly = function(FlyIn){

			//Generate the effect map, move the effect map overlay the original map

			$("body").append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");

			$(EffectImageId).css("position", "absolute");

			if(FlyIn){

				//As the new image will fly in, so we set the effect image src = new image

				$(EffectImageId).attr("src", Args.NewImage);			

				$(EffectImageId).css("top", Obj.offset().top + Args.StartTop);

				$(EffectImageId).css("left", Obj.offset().left + Args.StartLeft);

				$(EffectImageId).css("opacity", Args.StartOpacity);

				EndTop = Obj.offset().top;

				EndLeft = Obj.offset().left;

				//Change the opacity base on the input				

				EndOpacity = 1; 			

			}else{

				//As the old image will fly out, so we set the effect image src = new image

				//The effect image will be on top of the old image and hide the old image

				//So we could set the old image with the new src

				$(EffectImageId).attr("src", Obj.attr("src"));						

				Obj.attr("src", Args.NewImage);

				$(EffectImageId).css("top", Obj.offset().top);

				$(EffectImageId).css("left", Obj.offset().left);

				$(EffectImageId).css("opacity", 1);

				EndTop = Obj.offset().top + Args.EndTop;

				EndLeft = Obj.offset().left + Args.EndLeft;

				//Change the opacity base on the input				

				EndOpacity = Args.EndOpacity; 				

			}

			//Let the effect start fly in

			$(EffectImageId).animate({"opacity":EndOpacity, "top":EndTop, 

										"left": EndLeft}, Args.Speed,

				function(){

					Obj.attr("src", Args.NewImage);

					$(EffectImageId).remove();

					EndFunction();

			});

		};

		//-----------------------------------------------------------------------------------------------------------

		//The new image will scoll in and kick the old image out.

		//With the setting ScollIn = false, The original image will scroll out and reveal the new image

		var Scroll = function(ScrollIn){

			//Save the original status so we could set it in the end

			var backup = Obj.clone(true);		

			//Create a viewport for it

			Obj.wrap("<div id='GrpViewport-"+ EffectID+"'></div>");

			$("#GrpViewport-" + EffectID).css("overflow","hidden");

			$("#GrpViewport-" + EffectID).width(Obj.width());

			$("#GrpViewport-" + EffectID).height(Obj.height());								

			//Generate the effect map, move the effect map overlay the original map				

			$("#GrpViewport-" + EffectID).append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");

			$(EffectImageId).css("position", "absolute");

			//Find where the Effect Image start

			var StartTop = 0;

			var StartLeft = 0;				

			switch(Args.Direction){

				case "RightLeft":	StartLeft = -Obj.width();	break;

				case "LeftRight":	StartLeft = Obj.width();	break;

				case "TopDown":		StartTop = -Obj.height();	break;

				case "DownTop":		StartTop = Obj.height();	break;

			}

			//In scroll in using the Start position, else, Set it to 0 so it could scroll out

			//Also need o set the destination of the animate different

			if(ScrollIn){

				$(EffectImageId).attr("src", Args.NewImage);

				$(EffectImageId).css("top", StartTop);

				$(EffectImageId).css("left", StartLeft);

				$(EffectImageId).css("opacity", Args.StartOpacity);

				EndTop = 0;

				EndLeft = 0;

				//Don't change the opacity if it scroll in

				EndOpacity = 1; 

			}else{

				$(EffectImageId).attr("src", Obj.attr("src"));

				$(EffectImageId).css("left", 0);

				$(EffectImageId).css("top", 0);

				Obj.attr("src", Args.NewImage);

				EndTop = StartTop;

				EndLeft = StartLeft;

				//Change the opacity base on the input				

				EndOpacity = Args.EndOpacity; 

			}

			//We need to treat absolute position different					

			//In some case there're text arround the image, it could be a bit mess up

			if(Obj.css("position")!="absolute")

			{

				$("#GrpViewport-" + EffectID).css("position","relative");					

				Obj.css("position","absolute");

			}

			else

			{			

				$("#GrpViewport-" + EffectID).css("position","absolute");

				$("#GrpViewport-" + EffectID).css("left",Obj.css("left"));

				$("#GrpViewport-" + EffectID).css("top",Obj.css("top"));		

				Obj.css("top",0);

				Obj.css("left",0);

			}

			//if effect the original image, then move it as well

			if(Args.EffectOriginal && ScrollIn)

			{			

				//Move the original image along

				Obj.animate({"top": - StartTop,

							"left": - StartLeft}, Args.Speed);									

			}			

			//Start the effect

			$(EffectImageId).animate({"opacity":EndOpacity,"top":EndTop,"left":EndLeft}, Args.Speed, 

					function(){

						//Finish the effect, and replace the viewport with this area

						backup.attr("src",Args.NewImage);

						//Also remove the Attr for imageswitch

						backup.removeAttr("imageswitch");

						$("#GrpViewport-" + EffectID).replaceWith(backup);

						EndFunction();

				});	

		};

		//-----------------------------------------------------------------------------------------------------------

		//A door come out create an effect door close.then open the new image

		var SingleDoor = function(){

			//Save the original status so we could set it in the end

			var backup = Obj.clone(true);

			//Create a viewport for it

			Obj.wrap("<div id='GrpViewport'></div>");

			$("#GrpViewport").css("overflow","hidden");

			$("#GrpViewport").width(Obj.width());

			$("#GrpViewport").height(Obj.height());								

			//Generate the effect map, move the effect map overlay the original map				

			$("#GrpViewport").append("<div class='GrpEffectDiv' id='"+EffectDivId1.replace("#","")+"'/>");

			$(EffectDivId1).attr("src", Args.NewImage);

			$(EffectDivId1).css("position", "absolute");

			$(EffectDivId1).css("background-color", "#FFF");

            if(Args.Door1.length>0){

			    $(EffectDivId1).css("background", Args.Door1);

			}

			$(EffectDivId1).width(Obj.width());

			$(EffectDivId1).height(Obj.height());								

			//Find where the Effect Image start

			var StartTop = 0;

			var StartLeft = 0;				

			switch(Args.Direction){

				case "RightLeft":	StartLeft = -Obj.width();	break;

				case "LeftRight":	StartLeft = Obj.width();	break;

				case "TopDown":		StartTop = -Obj.height();	break;

				case "DownTop":		StartTop = Obj.height();	break;

			}				

			$(EffectDivId1).css("top", StartTop);

			$(EffectDivId1).css("left", StartLeft);	

			

			//We need to treat absolute position different	

			if(Obj.css("position")!="absolute")

			{

				$("#GrpViewport").css("position","relative");					

				Obj.css("position","absolute");			

			}

			else

			{

				$("#GrpViewport").css("position","absolute");

				$("#GrpViewport").css("left",Obj.css("left"));

				$("#GrpViewport").css("top",Obj.css("top"));		

				Obj.css("top",0);

				Obj.css("left",0);

			}

			//Start Close the Door

			$(EffectDivId1).animate({"top":0,"left":0}, Args.Speed, function(){

				//Finish the first effect change the image and open the door

				Obj.attr("src", Args.NewImage);

				//Start open the door

				$(EffectDivId1).animate({"top":StartTop,"left":StartLeft}, Args.Speed, function(){

					//Reset style

					backup.attr("src",Args.NewImage);

					//Also remove the Attr for imageswitch

					backup.removeAttr("imageswitch");					

					$("#GrpViewport").replaceWith(backup);

					EndFunction();

				});

			});	

		};

		//-----------------------------------------------------------------------------------------------------------

		//Same with single door but with this effect, there will be 2 door

		var DoubleDoor = function(){

			//Save the original status so we could set it in the end

			var orgPosition = Obj.css("position");

			var orgLeft = Obj.css("left");

			var orgTop = Obj.css("top");

			//Create a viewport for it

			Obj.wrap("<div id='GrpViewport'></div>");

			$("#GrpViewport").css("overflow","hidden");

			$("#GrpViewport").width(Obj.width());

			$("#GrpViewport").height(Obj.height());								

			//Generate the effect map, move the effect map overlay the original map				

			$("#GrpViewport").append("<div class='GrpEffectDiv' id='"+EffectDivId1.replace("#","")+"'/>");

			$(EffectDivId1).css("position", "absolute");

			$(EffectDivId1).css("background-color", "#FFF");

			if(Args.Door1.length>0){

                $(EffectDivId1).css("background", Args.Door1);			

			}

			$(EffectDivId1).width(Obj.width());

			$(EffectDivId1).height(Obj.height());								

			//We need the second door

			$("#GrpViewport").append("<div class='GrpEffectDiv1' id='"+EffectDivId2.replace("#","")+"'/>");

			$(EffectDivId2).css("position", "absolute");

			$(EffectDivId2).css("background-color", "#FFF");

			if(Args.Door2.length>0){

                $(EffectDivId2).css("background", Args.Door2);				

			}

			$(EffectDivId2).width(Obj.width());

			$(EffectDivId2).height(Obj.height());								

			

			//Find where the Effect Image start

			var StartTop = 0;

			var StartLeft = 0;				

			switch(Args.Direction){

				case "RightLeft":	StartLeft = -Obj.width();	break;

				case "LeftRight":	StartLeft = Obj.width();	break;

				case "TopDown":		StartTop = -Obj.height();	break;

				case "DownTop":		StartTop = Obj.height();	break;

			}				

			$(EffectDivId1).css("top", StartTop);

			$(EffectDivId1).css("left", StartLeft);	

			$(EffectDivId2).css("top", -StartTop);

			$(EffectDivId2).css("left", -StartLeft);	

			

			//set the background for the door effect so it look different

			if(!Args.EffectOriginal){

				$(EffectDivId1).css("background","#FFF url("+Args.NewImage+") no-repeat "+ -StartLeft/2 +"px "+ -StartTop/2+"px");

				$(EffectDivId2).css("background","#FFF url("+Args.NewImage+") no-repeat "+ StartLeft/2+"px "+ StartTop/2 +"px");

			}			

			

			//We need to treat absolute position different					

			if(Obj.css("position")!="absolute")

			{

				$("#GrpViewport").css("position","relative");					

				Obj.css("position","absolute");			

			}

			else

			{

				$("#GrpViewport").css("position","absolute");

				$("#GrpViewport").css("left",orgLeft);

				$("#GrpViewport").css("top",orgTop);

				Obj.css("position","absolute");			

				Obj.css("top",0);

				Obj.css("left",0);

			}

			//Start Close the Door

			$(EffectDivId1).animate({"top":StartTop/2,"left":StartLeft/2}, Args.Speed, function(){

				//Finish the first effect change the image and open the door

				Obj.attr("src", Args.NewImage);

				//If EffectOriginal isn't on mean two door stick into the new image, then stop here. Else carry on

				if(!Args.EffectOriginal){

					Obj.css("position", orgPosition);

					Obj.css("top", orgTop);

					Obj.css("left", orgLeft);				

					$("#GrpViewport").replaceWith(Obj);

				}else{

					//Start open the door

					$(EffectDivId1).animate({"top":StartTop,"left":StartLeft}, Args.Speed, function(){

						//Reset style

						Obj.css("position", orgPosition);

						Obj.css("top", orgTop);

						Obj.css("left", orgLeft);

						$("#GrpViewport").replaceWith(Obj);

					});

				}

			});	

			$(EffectDivId2).animate({"top":-StartTop/2,"left":-StartLeft/2}, Args.Speed, function(){

				//Finish the first effect change the image and open the door

				Obj.attr("src", Args.NewImage);

				//If EffectOriginal isn't on mean two door stick into the new image, then stop here. Else carry on

				if(!Args.EffectOriginal){

					EndFunction();

				}else{

					//Start open the door

					$(EffectDivId2).animate({"top":-StartTop,"left":-StartLeft}, Args.Speed, function(){

						//Run the end effect

						EndFunction();

					});

				}

			});					

		};

		//-----------------------------------------------------------------------------------------------------------

		//The new image will flip from the back of the old one to the top

		//If FlipIn is false, then the old image will flip to the back reveal the new one

		var Flip = function(FlipIn){

		    var backup = Obj.clone(true);	

			if(Obj.css("z-index") == 'auto')	{

				Obj.css("z-index", 100);

			}

			//if (position different then absolute and relative then it should be relative)

			if(Obj.css("position") != "absolute"){

				Obj.css("position", "relative");

			}

			//Generate the effect map, move the effect map overlay the original map

			$("body").append("<img class='GrpEffectImg'  id='"+EffectImageId.replace("#","")+"'/>");

			$(EffectImageId).css("position", "absolute");

			$(EffectImageId).css("top", Obj.offset().top);

			$(EffectImageId).css("left", Obj.offset().left);

			

			if(FlipIn){

				$(EffectImageId).css("opacity", Args.StartOpacity);

				//So this layer will be under the original image

				$(EffectImageId).css("z-index", Obj.css("z-index")-1);

				$(EffectImageId).attr("src", Args.NewImage);

			}else{

				$(EffectImageId).css("opacity", 1);

				//This layer will be on top the original image

				$(EffectImageId).css("z-index", Obj.css("z-index")+1);			

				//Turn in to the fake old image

				$(EffectImageId).attr("src", Obj.attr("src"));

				Obj.attr("src", Args.NewImage);

				

			}

			

			//Find where the effect layer stop

			if(Math.abs(Args.EndTop)<Obj.height() && Math.abs(Args.EndLeft)<Obj.width()){

				EndTop = Obj.offset().top;

				EndLeft = Obj.offset().left + Obj.width();

			}else{

				EndTop = Obj.offset().top + Args.EndTop;

				EndLeft = Obj.offset().left + Args.EndLeft;				

			}

			EndOpacity = 1; 

			

			//Let the effect start, 

			$(EffectImageId).animate({"opacity":EndOpacity, "top":EndTop, 

										"left": EndLeft}, Args.Speed,

				function(){

					//Now the effect image is out, move it back again

					if(FlipIn) {

						$(EffectImageId).css("z-index", 101);

					}else{

						EndOpacity = Args.EndOpacity;

						$(EffectImageId).css("z-index", 2);						

					}

					$(EffectImageId).animate({"opacity":EndOpacity, "top":Obj.offset().top, 

												"left": Obj.offset().left}, Args.Speed,

						function(){

							//Restore the image to the original

							backup.attr("src", Args.NewImage);

							//Also remove the Attr for imageswitch

							backup.removeAttr("imageswitch");															

							Obj.replaceWith(backup);

							$(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;

						case "FlyIn": 		Fly(true);		break;

						case "FlyOut":		Fly(false);		break;

						case "FlipIn": 		Flip(true);		break;

						case "FlipOut":		Flip(false);	break;				

						case "ScrollIn":	Scroll(true);	break;

						case "ScrollOut":	Scroll(false);	break;

						case "SingleDoor":	SingleDoor();	break;

						case "DoubleDoor":	DoubleDoor();	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);