// JavaScript Document

//MENU jQuery
$(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'157px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('img#logo')
						 .stop(true)
						 .animate({
							'width':'200px',
							'height':'250px',//273
							'left':'0px'
						 },400,'easeInOutElastic')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'100px'},500,'easeOutBack')//was 140
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'115px'},300,function(){//height was 170
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}
						var $sub_image = $elem.find('.sdt_logo');
						if($sub_image.length){
							var left = '-200px';
							var top = '-19px';//73
						$sub_image.show().animate({'left':left,'top':top},200);
						}
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
						
					var $sub_image = $elem.find('.sdt_logo');
					if($sub_image.length)
						$sub_image.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
			function theRotator() {
	//Set the opacity of all images to 0
	$('div.rotator ul li').css({opacity: 0.0});
	//Get the first image and display it (gets set to full opacity)
	$('div.rotator ul li:first').css({opacity: 1.0});		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
}

//The Image Rotator Javascript
function rotate() {	
	//Get the first image
	var current = ($('div.rotator ul li.show') ? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
    if (current.length == 0) current = $('div.rotator ul li:first');
	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
	//Un-comment the 3 lines below to get the images in random order	
	var sibs = current.siblings();
		var rndNum = Math.floor(Math.random() * sibs.length );
		var next = $( sibs[rndNum] );
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
};
$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	$('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweak for IE
});
$("#map_canvas").gMap({ markers: [{ latitude:51.531489, longitude:-0.056969, html: "The Arch Gallery, London", popup:true }], html_prepend: '<div class="gmap_marker">', html_append: '</div>', zoom:15});