$(document).ready(function(){
	
    var $hSlide = $("#hSlide");
	var $allImg = $("#hSlide img");
    var $fImage = $("#hSlide img:first-child");
	var $lImage = $("#hSlide img:last-child");
	
	checkImagesInterval = setInterval(function(){
    	$fImage = $("#hSlide img:first-child");
		if($fImage.height()!=0){
			$allImg = $("#hSlide img");
			$lImage = $("#hSlide img:last-child");
			clearInterval(checkImagesInterval);
			gogo();
		}
	},1);
	
	function gogo(){
		// getting titles
		var $fTitle = $fImage.attr('title');
		var $lTitle = $lImage.attr('title');
		
		// make image wrapper
		$allImg.wrapAll("<div></div>");
		var $wrapper = $("#hSlide div");
		
		// make text container
		$hSlide.after("<div id='ftitleBox'>" + $fTitle + "</div>");
		$hSlide.after("<div id='ltitleBox'>" + $lTitle + "</div>");
		var $ftitleBox = $("#ftitleBox");
		var $ltitleBox = $("#ltitleBox");
		
		$ltitleBox.hide();
		
		// set basic css
		$hSlide.css({
			position: "relative",
			overflow: "hidden",
			margin: "0",
			padding: "0"
		})
		$wrapper.css({
			position: "relative"
		})
		$allImg.css({
			margin: "0",
			padding: "0"
		})
		$ftitleBox.css({
			margin: "-30px 0 0 0",
			padding: "0",
			lineHeight: "30px",
			textAlign: "center",
			position: "relative",
			zIndex: "100",
			color: "white"
		})
		$ltitleBox.css({
			margin: "-30px 0 0 0",
			padding: "0",
			lineHeight: "30px",
			textAlign: "center",
			position: "relative",
			zIndex: "100",
			color: "white"
		})
		
		// set div size
		var h = $fImage.height();
		var w = $fImage.width();
		
		$hSlide.height(h);
		$hSlide.width(w);
		
		$wrapper.height(h);
		$wrapper.width(w * 2);
		
		$ftitleBox.width(w);
		$ltitleBox.width(w);
		
		// animation
		$fImage.mouseover(function(){
			$wrapper.animate({
				left: "-" + w
			}, "slow", "easeInOutExpo")
			$ftitleBox.fadeOut("slow");
			$ltitleBox.fadeIn("slow");
		})
		$lImage.mouseout(function(){
			$wrapper.animate({
				left: "0"
			}, "slow", "easeInOutExpo")
			$ftitleBox.fadeIn("slow");
			$ltitleBox.fadeOut("slow");
		})
		
	}
	
})
