// Lavalamp Navigation //

$(document).ready(function () {

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

	//Retrieve the selected item position and width
	var default_left = Math.round($('#navigation li.selected').offset().left - $('#navigation').offset().left);
	var default_width = $('#navigation 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
	$('#navigation li').hover(function () {
		
		//Get the position and width of the menu item
		left = Math.round($(this).offset().left - $('#navigation').offset().left);
		width = $(this).width(); 
	$('#debug').html(left);
		//Set the floating bar position, width and transition
		$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});	
		$('#box .head').stop(false, true).animate({width:width},{duration:500, easing: style});	
	
	//if user click on the menu
	}).click(function () {
		
		//reset the selected item
		$('#navigation li').removeClass('selected');	
		
		//select the current item
		$(this).addClass('selected');

	});
	
	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#navigation').mouseleave(function () {

		//Retrieve the selected item position and width
		default_left = Math.round($('#navigation li.selected').offset().left - $('#navigation').offset().left);
		default_width = $('#navigation li.selected').width();
		
		//Set the floating bar position, width and transition
		$('#box').stop(false, true).animate({left: default_left},{duration:500, easing: style});	
		$('#box .head').stop(false, true).animate({width:default_width},{duration:500, easing: style});		
		
	});
	
});


// Modal Box //

$(document).ready(function() {    
  
    //select all the a tag with name equal to modal  
    $('a[name=modal]').click(function(e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        //Get the A tag  
        var id = $(this).attr('href');  
      
        //Get the screen height and width  
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
      
        //Set height and width to mask to fill up the whole screen  
        $('#mask').css({'width':maskWidth,'height':maskHeight});  
          
        //transition effect       
        $('#mask').fadeIn(500); 
      
        //transition effect  
        $(id).fadeIn(1000);   
      
    });  
      
    //if close button is clicked  
    $('.window .close').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        $('#mask, .window').hide();  
    });       
      
    //if mask is clicked  
    $('#mask').click(function () {  
        $(this).hide();  
        $('.window').hide();  
    });           
      
});