var items = 5;
var counter = 1;
var myInterval;
var cnt = new Array();
var currentId = 0;

function shiftImage(currentId)
{
	// we only need to run when there are enough images available
	if(images < items )
	{
		return false;
	}
	
    //currentId will be set when a thumbnail has been clicked
    if (currentId > 0)
    {
        counter = parseInt(currentId);
    }

    //reset counter when we reach the end
	if (counter > items)
	{
		counter = 1;
	}

	//cnt[1] stands for the large image.
	cnt[1] = counter;

	for (i = 2; i <= items; i++)
	{
		cnt[i] = parseInt(cnt[i-1])+1;
		if (cnt[i] > items)
		{
			cnt[i] = 1;
		}
	}

	//large image
	document.getElementById('currentImage').style.backgroundImage = "url(" + images[cnt[1]]['large'] + ")";
	document.getElementById('carUrl').href = images[cnt[1]]['url'];
	document.getElementById('carUrl').title = images[cnt[1]]['title'];
	document.getElementById('carrousel_title').innerHTML = images[cnt[1]]['title'];
	document.getElementById('carrousel_intro').innerHTML = images[cnt[1]]['intro'];
	
	//hidden image
	/*document.getElementById('hiddenImage').style.backgroundImage = "url(" + images[cnt[2]]['large'] + ")";
	document.getElementById('hiddenUrl').href = images[cnt[2]]['url'];
	document.getElementById('hiddenUrl').title = images[cnt[2]]['title'];
	document.getElementById('carrousel_title').innerHTML = images[cnt[2]]['title'];
	document.getElementById('carrousel_intro').innerHTML = images[cnt[2]]['intro'];*/
	
	//thumbnails
	for (i = 2; i <= items; i++)
	{
		document.getElementById('carUrl_' + i).style.backgroundImage = "url(" + images[cnt[i]]['small'] + ")";
		document.getElementById('carUrl_' + i).onclick = clickSwap;
		document.getElementById('carUrl_' + i).className = 'carUrl_' + cnt[i];
    	document.getElementById('carUrl_' + i).title = images[cnt[i]]['title'];
    	document.getElementById('carTypeName_' + i).innerHTML = images[cnt[i]]['type'];
    	document.getElementById('carType_' + i).className = 'carTypeBg_' + images[cnt[i]]['platform'];
    	document.getElementById('carTitle_' + i).innerHTML = '<span class="raquo '+images[cnt[i]]['platform']+'">&raquo;</span>&nbsp;' + images[cnt[i]]['title'];
	}
	
	counter++;
	//myInterval = setInterval(shiftImage, 5000);
	//startSwap();	
}

function startSwap()
{
    stopSwap();
    swapImage();
    myInterval = setInterval(shiftImage, 5000);
}

function swapImage()
{
    ShowEffect('currentImage');
	HideEffect('hiddenImage');
}

function ShowEffect(element)
{
   new Effect.Appear(element, 
   {duration:1.7, from:0, to:1.0});
}
   
function HideEffect(element)
{
   new Effect.Appear(element, 
   {duration:1.7, from:1.0, to:0});
}

/* Manually swap banners */
function clickSwap(e)
{
	stopSwap();

	var dinges;
	if (!e)
	{
	    var e = window.event;
	}

	if (e.target)
	{
	    dinges = e.target;
	}
	else if(e.srcElement)
	{
	   dinges = e.srcElement;
	}

	if (dinges.nodeType == 3) // defeat Safari bug
	{
	    dinges = dinges.parentNode;
	}

	toBeShown = dinges.className.substr(7,1);

	//alert(toBeShown);

	shiftImage(toBeShown);
	return false;
}

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

window.onload = shiftImage;
setInterval("shiftImage()", 5000);