centerX = 500;
centerY = 210;
	
duration = 800;
animationEffect = 'easeOutQuart'; //easeOutCubic, easeOutQuint

animationObjects = [];
layoutImagesCount = 0;
imagesCount = 0;

imagesLoaded = 0;
layoutImagesLoaded = 0;
	
oldBlock = null;
newBlock = 0;	
isAnimating = true;
graphittyOn = true;

function prepareHomeAnimation() {
	
	layoutImages = ["/new/welcome_page/bg.jpg", "/new/welcome_page/tree-left.png", "/new/welcome_page/tree-right.png", "/new/welcome_page/see-our-collection.png", "/new/welcome_page/home-go.png", "/new/welcome_page/button-prev.png", "/new/welcome_page/button-next.png", "/new/welcome_page/cool-frames.png", "/new/welcome_page/graphitty-arrow-left.png", "/new/welcome_page/graphitty-arrow-right.png", "/new/welcome_page/photo-framing-made-easy.png", "/new/welcome_page/sign.png", "/new/welcome_page/splash.png", "/new/welcome_page/complete-frame-collection.png"];
	layoutImagesCount = layoutImages.length;
		
	for (var i = 0; i<layoutImagesCount; i++) {
		var img = new Image();
		img.onload = function() {
			layoutImagesLoaded = layoutImagesLoaded+1;
			if (layoutImagesLoaded == layoutImagesCount) {
				homeAnimationStep2();
			}
		}
		img.src = images_dir + layoutImages[i];
	}
}

function homeAnimationStep2() {
	var slideList = document.getElementById("welcome_info_holder").getElementsByTagName("A");
	imagesCount = slideList.length;
	
	for (var i=0; i<imagesCount; i++) {
		
		tmpObj=new Object();
		tmpObj.url = slideList[i].href;
		tmpObj.caption = slideList[i].getElementsByTagName("span")[0].innerHTML;
		
		var img = new Image();
		img.className = "iePNG";
		img.onload = function() {
			imagesLoaded = imagesLoaded+1;
			if (imagesLoaded==imagesCount) {
				initHomeAnimation();
			}
		}
		tmpObj.img = img;
		animationObjects.push(tmpObj);
	}
	
	//load images
	for (var i = 0; i<imagesCount; i++) {
		animationObjects[i].img.src = slideList[i].getElementsByTagName("img")[0].src;
	}
}

function initHomeAnimation() {
	for (var i = 0; i<imagesCount; i++) {
		var tmpObj=document.createElement("div");
		tmpObj.className = "img_block";
		tmpObj.id = "an_block"+i;
		tmpObj.caption = animationObjects[i].caption;		
		$('#img_blocks').append(tmpObj);
		
		var tmpObj=document.createElement("div");
		tmpObj.className = "text_block";
		tmpObj.id = "text_block"+i;
		$(tmpObj).html('<div class="text_block_inner">' + animationObjects[i].caption + '</div>');
		$('#text_blocks').append(tmpObj);
		
		Cufon.replace('.text_block_inner');
		Cufon.now();
	}
	
	for (var i = 0; i<imagesCount; i++) {
		var tmpObj = document.getElementById("an_block"+i);
		
		$(tmpObj).html('<a href="'+ animationObjects[i].url +'"></a>');
		tmpObj.firstChild.appendChild(animationObjects[i].img);
			
		var tmpX = centerX - Math.round(animationObjects[i].img.width/2);
		var tmpY = centerY - Math.round(animationObjects[i].img.height/2);
			
		tmpObj.defaultX = tmpX;
		tmpObj.defaultY = tmpY;
			
		tmpObj.leftPointX = -animationObjects[i].img.width-20;
		tmpObj.rightPointX = centerX*2 + 20;
			
		$(tmpObj).css("left", tmpObj.leftPointX);
		$(tmpObj).css("top", tmpObj.defaultY);
		$(tmpObj).show();
	}
	
	$('#but_prev').mouseover(function() {
		$(this).css("backgroundPosition", '-54px 0px');
	});
	$('#but_prev').mouseout(function() {
		$(this).css("backgroundPosition", '-0px 0px');
	});
	$('#but_prev').click(function() {
		if (isAnimating == false) {
			if (graphittyOn==false) {
				controlAnimation(1);
			} else {
				removeGraphitty(1);
			}
		}
	});
	
	$('#but_next').mouseover(function() {
		$(this).css("backgroundPosition", '-54px 0px');
		//$(this).stop().animate( { backgroundPosition: '-54px 0px'}, 100);
	});
	$('#but_next').mouseout(function() {
		$(this).css("backgroundPosition", '-0px 0px');
	});
	$('#but_next').click(function() {			
		if (isAnimating == false) {
			if (graphittyOn==false) {
				controlAnimation(2);
			} else {
				removeGraphitty(2);
			}
		}
	});
	
	showHomePageStep1();
	
	
}

