$(document).ready(function(){

  var uagent = navigator.userAgent.toLowerCase();
  if (uagent.indexOf("firefox") != -1){
    document.getElementById('head_content').style.padding = '50px 0 0 0';
  }

  // Galary photo zoom
  $('a.customGal').zoomimage({
  	controlsTrigger: 'mouseover',
  	className: 'custom',
  	shadow: 40,
  	controls: false,
  	opacity: 1,
  	beforeZoomIn: function(boxID) {
  		$('#' + boxID)
  			.find('img')
  			.css('opacity', 0)
  			.animate(
  				{'opacity':1},
  				{ duration: 500, queue: false }
  			);
  	},
  	beforeZoomOut: function(boxID) {
  		$('#' + boxID)
  			.find('img')
  			.css('opacity', 1)
  			.animate(
  				{'opacity':0},
  				{ duration: 500, queue: false }
  			);
  	}
  });

  // Menu
  
		//transitions
		//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
		var style = 'easeOutElastic';

		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		var default_width = $('#lava li.selected').width();

		//Set the floating bar position and width
		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});

		//if mouseover the menu item
		$('#lava li').hover(function () {
			
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 
		$('#debug').html(left);
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
		
		//if user click on the menu
		}).click(function () {
			
			//reset the selected item
			$('#lava li').removeClass('selected');	
			
			//select the current item
			$(this).addClass('selected');
	
		});
		
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava').mouseleave(function () {

			//Retrieve the selected item position and width
			default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
			default_width = $('#lava li.selected').width();
			
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
			
		});
		
  // Images gallery
		$.easing.backout = function(x, t, b, c, d){
			var s=1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		};
		
		$('#screen').scrollShow({
			view:'#view',
			content:'#images',
			easing:'backout',
			wrappers:'link,crop',
			navigators:'a[id]',
			navigationMode:'sr',
			circular:true,
			start:0
		});
});