window.addEvent('domready', function()
{	
	var slidetime = 3000; //3 seconds between changes
	var periodical;
	var activeItem;
	var started = 0;
	
	$('container').removeClass('noscript'); //remove noscript class, for obvious reasons
	
	//get all the slideshow items
	var items = $('container').getElements('.slideshow-item');
	var itemsLength = items.length;
	
	for(var i=0; i<itemsLength; i++)
	{
		//if we're not on the first one, hide it
		if(i != itemsLength-1)
		{
			items[i].fade('hide');
		}
		else
		{
			activeItem = items[i].id;
		}
	}

	function rotate()
	{
		if(started == 1)
		{
			//get the number we're dealing with (item-#) so that we can work out whether the # is the last item or not
			var activeNumber = activeItem.split('-');
			activeNumber = activeNumber[1];
			
			if(activeNumber == itemsLength) //are we on the last item? if so start back at the beginning.
			{
				newItemNumber = 1;
			}
			else //otherwise just add 1 to the last active id
			{
				newItemNumber = (parseInt(activeNumber)+1);
			}
			
			$('item-'+newItemNumber).fade('in');
			$(activeItem).fade('out');
			activeItem = 'item-'+newItemNumber;
		}
		else
		{
			started = 1;
		}
		
		$clear(periodical); //clear the timer
		periodical = rotate.periodical(slidetime); //repeat!
	}

	rotate();
	
});


var cText = ''
cText += ' <div id="container" class="noscript" align="centers">'
        
cText += '<div id="slideshow-container" align="left">'
        	
cText += '<div class="slideshow-item" id="item-1" align="left">'
cText += '<img src="images/banner2.jpg" alt="image 1" width="970" height="215" align="middle" title="image one"/>'
              
cText += '</div>'
            
cText += '<div class="slideshow-item" id="item-2" align="left">'
cText += '<img src="images/banner3.jpg" alt="image 2" width="970" height="215" align="center" title="image two"/>'
cText += '</div>'
cText += '<div class="slideshow-item" id="item-3" align="left">'
cText += '<img src="images/banner4.jpg" alt="image 3" width="970" height="215" align="center" title="image three"/>'
cText += '</div>'
cText += '<div class="slideshow-item" id="item-4" align="left">'
cText += '<img src="images/banner1.jpg" alt="image 4" width="970" height="215" align="center" title="image four"/>'
cText += '</div>'
cText += '</div>'
cText += '</div>'

document.write(cText)