function populate(){
	var can = '<li><img src="../../images/can/1.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/can/2.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/can/3.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/can/4.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/can/5.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/cross-iron-mills.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/projectsbanner-for-institutional.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/Projectsbanner-for-commerical.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/historybanner.gif" width="582" height="244" /></li>';
	var us = '<li><img src="../../images/us/2.gif" width="582" height="244" /></li>'+
			'<li><img src="../../images/us/3.gif" width="582" height="244" /></li>'+
			'<li><img src="../../images/us/6.gif" width="582" height="244" /></li>'+
			'<li><img src="../../images/us/7.gif" width="582" height="244" /></li>'+
			'<li><img src="../../images/us/8.gif" width="582" height="244" /></li>'+
			'<li><img src="../../images/projectsbanner-automotive.jpg" width="582" height="244" /></li>'+
			'<li><img src="../../images/projects-banner-industrial.jpg" width="582" height="244" /></li>';
	if($(".rotator").hasClass("us")){
		$(".rotator").html("<ul>"+us+"</ul>");
	} else if ($(".rotator").hasClass("canada")){
		$(".rotator").html("<ul>"+can+"</ul>");	
	} else {
		$(".rotator").html("<ul>" + can + us + "</ul>");
	}
}
function theRotator() {
	var a = $($("div.rotator ul li").get().sort(function(){return Math.round(Math.random())-0.5})[0]);
	//console.log(a);
	a.addClass('show');
	$('div.rotator ul li').css({opacity: 0.0});
	$('div.rotator ul li.show').css({opacity: 1.0});
	if ($('div.rotator ul li').length > 1) setInterval('rotate()', 3000);
}
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
	//$('div.rotator ul li:first').css({opacity: 1.0}).show();
	populate();
	theRotator();
//	$('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});