// JavaScript Document
function MM_InitImage() {
	var elements = $('.SliderDiv');
	var i = 0;
	elements.each(function() { 
						   $(this).attr('id', 'SliderDiv' + i);
						   $(this).children("img").css({ opacity: 0.0 });
						   //$(this).children("img").css({ 'float': 'left' });
						   //$(this).children("img").css({ position: 'absolute' });
						  // $(this).children("img").css({ 'border': 'solid 3px #ffffff' });
						   //$(this).children("img:first-child").addClass('show');
						   //$(this).children("img:first-child").css({ opacity: 1.0 });
    $('div#SliderDiv' + i + ' img').css({ opacity: 0.0 });
    $('div#SliderDiv' + i + ' img:first').addClass('show');
    $('div#SliderDiv' + i + ' img:first').css({ opacity: 1.0 });
    setInterval('rotate(' + i + ')', 3000);
	i++;
						   });
}

function rotate() {
	var elem =rotate.arguments;
    //Get the first image
    var current = ($('div#SliderDiv' + elem[0] + ' img.show') ? $('div#SliderDiv' + elem[0] + ' img.show') : $('div#SliderDiv' + elem[0] + ' img: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#SliderDiv' + elem[0] + ' img:first') : current.next()) : $('div#SliderDiv' + elem[0] + ' img:first'));

    //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 }, 500);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 500)
	.removeClass('show');

};