// set GLOBALS - do not change
var elLive = 0;
var elNext = 1;
var elLast;
var elFirst;
var stop = false;

Ext.onReady(function() {

	elFirst = Ext.get(elParentId).child('div:first').getAttribute('sid');
	elLast = Ext.get(elParentId).child('div:last').getAttribute('sid');
	
	Ext.get(elControllerId).select('a', true).on('click', clickButton );
	Ext.get(elControllerId).child('.next').on('click', function() {
		changeContent(elNext); stop = true;
	});
	
	var task = {
    	run: function(){
        	if(!stop){
        	    changeContent(elNext);
        	}else{
        	    runner.stop(task); // we can stop the task here if we need to.
        	}
    	},
    	interval: 8000 // every 8 seconds auto change image.
	};
	var runner = new Ext.util.TaskRunner();
	runner.start(task);
});

function changeContent(elNext) {
	changeTop(elNext);
	changeButton(elNext);
}

function changeTop(iId) {

	var live = Ext.get(elParentId).select('div[sid='+elLive+']');
	live.addClass('hidden');
//	live.setStyle('visibility', 'hidden');
	live.clearOpacity();

	var el = Ext.get(elParentId).select('div[sid='+iId+']');
	el.setVisibilityMode(Ext.Element.DISPLAY);
	el.setOpacity(0);
	el.removeClass('hidden');

/*	el.animate(
	{
		opacity: {to: 1, from: 0},
		zindex: {to: 1000, from: 1001},
	},
	3,
	null
	);
*/

	el.fadeIn({
    	endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
    	easing: 'easeOut',
    	duration: 3,
    	concurrent: true,
    	useDisplay: true
	});


	elLive = iId;
	setNext(elLive);
}

function setNext(iLive) {

	if (iLive == elLast)
		elNext = elFirst;
	else
		elNext = parseInt(iLive)+1;
}

function changeButton(iId) {
	Ext.get(elControllerId).child('#'+iId).radioClass('selected');
	return false;
}

function clickButton() {
	changeContent(Ext.get(this).id);
	stop = true;
}