var ongoing = false;
var autorun = true;

window.addEvent('domready', function(){
	
	//introStep1();
	
	/*
	var Tips2 = new Tips($$('.tipz'), {
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});
	
	
	//store titles and text
	$$('.tipz').each(function(element,index) {
		var content = element.get('title').split('::');
		element.store('tip:title', content[0]);
		element.store('tip:text', content[1]);
	});
		
	//create the tooltips
	var tipz = new Tips('.tipz',{
		className: 'tipz',
		fixed: true
	});

	
	tipz.addEvents({
		'show': function(tip) {
		tip.fade('in');
		},
		'hide': function(tip) {
		tip.fade('out');
		}
	});
	*/


	var autoFunction = function(){
		var time = $time();
		if (autorun)
		{
			doRight(true);
			//doLeft(true);
		}
	};
	autoFunction.periodical(10000);

	
});

function getNextId(id)
{
	var next = id + 1;
	if (next > maxVal)
	{
		return 1;
	}
	return next;
}

function getPreviousId(id)
{
	var next = id - 1;
	if (next < 1)
	{
		return maxVal;
	}
	return next;
}

function doLeft(auto)
{
	if (!auto)
	{
		//alert('stop autorun');
		autorun = false;
	}
	
	if (!ongoing)
	{
		ongoing = true;
		hideTitle(currentId);
		currentId = getPreviousId(currentId);
	}
}

function doRight(auto)
{
	doCycleHide(auto);
	/*
	if (!auto)
	{
		//alert('stop autorun');
		autorun = false;
	}

	if (!ongoing)
	{
		var id = parseFloat($('currentid').value);
		ongoing = true;
		hideTitle(id);
		$('currentid').value = getNextId(id);
	}
	*/
}

function doCycleHide(auto)
{
	if (!auto)
	{
		//alert('stop autorun');
		autorun = false;
	}

	if (!ongoing)
	{
		ongoing = true;
		hideTitle(currentId);
		(function () {hideText(this); }).delay(100, currentId);
		(function () {hideButtons(this); }).delay(200, currentId);
		(function () {hideImage(this); }).delay(150, currentId);
		(function () {showTitle(this); }).delay(550, getNextId(currentId));
		(function () {showText(this); }).delay(650, getNextId(currentId));
		(function () {showButtons(this); }).delay(750, getNextId(currentId));
		(function () {showImage(this); }).delay(700, getNextId(currentId));

		
	}
}

function hideTitle(id)
{
	var el = $('title'+id);
	var myEffects = new Fx.Morph(el, {duration: 300, transition: Fx.Transitions.Sine.easeOut}); 

	myEffects.start(
		{'opacity':[1,0],
		'padding-left':[0,0]
		}
	);
}

function showTitle(id)
{
	for (var i = 0; i < maxVal; i++)
	{
    var old = $('title'+ (i+1));
	  old.style.display = "none";
	}

	var el = $('title'+id);
	el.style.display = "";
	el.setStyle('opacity','0');

	var myEffects = new Fx.Morph(el, {duration: 300, transition: Fx.Transitions.Sine.easeOut}); 
	
	myEffects.start({'opacity':[0,1]});
}

function hideText(id)
{
	var el = $('text'+id);
	el.setStyle('width','500px');
	var myEffects = new Fx.Morph(el, {duration: 200, transition: Fx.Transitions.Sine.easeOut}); 

	myEffects.start({
		'opacity':[1,0],
		'width':[500,500]
	});
}

function showText(id)
{
	for (var i = 0; i < maxVal; i++)
	{
    var old = $('text'+ (i+1));
	  old.style.display = "none";
	}
  
	var el = $('text'+id);
	el.style.display = "";
	el.setStyle('opacity','0');
	el.setStyle('width','500px');
	var myEffects = new Fx.Morph(el, {duration: 200, transition: Fx.Transitions.Sine.easeOut}); 
	
	myEffects.start({
		'opacity':[0,1],
		'padding-right':[15,15],
		'width':[500,500]
	});
}

function hideButtons(id)
{
	var imgs = $$('#buttons' + id + ' li a img');
	
	imgs.each(function(element) {
		var w = element.getStyle('width');
		var h = "40px";
		element.morph({
			'width':[w,0],
		  'height':[h,h],
			'padding-right':[0,w]
		});
		element.setProperty('old_width',w);
	});

	var div = $('buttons' + id);
	var width = div.getStyle('width');
	var height = "52px";
	var myEffects = new Fx.Morph(div, {duration: 100, transition: Fx.Transitions.Sine.easeOut}); 

	myEffects.start({
		'width':[width,width],
	  'height':[height,height],
		'padding-left':[0,0]
	});

}

function showButtons(id)
{
	for (var i = 0; i < maxVal; i++)
	{
    var old = $('buttons'+ (i+1));
	  old.style.display = "none";
	}
	
	var div = $('buttons' + id);
	div.style.display = ""; 

	var imgs = $$('#buttons' + id + ' li a img');
	imgs.each(function(element) {
		var w = $pick(element.getProperty('old_width'), element.getStyle('width'));
		var h = "40px";
		element.setStyle('width','0');
		element.morph({
			'width':[0,w],
			'height':[h,h],
			'padding-left':[0,0],
			'padding-right':[w,0]
		});
	});
	var width = div.getStyle('width');
	var height = "52px";
	var myEffects = new Fx.Morph(div, {duration: 100, transition: Fx.Transitions.Sine.easeOut}); 

	myEffects.start({
		//'opacity':[0.5,1],
		'width':[width,width],
		'height':[height,height],
		'padding-left':[0,0]
	});

}

function hideImage(id)
{
	var img = $('image'+id);
	var width = img.getStyle('width');
	var height = img.getStyle('height');
	var myEffects = new Fx.Morph(img, {duration: 400, transition: Fx.Transitions.Sine.easeOut}); 
/*	myEffects.addEvents({
		'complete': function() {
			showTitle(getNextId(id));
		}
	});
*/
	myEffects.start({
		'opacity':[1,0.2],
		'width':[width,0],
		'padding-right':[0,0],
		'padding-left':[0,width],
		'height':[height,height]
	});

	img.setProperty('old_width',width);
}

function showImage(id)
{
	//alert('enter showImage id ' + id);
	for (var i = 0; i < maxVal; i++)
	{
    var old = $('image'+ (i+1));
	  old.style.display = "none";
	}

	var img = $('image'+id);
	img.style.display = "";

    var width = $pick(img.getProperty('old_width'), img.getStyle('width'));

	var height = img.getStyle('height');
	img.setStyle('width','0px');
	img.setStyle('opacity','0');
	var myEffects = new Fx.Morph(img, {duration: 400, transition: Fx.Transitions.Sine.easeOut}); 
	myEffects.addEvents({
		'complete': function() {
			ongoing = false;
      currentId = id;
		}
	});

	myEffects.start({
		'opacity':[0,1],
		'width':[0,width],
		'padding-right':[0,0],
		'padding-left':[width, 0],
		'height':[height,height]
	});
}