theElement = 0;
titles = 'test';

var doBanner = function() {
	counter = 0;
	
	$('index_categories').getChildren('li').each(function(el){
		el.addEvent('mouseover', doFocus);
	});

	
	$('catcontainer').setStyle('opacity', 0);
	
	
	var containerh2 = new Element('h2', {});
	var containerp = new Element('p', {});
	var containerspan = new Element('span', {
		'id' : 'containerspan'								
	});
	var containera = new Element('a', {
		'text' : 'More',
		'class' : 'more'
	});
	
	var image1 = new Element('img', {
    	'src': '/images/thumbnail.jpg?w=400&h=270&file='+bigimage[0],
		'alt': 'Image 1',
		'styles': {
        	'opacity': 0
    	}
	});
	
	var image2 = new Element('img', {
    	'src': '/images/thumbnail.jpg?w=400&h=270&file='+bigimage[1],
		'alt': 'Image 2',
		'styles': {
        	'opacity': 0
    	}
	});
		
	var image3 = new Element('img', {
    	'src': '/images/thumbnail.jpg?w=400&h=270&file='+bigimage[2],
		'alt': 'Image 3',
		'styles': {
        	'opacity': 0
    	}
	});
			
	var image4 = new Element('img', {
    	'src': '/images/thumbnail.jpg?w=400&h=270&file='+bigimage[3],
		'alt': 'Image 4',
		'styles': {
        	'opacity': 0
    	}
	});
	
	
	
	image1.inject($('catcontainer'));
	image2.inject($('catcontainer'));
	image3.inject($('catcontainer'));
	image4.inject($('catcontainer'));
	containerh2.inject($('catcontainer'));
	containerp.inject($('catcontainer'));
	containerspan.inject($('catcontainer'));
	containera.inject($('catcontainer'));

	$('catcontainer').setStyle('opacity', 1);
	
	if (typeof(DD_belatedPNG) != "undefined") {
		DD_belatedPNG.fix('#containerspan');
	}


	$('index_categories').addEvent('mouseleave', reinstateFocus);
	$('catcontainer').addEvent('mouseleave', reinstateFocus);
	$('index_categories').addEvent('mouseover', clearFocus);
	$('catcontainer').addEvent('mouseover', clearFocus);
	
	doFocus();
	slideInterval = doFocus.periodical(5000, titles);
	
}


var doFocus = function() {

	if (theElement != this) {
		if (theElement != 0) {
			theElement.get('morph',{duration: 300,onComplete:function(e){}}).start({'width':115, 'borderLeftColor':['#b58ac2','#e0e0e0'], 'borderTopColor':['#b58ac2','#e0e0e0'], 'borderBottomColor':['#b58ac2','#e0e0e0'], 'borderRightColor':['#FFFFF','#e0e0e0']});
		}
		
		
		
		if (theElement == 0) {
			theElement = $('index_categories').getFirst('li');
			theOldOption = 0;
			theOption = 0;
		} else if (this == 'test') {
			
			theOldOption = theOption;
			
			if (theOption >= 3) {
				theOption = 0;
			} else {
				theOption = theOption+1;	
			}
			
			theElement = $('index_categories').getChildren('li')[theOption];
			
		} else {
			
			theElement = this;
			theOldOption = theOption;
			
			counter = 0;
			$('index_categories').getChildren('li').each(function(el){
				if (el == theElement) {
					theOption = counter;	
				}
				counter += 1;
			});
			
			//$clear(slideInterval);
		}
		
		theTitle = theElement.getFirst('h2').get('text');
		theText = theElement.getFirst('p').get('text');
		
		$('catcontainer').getFirst('p').get('morph',{duration: 200}).start({'opacity':0});
		$('catcontainer').getFirst('h2').get('morph',{duration: 200}).start({'opacity':0});

		
		
		
		$('catcontainer').getChildren('img')[theOldOption].get('morph',{duration: 200, onComplete:function(e){
			$('catcontainer').getFirst('a').set('href', theElement.getFirst('a').get('href'));
			$('catcontainer').getFirst('h2').set('text', theTitle);
			$('catcontainer').getFirst('p').set('text', theText);
			$('catcontainer').getChildren('img')[theOption].get('morph',{duration: 400, onComplete:function(e){
				$('catcontainer').getFirst('h2').get('morph',{duration: 400, onComplete:function(e){
					$('catcontainer').getFirst('p').get('morph',{duration: 400}).start({'opacity':1});
				}}).start({'opacity':1});
			}}).start({'opacity':1});	
		}}).start({'opacity':0});	

		theElement.get('morph',{duration: 300,onComplete:function(e){}}).start({'width':124, 'borderLeftColor':['#e0e0e0','#b58ac2'], 'borderTopColor':['#e0e0e0','#b58ac2'], 'borderBottomColor':['#e0e0e0','#b58ac2'], 'borderRightColor':['#e0e0e0','#FFFFF']});

	}
}

var reinstateFocus = function() {
	slideInterval = doFocus.periodical(5000, titles);	
}

var clearFocus = function() {
	$clear(slideInterval);	
}

window.addEvent('domready', doBanner);