// JavaScript Document
$(document).ready(function(){
    var $links = $('.navi a').not('.tncs'),
      panelIds = $links.map(function() { return this.hash; }).get().join(",") + ",#home",
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
   	//console.log($links);
    $panels.hide().filter(':first').show();
	
	$('.navi_pointer').hide();
	$('.navi_pointer_bottom').hide();
	
    $links.click(function () {
      var link = this, 
        $link = $(this);
      // ignore if already visible
      if ($link.is('.selected')) {
        return false;
      }
      
      $links.removeClass('selected');
      $link.addClass('selected');
              
      	if ($.support.opacity) {
        	$panels.stop().animate({opacity: 0 }, delay);
      	}
      
		$panelwrapper.stop().animate({
			height: 0
		}, delay, function () {
			var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
			
			$panelwrapper.animate({
				height: height
			}, delay);
      	});
		
		$('.navi_pointer').show();
		$('.navi_pointer_bottom').hide();
		
		if ($link.is('.play')) {
        	$('.navi_pointer').stop().animate({ 'left':110 }, 350);
      	} else if ($link.is('.how')) {
			$('.navi_pointer').stop().animate({ 'left':330 }, 350);
		} else if ($link.is('.prize')) {
			$('.navi_pointer').stop().animate({ 'left':560 }, 350);
		} else if ($link.is('.connect')) {
			$('.navi_pointer').stop().animate({ 'left':790 }, 350);
		} else {
			$('.navi_pointer').hide();
			$('.navi_pointer_bottom').show();
		}
   	});
	$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : '#home').click();
	
	$('map#link').click(function () {
		$links.filter('a.prize').click();
	});
	
	// get img width 
	var oWidth = 138;

	// get img height 
	var oHeight = 131;
	
	//You could always multiply the multiplier if you want to make the image adjust to a larger size.  Keep in mind though it will get more blurry
	var mpx = 1.1;
	$('.coin_con .coin').hover(function(){
          $(this)
            //stops the event from happening in case of an abrupt mouseOut
            .stop()
            //custom animation effect to change the width and height of the img
            .animate({
                //take the original width/height X multipler and tag on the 'px'
                width: (oWidth * mpx) +'px',
                height: (oHeight * mpx) +'px',
                //space the animation out over 1 sec (deals in milliseconds)
				'filter': ''
            }, 300);
	  },
	  //this is just like a mouseOut effect to take the img back to the original size
	  function(){
			$(this)
			 //stops the event from happening in case of an abrupt mouseOut
			.stop()
			//this animation shrinks the image back to original size
			.animate({
				 width: oWidth +'px',
				 height: oHeight +'px',
				 'filter': ''
			}, 300);

  		});
	
	/*$('.coin_con a').click(function(){
		$('.win_con').stop().fadeTo('slow', 1);
		$(this).parent().hide();
		$('.error_con').hide();
		return false;
	});
	$('a.continue, a.play_back').click(function(){
		$('.win_con').hide();
		$('.coin_con').stop().fadeTo('slow', 1);
		$('.error_con').hide();
		return false;
	});
	$('.coin_con a:last').click(function(){
		$('.error_con').stop().fadeTo('slow', 1);
		$(this).parent().hide();
		$('.win_con').hide();
		return false;
	});*/
});