$(document).ready(function(){
	
	var moving = false;
	
	// initialize 
	$("body").attr("id", "js_enabled");
	$("#nav").prepend('<a href="#" id="back"><img src="/images/iphone_teaser/back_button.jpg" alt="back" /></a>');
	$("#nav").append('<a href="#" id="next"><img src="/images/iphone_teaser/next_button.jpg" alt="next" /></a>');
	$("#nav li:first").addClass("selected");
	$("#slides").css({marginLeft:"-1710px"}).animate({marginLeft: "0px"}, 'slow');
	$("#screens ul").css({marginLeft:"-956px"}).animate({marginLeft: "0px"}, 'slow');
	
	$("#nav li a").each(function(index){
		$(this).click(function(e){
			
			if (moving == true) return; // if moving exit
			
			moving = true;
			
			//scrollTo = main Window
			//screenTo = iphone Window
			
			var scrollTo = ((index * 570) * -1);
			var screenTo = ((index * 239) * -1)
			
			$("#slides").animate({marginLeft: scrollTo + "px"}, '', function(){
				moving = false;
			});
			$("#screens ul").animate({marginLeft: screenTo + "px"}, '');
			
			// set Selected state
			$("#nav li").removeClass("selected");
			$(this).parent("li").addClass("selected");
			
			e.preventDefault();
		});

	})
	
	$("#next, #back").click(function(e){
		
		var curPos = parseInt($("#slides").css("marginLeft"));
		var screenPos = parseInt($("#screens ul").css("marginLeft"));
		var scrollTo, screenTo;

		if($(this).attr("id") == "next") {
			scrollTo = (curPos == -1710) ? 0 : curPos -570;
			screenTo = (screenPos == -717) ? 0 : screenPos -239;
		} else {
			scrollTo = (curPos == 0) ? -1710 : curPos + 570;
			screenTo = (screenPos == 0) ? -717 : screenPos + 239;
		}

		if(! moving) {
			moving = true;
			
			$("#nav li").each(function(index){
				$(this).removeClass("selected");
				
				if(scrollTo/-570 == index) {
					$(this).addClass("selected");
				}
			})
			
			$("#screens ul").animate({marginLeft: screenTo + "px" }, '');
			$("#slides").animate({marginLeft: scrollTo + "px" }, '', function(){
				moving = false;
			});
		}
		
		e.preventDefault();
	})
	
	
	
	$("#store_link, #next, #back").each(function(){
		
		var imgSrc = $(this).find("img").attr("src");
		var ext = imgSrc.match(/\.\S{3}$/);
		
		var overIMG = (imgSrc).replace(ext, "_on" + ext);
		
		$(this).attr("orig_img", imgSrc);
		$(this).attr("over_img", overIMG);
		
	}).hover(
		function(){
			$(this).find("img").attr("src", $(this).attr("over_img"));
		},
		function(){
			$(this).find("img").attr("src", $(this).attr("orig_img"));
		}
	)
	
	
	/*
	hover(function(){
		var img = $(this).find("img")
		var overSrc = (img.attr("src")).replace(ext, "-on" + ext);
		var ext = imgSrc.match(/\.\S{3}$/);
		
	}, function(){
		
	})
	*/
})