$(document).ready(function()
{
	// ref : http://orionseven.com/imageloader/
		$("#slides").imageLoader(
		{
			images : [
			{
				src : 'images/banner/banner-websites.jpg',
				width : '958',
				height : '254',
				alt : 'side'
			},
			{
				src : 'images/banner/banner-marketing.jpg',
				width : '958',
				height : '254',
				alt : 'side'
			},
			{
				src : 'images/banner/banner-socialmedia.jpg',
				width : '958',
				height : '254',
				alt : 'side'
			},
			{
				src : 'images/banner/banner-mobile.jpg',
				width : '958',
				height : '254',
				alt : 'side'
			} ],
			splashScreenImage : "images/splashScreenImage.gif",
			enableSplashScreenImage : 1,
			enableSplashScreenText : 1,
			endableSplashScreen : 1
		}, function()
		{
			$("#slides img").wrap('<div class="slide" />');
			$("#slides img").show();
			initBanner();
		});

		// var img = new Image();
		//
		// $(img).load(function()
		// {
		// $(this).hide();
		// $('#slides').removeClass('loading').append(this);
		// $(this).wrap('<div class="slide" />');
		// $(this).fadeIn();
		// initBanner(doc);
		// }).error(function()
		// {
		// }).attr('src', 'images/banner/banner-socialmedia.jpg').attr('width',
		// '958').attr('height', '254').attr('alt', 'side');

	});

function initBanner()
{
	/* This code is executed after the DOM has been completely loaded */

	var totWidth = 0;
	var positions = new Array();

	$('#slides .slide img').each(function(i)
	{
		/*
		 * Traverse through all the slides and store their accumulative widths
		 * in totWidth
		 */

		positions[i] = totWidth;
		totWidth += $(this).width();

		/*
		 * The positions array contains each slide's commulutative offset from
		 * the left part of the container
		 */

		if (!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}

	});

	$('#slides').width(totWidth);

	/*
	 * Change the cotnainer div's width to the exact width of all the slides
	 * combined
	 */

	$('#menu-gallery ul li a').click(function(e, keepScroll)
	{
		/* On a thumbnail click */

		$('li.menuItem').removeClass('act').addClass('inact');
		$(this).parent().addClass('act');

		var pos = $(this).parent().prevAll('.menuItem').length;

		$('#slides').stop().animate(
		{
			marginLeft : -positions[pos] + 'px'
		}, 450);
		/* Start the sliding animation */

		e.preventDefault();
		/* Prevent the default action of the link */

		// Stopping the auto-advance if an icon has been clicked:
			if (!keepScroll)
				clearInterval(itvl);
		});

	$('#menu-gallery-gallery ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */

	/***************************************************************************
	 * 
	 * Enabling auto-advance.
	 * 
	 **************************************************************************/

	var current = 1;
	function autoAdvance()
	{
		if (current == -1)
			return false;

		$('#menu-gallery ul li a').eq(current % $('#menu-gallery ul li a').length).trigger('click', [ true ]); // [true]
		// will be passed as the keepScroll parameter of the click function on
		// line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:

	var changeEvery = 10;

	var itvl = setInterval(function()
	{
		autoAdvance()
	}, changeEvery * 1000);

	/* End of customizations */

}