var flag = 0;
var timer = 1000;
var timerOut = 1000;
var slides = new Array();
var currentSlide = 0;
var prevId = null;

$(document).ready(function(){
	$("#interestedIn").hover(function(){
	  flag = 1;
	  $(this).removeClass('droptabhover').addClass('droptabhout');
	  $("#Layer1").fadeIn(timer);
	},function(){
		 flag = 0;
		 window.setTimeout('hideMe()', timerOut);
	});

	$("#Layer1").hover(function(){
		flag = 1;
		$("#interestedIn").removeClass('droptabhover').addClass('droptabhout');
	},function(){
	    flag = 0;
		window.setTimeout('hideMe()', timerOut);
	});

	//set auto show panel after 5 sec
	panelId = window.setInterval('callPanel()', 10000);

	$('#slide2,#slide3,#slide4').css('display', 'none');

	var i=0;
	$('.tabs .button').each(function(){
		slides[i++] = $(this).attr('id');
		$(this).click(function(){
			var id = $(this).attr('id');
			showPanel(id);
			window.clearInterval(panelId);
		});
	});
	// store previous id
	prevId = slides[0];

});

//declare function to call after a time
function hideMe()
{
	if(flag == 0)
	{
		$("#interestedIn").removeClass('droptabhout').addClass('droptabhover');
		$("#Layer1").fadeOut(timer-400);

	}
}

//declare function to auto call panel
function callPanel()
{
	var goToSlide = currentSlide + 1;
	if(goToSlide >= slides.length){
		goToSlide = 0;
	}
	var newId = slides[goToSlide];
	showPanel(newId);
	currentSlide = goToSlide;
}

//declare function to show panel
function showPanel(id)
{
	//change class
	$('#'+prevId).removeClass('selected').addClass('off');
	$('#'+id).removeClass('off').addClass('selected');
	
	//show/hide div
	$('#slide-'+prevId).hide();
	$('#slide-'+id).fadeIn("slow");
	//store default id
	prevId = id;
}

//top menus
$(document).ready(function(){
    $('#menu ul.submenu').hide();
    if($.browser.msie && parseInt(jQuery.browser.version) >= 8){ 
    	$('#menu ul.submenu li a').hover(function(){ $('body').append(" "); }); 		// Kevin : Fix a IE8 bug. Need to write something in the page to make him detect a hover event.. weird. found the solution by chance
    }
    $('#menu ul  li').each(function(){
    	$(this).bind('mouseenter', function(){
    	     $("ul.submenu", $(this)).show()  ;
        });
    	$(this).bind('mouseleave', function(){
   	     $("ul.submenu", $(this)).hide()  ;
       });
    });
  });