// Navigation Script
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

// sIFR Script
var opine = {
    src: '/sifr/opine.swf'
    ,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16]
};   

// sIFR.useStyleCheck = true;
sIFR.activate(opine);

sIFR.replace(opine, {
  	 selector: 'h3',
	  css: '.sIFR-root { color: #888888; text-transform:uppercase; }'
	  ,filters: {
	        DropShadow: {
	           distance: 1
	          ,color: '#000000'
	          ,strength: 2
	          ,alpha: .5
			 ,blurX: 0
			 ,blurY: 0

	        }
	      }
	   ,wmode: 'transparent'
});

// Scroller Script LEFT
$(document).ready(function() { 
	$('#image_rotate').innerfade({ 
		speed: 'slow', 
		timeout: 4000, 
		type: 'random', 
		containerheight: '200px'
	});
});

// ColourBox Script 
$(document).ready(function(){
	//Examples of how to assign the ColorBox event to elements

	$(".detail").colorbox({iframe:true, innerWidth:820, innerHeight:565});
	


});

function theRotator() {
	//Set the opacity of all images to 0
	$('div.rotator ul li, div.rotator-left ul li, div.rotator-right ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div.rotator ul li:first, div.rotator-left ul li:first, div.rotator-right 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()',5000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div.rotator ul li.show, div.rotator-left ul li.show, div.rotator-right ul li.show')?  $('div.rotator ul li.show, div.rotator-left ul li.show, div.rotator-right ul li.show') : $('div.rotator ul li:first, div.rotator-left ul li:first, div.rotator-right ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first, div.rotator-left ul li:first, div.rotator-right 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, div.rotator-left ul li:first, div.rotator-right ul li:first') :current.next()) : $('div.rotator ul li:first, div.rotator-left ul li:first, div.rotator-right 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, div.rotator-left, div.rotator-right').fadeIn(1000);
    $('div.rotator ul li, div.rotator-left ul li, div.rotator-right ul li').fadeIn(1000); // tweek for IE
});