var hideImageId;
var showImageId;
var myInterval;
var currentImage;
var split_id;
var toBeShown;

var showcase = $('#showcase');
var showcase_loading = $('#showcase_loading');
//showcase.cleanWhitespace();// clear white spaces between the <li>'s
var totalImages = showcase.children().length;

function swapImagesOnLoad()
{
    //replacelinks();

    var imageCount = totalImages + 1;
    var buttonList  =   $('#mm_footer');
    var ulObj       =   $('<ul id="showcase_buttons" />');

	/* Count total banners and create a button for each banner */
	for(var i=1;i<imageCount;i++)
	{
		liObj = $('<li id="li_id_' + i + '"><a href="#" id="a_id_' + i + '" class="showcase_button_inactive">' + i + '</a></li>');
		ulObj.append(liObj);
	}
	buttonList.append(ulObj);
	buttonList.find('a').click(clickSwap);

	/* Hide all banners despite the first one */
	$('#showcase li').each
	(
		function()
		{
		    $(this).attr('id', $(this).attr('id').substr(7,8)).hide(); // strip "banner_" part from the li id's

			currentImage = showcase.children(':first');
			currentImage.show();
			var currentImageId = currentImage.attr('id');

			$('#a_id_' + (currentImageId)).removeClass('showcase_button_inactive');
			$('#a_id_' + (currentImageId)).addClass('showcase_button_active');

		}
	);

	/* Hide the loading div and show the showcase */
	showcase_loading.hide();
	showcase.toggle();

	startSwap();
}

/* Swap banner */
function swapImage(showImage, hideImage)
{
	hideImage.fadeOut(1700); // fade out
	currentImage = $('#showcase').children(':nth-child(' + showImage+ ')');

	hideImageId = hideImage.attr('id');
	showImageId = currentImage.attr('id');

	/* Make all buttons inactive */
	if ($('#a_id_' + (hideImageId)).hasClass('showcase_button_active'))
	{
        /* add timer */
	    $('#a_id_' + (hideImageId)).removeClass('showcase_button_active').addClass('showcase_button_inactive');
	}

	/* add timer */
	$('#a_id_' + (showImageId)).removeClass('showcase_button_inactive').addClass('showcase_button_active');

	currentImage.fadeIn (1700); // fade in
}

/* Automatically swap banners */
function timedSwap()
{
    toBeShown = parseInt (currentImage.attr('id')) + 1;
	if(currentImage.attr('id') == totalImages)
	{
		currentImage.attr('id', totalImages);
		toBeShown = 1;
	}

	swapImage(toBeShown, currentImage);
}

/* Manually swap banners */
function clickSwap(e)
{
    var elm = $(this);
	stopSwap();

	split_id = elm.attr('id').split('_');
	toBeShown = split_id[2];
	
	swapImage(toBeShown, currentImage);
	
	$(this).blur();
	return false;
}

/* Swap banner every 5 seconds */
function startSwap()
{
    stopSwap();
	myInterval = setInterval('timedSwap()',4000);
}

/* Stop swapping banners */
function stopSwap()
{
	clearInterval(myInterval);
}

/* Switch the control button between Pause and Start */
function switchControl()
{
    if($('#showcase_control').hasClass('showcase_control_pause'))
    {
        $('#showcase_control').removeClass('showcase_control_pause').addClass('showcase_control_play');
        stopSwap();
    }
    else
    {
        $('#showcase_control').removeClass('showcase_control_play').addClass('showcase_control_pause');
        startSwap();
    }
}

$(document).ready(swapImagesOnLoad);