$(document).ready(function() {
	
	$(document).pngFix();
	$("#signup_div").centerInClient();

	$("#iphone").animate({ 
        left: "0px"
      }, 600 );
      
    $("li.switch1").hover(function(){
    	$("#slider #pill").stop(true, true);
		$("#slider #pill").animate( { left: "2px" }, 250);
		$(".scroll").animate( { left: "0px" }, 350);
		$("#steps li.step1").fadeIn("slow");
		$("#steps li.step2").fadeOut("fast");
		$("#steps li.step3").fadeOut("fast");
		$("#steps li.step4").fadeOut("fast");
	},
		function(){$(this).addClass("done");
	});

	$("li.switch2").hover(function(){
		$("#slider #pill").stop(true, true);
		$("#slider #pill").animate( { left: "152px" }, 250);
		$(".scroll").animate( { left: "-225px" }, 350);
		$("#steps li.step1").fadeOut("fast");
		$("#steps li.step2").fadeIn("slow");
		$("#steps li.step3").fadeOut("fast");
		$("#steps li.step4").fadeOut("fast");
	},
		function(){$(this).addClass("done");
	});
	
	$("li.switch3").hover(function(){
		$("#slider #pill").stop(true, true);
		$("#slider #pill").animate( { left: "302px" }, 250);
		$(".scroll").animate( { left: "-450px" }, 350);
		$("#steps li.step1").fadeOut("fast");
		$("#steps li.step2").fadeOut("fast");
		$("#steps li.step3").fadeIn("slow");
		$("#steps li.step4").fadeOut("fast");
	},
		function(){$(this).addClass("done");
	});
	
	$("li.switch4").hover(function(){
		$("#slider #pill").stop(true, true);
		$("#slider #pill").animate( { left: "452px" }, 250);
		$(".scroll").animate( { left: "-675px" }, 350);
		$("#steps li.step1").fadeOut("fast");
		$("#steps li.step2").fadeOut("fast");
		$("#steps li.step3").fadeOut("fast");
		$("#steps li.step4").fadeIn("slow");
	},
		function(){$(this).addClass("done");
	});
	
	$('#screenshots a#one').fancyZoom({directory: '/images/'});
	$('#screenshots a#two').fancyZoom({directory: '/images/'});
	$('#screenshots a#three').fancyZoom({directory: '/images/'});
	$('#screenshots a#four').fancyZoom({directory: '/images/'});
	
	$("input.sign-name").focus(function(){
		if ( $(this).val() == "Enter your name")
        $(this).val('');
	});
	$("input.sign-name").blur(function(){
		if ( $(this).val() == "")
		$(this).val('Enter your name');
	});
	
	$("input.sign-email").focus(function(){
		if ( $(this).val() == "Enter your email address")
        $(this).val('');
	});
	$("input.sign-email").blur(function(){
		if ( $(this).val() == "")
		$(this).val('Enter your email address');
	});
	
	$("#head span a").hover(function(){
		$(this).children().stop(true, true);
    	$(this).children().fadeIn("fast");
	},
		function(){$(this).children().fadeOut("fast");
	});
	
	$("#head strong").hover(function(){
		$(this).stop(true, true);
    	$(this).fadeTo("fast", 0.8);
	},
		function(){$(this).fadeTo("fast", 1.0);
	});
	
	$("#head h1 a").hover(function(){
		$(this).children().stop(true, true);
    	$(this).children().fadeIn("fast");
	},
		function(){$(this).children().fadeOut("fast");
	});
	
	/*$('#screenshots a#one').hover(function(){
			$("#screenshots img").stop(true, true);
			$('#screenshots a#two img, #screenshots a#three img, #screenshots a#four img').fadeTo("fast", 0.4);
		},
		function(){
			$('#screenshots a#two img, #screenshots a#three img, #screenshots a#four img').fadeTo("slow", 1.0);
		}
	);
	
	$('#screenshots a#two').hover(function(){
			$("#screenshots img").stop(true, true);
			$('#screenshots a#one img, #screenshots a#three img, #screenshots a#four img').fadeTo("fast", 0.4);
		},
		function(){
			$('#screenshots a#one img, #screenshots a#three img, #screenshots a#four img').fadeTo("slow", 1.0);
		}
	);
	
	$('#screenshots a#three').hover(function(){
			$("#screenshots img").stop(true, true);		
			$('#screenshots a#one img, #screenshots a#two img, #screenshots a#four img').fadeTo("fast", 0.4);
		},
		function(){
			$('#screenshots a#one img, #screenshots a#two img, #screenshots a#four img').fadeTo("slow", 1.0);
		}
	);
	
	$('#screenshots a#four').hover(function(){
			$("#screenshots img").stop(true, true);
			$('#screenshots a#one img, #screenshots a#two img, #screenshots a#three img').fadeTo("fast", 0.4);
		},
		function(){
			$('#screenshots a#one img, #screenshots a#two img, #screenshots a#three img').fadeTo("slow", 1.0);
		}
	);*/
	
});

$.fn.centerInClient = function(options) {
    /// <summary>Centers the selected items in the browser window. Takes into account scroll position.
    /// Ideally the selected set should only match a single element.
    /// </summary>    
    /// <param name="fn" type="Function">Optional function called when centering is complete. Passed DOM element as parameter</param>    
    /// <param name="forceAbsolute" type="Boolean">if true forces the element to be removed from the document flow 
    ///  and attached to the body element to ensure proper absolute positioning. 
    /// Be aware that this may cause ID hierachy for CSS styles to be affected.
    /// </param>
    /// <returns type="jQuery" />
    var opt = { forceAbsolute: false,
                container: window,    // selector of element to center in
                completeHandler: null
              };
    $.extend(opt, options);
   
    return this.each(function(i) {
        var el = $(this);
        var jWin = $(opt.container);
        var isWin = opt.container == window;

        // force to the top of document to ENSURE that 
        // document absolute positioning is available
        if (opt.forceAbsolute) {
            if (isWin)
                el.remove().appendTo("body");
            else
                el.remove().appendTo(jWin.get(0));
        }

        // have to make absolute
        el.css("position", "absolute");

        // height is off a bit so fudge it
        var heightFudge = isWin ? 2.0 : 1.8;

        var x = (isWin ? jWin.width() : jWin.outerWidth()) / 2 - el.outerWidth() / 2;
        var y = (isWin ? jWin.height() : jWin.outerHeight()) / heightFudge - el.outerHeight() / 2;

        el.css("left", x + jWin.scrollLeft());
        el.css("top", y + jWin.scrollTop());

        // if specified make callback and pass element
        if (opt.completeHandler)
            opt.completeHandler(this);
    });
}