function showHomePageStep1() {
	$(".progressbar").fadeTo(duration, 0);
	$(".welcome_bg").fadeTo(duration, 1,
		function() {
			 showHomePageStep2();
		}
	);
}
function showHomePageStep2() {
	$('.tree_left').show();
	$('.tree_right').show();
	
	if (jQuery.browser.msie) {
		$(".footer_text").show();
		$(".top_text").show();
		$("#but_prev").show();
		$("#but_next").show();
		$("#graffity1").show();
		$("#graffity2").show();
		$("#graffity3").show();
		$("#graffity4").show();
		$("#graffity5").show();
		$("#graffity7").show();
		
		if ($.browser.version.substr(0,1)<7) {
		} else {
			initSign();
		}
		isAnimating = false;
		
	} else {
		$(".footer_text").fadeTo(duration, 1);
		$("#graffity1").fadeTo(duration, 1);
		
		setTimeout('$("#but_prev").fadeTo(duration, 1)', 200);
		setTimeout('$("#graffity2").fadeTo(duration, 1)', 400);
		setTimeout('$("#graffity3").fadeTo(duration, 1)', 600);
		setTimeout('$("#graffity4").fadeTo(duration, 1)', 800);
		setTimeout('$("#but_next").fadeTo(duration, 1)', 1000);
		
		setTimeout('$("#graffity5").fadeTo(200, 1)', 1200);
		setTimeout('initSign();', 1400);
		setTimeout('$("#graffity7").fadeTo(duration, 1)', 1600);
		setTimeout('$(".top_text").fadeTo(duration, 1, function() {isAnimating = false;} )', 1800);
	}
}

function initSign() {
	if (jQuery.browser.msie) {
		$("#graffity6").show();
		var rot=$("#an_sign").rotate({angle:15, duration:1200, easing:$.easing.easeOutElastic});
		$("#an_sign").rotateAnimation(0);
	} else {
		var rot=$("#an_sign").rotate({angle:15, duration:1200, easing:$.easing.easeOutElastic});
		$("#graffity6").fadeTo(200, 1, function() {$("#an_sign").rotateAnimation(0);});
	}
}

function removeGraphitty(direction) {
	isAnimating = true;
	
	//hide all graffity elements besides sign
	if (jQuery.browser.msie) {
		$(".top_text").hide();
		$("#graffity1").hide();
		$("#graffity2").hide();
		$("#graffity3").hide();
		$("#graffity4").hide();
		$("#graffity5").hide();
		$("#graffity7").hide();
	} else {
		$(".top_text").fadeTo(400, 0);
		$("#graffity1").fadeTo(400, 0);
		$("#graffity2").fadeTo(400, 0);
		$("#graffity3").fadeTo(400, 0);
		$("#graffity4").fadeTo(400, 0);
		$("#graffity5").fadeTo(400, 0);
		$("#graffity7").fadeTo(400, 0);
	}
	
	//hide sign and display first image depending on direction
	var oldObjBlock = document.getElementById("graffity6");
	oldObjBlock.leftPointX = -380;
	oldObjBlock.rightPointX = centerX*2 + 10;
	
	var newObjBlock = document.getElementById("an_block0");
	
	if (direction==1) {
		$(oldObjBlock).animate(
			{left: oldObjBlock.rightPointX},
			duration,
			animationEffect,
			function() {
				isAnimating = false;
				graphittyOn = false;
			}
		);
		$(newObjBlock).css("left" , newObjBlock.leftPointX);
		$(newObjBlock).animate( {left: newObjBlock.defaultX}, duration, animationEffect);
	} else {
		$(oldObjBlock).animate(
			{left: oldObjBlock.leftPointX},
			duration,
			animationEffect,
			function() {
				isAnimating = false;
				graphittyOn = false;
			}
		);
		$(newObjBlock).css("left" , newObjBlock.rightPointX);
		$(newObjBlock).animate( {left: newObjBlock.defaultX}, duration, animationEffect);
	}
	
	var firstTextBlock = document.getElementById("text_block0");
	if (jQuery.browser.msie) {
		$(firstTextBlock).show();
	} else {
		$(firstTextBlock).fadeTo(duration, 1);
	}
}

function controlAnimation(direction) {
	oldBlock = newBlock;
	isAnimating = true;
		
	if (direction==1) {
		if (newBlock!=0) {
			newBlock = newBlock - 1;
		} else {
			newBlock = imagesCount-1;
		}
		
		//current image goes from center to right
		var oldObjBlock = document.getElementById("an_block"+oldBlock);
      	$(oldObjBlock).animate(
			{left: oldObjBlock.rightPointX },
			duration,
			animationEffect,
			function() {
				isAnimating = false;
			}
		);
		
		//new image goes from left to center
		var newObjBlock = document.getElementById("an_block"+newBlock);
		$(newObjBlock).css("left" , newObjBlock.leftPointX);
		$(newObjBlock).animate( {left: newObjBlock.defaultX}, duration, animationEffect);
		
			
	} else {
		if (newBlock!=(imagesCount-1)) {
			newBlock = newBlock +1;
		} else {
			newBlock = 0;
		}
			
		//current image goes from center to left
		var oldObjBlock = document.getElementById("an_block"+oldBlock);
      	$(oldObjBlock).animate(
			{left: oldObjBlock.leftPointX },
			duration,
			animationEffect,
			function() {
				isAnimating = false;
			}
		);
		
		//new image goes from right to center
		var newObjBlock = document.getElementById("an_block"+newBlock);
		$(newObjBlock).css("left" , newObjBlock.rightPointX);
		$(newObjBlock).animate( {left: newObjBlock.defaultX}, duration, animationEffect);		
	}
	
	//fadein new text and fadeout old;
	var oldTextBlock = document.getElementById("text_block"+oldBlock);
	if (jQuery.browser.msie) {
		$(oldTextBlock).hide();
	} else {
		$(oldTextBlock).fadeTo(duration, 0);
	}
	
	var newTextBlock = document.getElementById("text_block"+newBlock);
	if (jQuery.browser.msie) {
		$(newTextBlock).show();
	} else {
		$(newTextBlock).fadeTo(duration, 1);
	}
	
}

function trim(str) {
	return str.replace(/^\s+|\s+$/g,"");
}