$(document).ready(function() {

		if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
		{
   			location.replace("http://knowskateboarding.com/ios/index.php");
		};
								   		
		$("#back").hide();
		$('#trickinfo').click(function(){
			$("#screen").css("background-image" , "url(/css/images/tricktip.png)");
			$("#playall, #learnthetrick, #aboutthetrick, #tricktips, #trickvariations, #trickinfo").hide();
			$("#back").show();
			$("#screen .jclock").css("top","-13px");
		})
		
		$('#back').click(function(){
			$("#screen .jclock").css("top","0px");
			$('#back').hide();
			$("#screen").css("background-image", "url(/css/images/ollie-menu.png)");
			$("#playall, #learnthetrick, #aboutthetrick, #tricktips, #trickvariations, #trickinfo").show();
		});
	
		// hashslider v0.9 by manuel huegel, copyright 2010
		// mgoys.com
		
		//get width and height of the wrapper and give it to the UL	
			var wrapperwidth = $('#slider').width() *  $('#slider ul > li').size();
			$('#slider ul').css('width', wrapperwidth);
			var wrapperheight = $('#slider').height();
			$('#slider ul').css('height', wrapperheight);	
								   
		//set my li width
			var width = $('#slider').width();
			$('#slider ul li').css('width', width);
		
		//set my counter vars
			var counter = $('#slider ul > li').size();
			var decount = 1;
			var autocount = 1;
			
		//create my number navigation
			var createNum = 1;
			$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
				
			while ( createNum != counter) {
			$('#numbers li:last-child').after('<li>  </li>');
			createNum++;
			$('#numbers li:last-child').html(createNum);
			$('#numbers li:last-child').attr('id', 'id' + createNum);
			}
			
		//slide the button to the next item
		function goNext() {
			if ( decount != counter) {
			$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
			$('.activenum').removeClass('activenum').next().addClass('activenum');
			decount++;
			window.location.hash = decount;
			}
		}
		
		function goBack() {
			if ( decount != 1) {
			$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
			$('.activenum').removeClass('activenum').prev().addClass('activenum');
			decount--;
			window.location.hash = decount;
			}
		}
		
		//make the number clickable
		$("#numbers li").click(function() { 
			//$('#info4').html( $(this).html() ); 
			var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
			//$('#info4').html( clickednum );
			$('#slider ul').animate({ left: clickednum }, 1000, 'swing', function() { });
			$('.activenum').removeClass('activenum');
			$(this).addClass('activenum');
			decount = $(this).html();
			window.location.hash = $(this).html();	
		});
		
		//thaths the hash-shizzle
		if ( window.location.hash != '') {
		//get hash, scroll to position
			var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
			$('#slider ul').animate({ left: hashnum }, 0, function() { });
		//set counters to position
			decount = window.location.hash.substr(1);
			$('.activenum').removeClass('activenum');
			var hashname = window.location.hash.substr(1);
			$('#id' + hashname).addClass('activenum');
		}
			
		//get my clickers
		$("#right").click(function() { goNext(); });	
		$("#left").click(function() { goBack(); });	
	
	$('#tricks').hover(function(){
		//$('#feature-display').html('<div class="jclock"></div><div id="tricks-210"><img src="tricks-210.png" alt="22 Fundamental Tricks with the element pro team." /></div>');
		$("#tricks-210").show();		
	});
	
	$('#pro').hover(function(){
		//$('#feature-display').html('<div id="elementpros"></div>');
		$("#tricks-210").hide();
		$("#feature-screen").css("background-image" , "url(/css/images/pros.png)");		
	});
	
	$('#stance').hover(function(){
		//$('#feature-display').html('<div id="stances"></div>');
		$("#tricks-210").hide();	
		$("#feature-screen").css("background-image" , "url(/css/images/stances.png)");
	});
	
	$('#record').hover(function(){
		//$('#feature-display').html('<div id="recordyourself"></div>');
		$("#tricks-210").hide();
		$("#feature-screen").css("background-image" , "url(/css/images/recordyourself.png)");
	});

   	var options = {
        timeNotation: '12h',
        am_pm: true,
        fontFamily: 'Helvetica Neue',
        fontSize: '9.5px',
        foreground: '#d5d5d5',
        background: 'black'
      }; 
    
   	$('.jclock').jclock(options);
				
	$('#playall').click(function(){
			$('#iphone-video').html('<iframe src="http://player.vimeo.com/video/29698267?portrait=0&amp;color=ffffff&amp;autoplay=1" style="visibility:hidden;" onload="this.style.visibility =\'visible\'" width="348" height="216" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	});
	
	$('#learnthetrick').click(function(){
			$('#iphone-video').html('<iframe src="http://player.vimeo.com/video/29698231?portrait=0&amp;color=ffffff&amp;autoplay=1" style="visibility:hidden;" onload="this.style.visibility =\'visible\'" width="348" height="216" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	});
	
	$('#aboutthetrick').click(function(){
			$('#iphone-video').html('<iframe src="http://player.vimeo.com/video/29697949?portrait=0&amp;color=ffffff&amp;autoplay=1" style="visibility:hidden;" onload="this.style.visibility =\'visible\'" width="348" height="216" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	});
	
	$('#tricktips').click(function(){
			$('#iphone-video').html('<iframe src="http://player.vimeo.com/video/29698348?portrait=0&amp;color=ffffff&amp;autoplay=1" style="visibility:hidden;" onload="this.style.visibility =\'visible\'" width="348" height="216" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	});
	
	$('#trickvariations').click(function(){
			$('#iphone-video').html('<iframe src="http://player.vimeo.com/video/29698414?portrait=0&amp;color=ffffff&amp;autoplay=1" style="visibility:hidden;" onload="this.style.visibility =\'visible\'" width="348" height="216" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	});
	
	if($("#id1").hasClass("activenum") == true) {
	   $("#left").hide();
	 }
	 
	if($("#id4").hasClass("activenum") == true) {
	   $("#right").hide();
	 }
	
	$("#id2, #id3, #id4").click(function(){
			$("#left").show();
	});
	
	$("#id1, #id2, #id3").click(function(){
			$("#right").show();
	});
	
	$("#id1").click(function(){
		$("#left").hide();
	});
	
	$("#id4").click(function(){
		$("#right").hide();
	});
			
	$("#right").click(function(){
		$("#left").show();
	});
	
	$("#left").click(function(){
		$("#right").show();
	});
	
	$("#left").click(function(){
	  if($("#id1").hasClass("activenum") == true) {
	    $("#left").hide();
	  }
	});
	
	$("#right").click(function(){
	  if($("#id4").hasClass("activenum") == true) {
	    $("#right").hide();
	  }
	});
	
	$("#chad-deck").hover(function(){
		//$('#rider-info').html('<div id="chad-bio"></div>');
		$('#rider-image').css("background-image","url(/css/images/tim_tim.jpg)")
	});
	
	$("#darrell-deck").hover(function(){
		//$('#rider-info').html('<div id="darrell-bio"></div>');
		$('#rider-image').css("background-image","url(/css/images/stanton.jpg)")
	});
	
	$("#levi-deck").hover(function(){
		//$('#rider-info').html('<div id="levi-bio"></div>');
		$('#rider-image').css("background-image","url(/css/images/brown.jpg)")
	});
	
	$("#mark-deck").hover(function(){
		//$('#rider-info').html('<div id="mark-bio"></div>');
		$('#rider-image').css("background-image","url(/css/images/appleyard.jpg)")
	});
	
	$("#more").click(function(){
		$('html,body').animate({
		        scrollTop: $('html,body').position().top += 245
		})
	});
	
	$("#right, #left, #id1, #id2, #id3, #id4").click(function(){
		$('html,body').animate({
		        scrollTop: $('html,body').position().top -= 245
		})
	});
		
	$(".fancyFrame").fancybox({
		'width'				: '50%',
		'height'			: '80%',
		'autoScale'			: false,
		'transitionIn'		: 'fade',
		'transitionOut'		: 'fade',
		'type'				: 'iframe'
		
	});
	
});