var active = 'main-content-home-head-01';
var int_tabs = -1;
var sliding = false;
var path = '';
var slogans = [];
slogans[0] = '<a href="">EasyShop</a> makes ordering 10 times faster than phoning, faxing in orders, or ordering from other suppliers!';

function getSloganCount(slogan)
{
	slogan = new String(slogan);
	
	if (slogan.length == 1)
	{
		return '10'+slogan;
	}
	else if (slogan.length == 2)
	{
		return '1'+slogan;
	}
	return slogan;
}
function slide_tabs() {
	
		slide_timer = (function ()
		{
			
			int_tabs++;
			if (int_tabs < 3)
			{
				var el = $$('.tab div');
			
				var effect = new Fx.Style(el[int_tabs], 'margin-top', {duration: 1500, transition: Fx.Transitions.Elastic.easeOut});
				effect.start(180, 110);

			} 
			else 
			{ 
				sliding = false;
				$clear(slide_timer);
				int_tabs = -1;
			}

		}).periodical(2500);
}

function load_images()
{
	var img = new Image();
	img.src = path+'images/home-flashcart1-bgr.jpg';
	var img = new Image();
	img.src = path+'images/home-flashcart2-bgr.jpg';
	var img = new Image();
	img.src = path+'images/home-flashcart3-bgr.jpg';
	var img = new Image();
	img.src = path+'images/layout-search-hover.png';
}

function clear_timer() {  $clear(slide_timer); }

 window.addEvent("load", function () {
	
	
	//load_images();
	$$('.tab div').setStyle('margin-top', 180);

	$('flash-wrapper').setStyle('visibility', 'visible');
	//slide_tabs();
	$$('#main-content-home-head-01 img').setStyle('display', 'none');
	(function()
			{
		
			
			
				$$('#main-content-home-head-01 img').setStyle('display', 'block');
				$$('#main-content-home-head-01 img').setStyle('height', 5);
				$$('#main-content-home-head-01 img').setStyle('width', 5);
				var img1 = $$('#main-content-home-head-01 img')[0];
				var img2 = $$('#main-content-home-head-01 img')[1];
				img2.setStyle('margin-top', 40);
				img1.setStyle('margin-top', 40);
				var left = 285;
				if (window.ie6)
				{
					var left = 145;
				}
				img1.setStyle('margin-left', left);
				var effect = new Fx.Styles(img1, {duration: 2000});
				effect.start({
					"height" : ["159px"],
					"width" : ["274px"],
					"margin-left" : [0],
					"margin-top": [0]
					});
				var effect = new Fx.Styles(img2, {duration: 1000});
				effect.start({
					"height" : ["35px"],
					"width" : ["35px"],
					"margin-left" : [0],
					"margin-top": [40]
					});
			}).delay(3000);
	$$('.tab div').each(function(element)
	{
		var effect1 = new Fx.Style(element, 'margin-top', {duration: 1000 });
		var effect2 = new Fx.Style(element, 'margin-top', {duration: 800});

		element.addEvent("mouseenter", function() {

			effect2.stop();
			effect1.start(parseInt(element.style.marginTop), 0);

		});

		element.addEvent("mouseleave", function(event)
		{

			effect1.stop();
			effect2.start(parseInt(element.style.marginTop), 110);
		});

	});
	$("home-head-01").addEvent("click", function(e)
	{
		$$('.active').removeClass('active');
		$$('#'+this.id+' a').addClass('active');
		if (active == 'main-content-home-head-01')
		{
			e = new Event(e);
			e.stop();
			return false;
		}
		var slide = new Fx.Style(active, 'width', {duration: 1000, onComplete: function()
		{
			$(active).setStyle('display', 'none');

			active = 'main-content-home-head-01';
	
			$(active).setStyle('width', 0);
			$(active).setStyle('display', 'block');

			var imgs = $$('img');
			$$('#'+active+' img').setStyle('display', 'none');
			$(active).setStyle('display', 'none');
			

			var slide2 = new Fx.Style('main-content-home-head-01', 'width', {duration: 1000});


			
			slide2.start('611');
			$(active).setStyle('width', 0);
			$(active).setStyle('display', 'block');

			(function() 
			{ 
				$$('#main-content-home-head-01 img').setStyle('display', 'block');
				$$('#main-content-home-head-01 img').setStyle('height', 5);
				$$('#main-content-home-head-01 img').setStyle('width', 5);
				var img1 = $$('#main-content-home-head-01 img')[0];
				var img2 = $$('#main-content-home-head-01 img')[1];
				img2.setStyle('margin-top', 40);
				img1.setStyle('margin-top', 40);
				img1.setStyle('margin-left', 285);
				var effect = new Fx.Styles(img1, {duration: 2000});
				effect.start({
					"height" : ["159px"],
					"width" : ["274px"],
					"margin-left" : [0],
					"margin-top": [0]
					});
				var effect = new Fx.Styles(img2, {duration: 1000});
				effect.start({
					"height" : ["35px"],
					"width" : ["35px"],
					"margin-left" : [0],
					"margin-top": [40]
					});
			}).delay(3000);
		}});
		slide.start(611, 0);
		

		e = new Event(e);
		e.stop();
		return false;

	});
	$("home-head-02").addEvent("click", function(e)
	{
		$$('.active').removeClass('active');
		$$('#'+this.id+' a').addClass('active');
		if (active == 'main-content-home-head-02')
		{
			e = new Event(e);
			e.stop();
			return false;
		}
		if (!sliding)
		{
			$$('.tab div').setStyle('margin-top', 180);
		}
		
		var slide = new Fx.Style(active, 'width', {duration: 1000, onComplete: function()
		{ 
			$(active).setStyle('display', 'none');
			$$('#'+active+' img').setStyle('display', 'none');
			$('main-content-home-head-02').setStyle('width', 0);
			$('main-content-home-head-02').setStyle('display', 'block'); 
			var slide2 = new Fx.Style('main-content-home-head-02', 'width', {duration: 1000});

			slide2.start(0, 611);
			active = 'main-content-home-head-02';
			slide_effect_stopped = false;
			if (!sliding)
			{
				sliding = true;
				slide_tabs();
			}
			changing = this;
			

		}});
		slide.start(611, 0);
		e = new Event(e);
		e.stop();
		return false;
		
	});
	$("home-head-03").addEvent("click", function(e)
	{
		$$('.active').removeClass('active');
		$$('#'+this.id+' a').addClass('active');
		if (active == 'main-content-home-head-03')
		{
			e = new Event(e);
			e.stop();
			return false;
		}
		//$$('#main-content-home-head-03 div')[0].hide();
			
		//var mySlider = new Fx.Slide($$('#main-content-home-head-03 div')[0], {duration: 1});
		//mySlider.slideOut('horizontal'); //toggle the slider up and down.
		
		var slogan = Math.floor(Math.random()*slogans.length);
		$$('#main-content-home-head-03 div p').setHTML(slogans[slogan]);
		$$('#main-content-home-head-03 div h2').setText('Reason #'+getSloganCount(slogan));
		
		var slide = new Fx.Style(active, 'width', {duration: 1000, onStart: function() { $$('#main-content-home-head-03 div')[0].setStyle('display', 'none'); }, onComplete: function() 
		{ 
			$(active).setStyle('display', 'none');
			$('main-content-home-head-03').setStyle('width', 0);
			$('main-content-home-head-03').setStyle('display', 'block');
			var slide2 = new Fx.Style('main-content-home-head-03', 'width', {duration: 1000, onComplete: function() { 	$$('#main-content-home-head-03 div')[0].setStyle('display', 'block'); var mySlider = new Fx.Slide($$('#main-content-home-head-03 div')[0], {duration: 1000}).hide('horizontal').slideIn('horizontal');
			}});
			
			slide2.start(611);

			active = 'main-content-home-head-03';

		}});
		slide.start(611, 0);
		
		e = new Event(e);
		e.stop();
		return false;
	});
	
	/* search input animation */
	
	if ($('testinput_xml'))
	{
		$('testinput_xml').addEvent('focus', function()
		{
			$('search-active').setStyle('opacity', 0);
			var effect = new Fx.Style($('search-active'), 'opacity', {duration: 1000, onStart: function() { $('search-active').setStyle('visibility', 'visible'); }});
			effect.start(0, 1);
		});

		$('testinput_xml').addEvent('blur', function()
		{
			$('search-active').setStyle('visibility', 'hidden');
		});
	}
	/*  end search input animation */

        if ($('home-search') != undefined) {
	   $('home-search').addEvent('click', function(e)
	   {
		e = new Event(e);
		e.stop();
		var scroll = new Fx.Scroll(window, { wait: false, duration: 1000, onComplete: function() { $('testinput_xml').focus();}});
		scroll.toElement('sky');
		$('search-active').setStyle('opacity', 0);
		effect = new Fx.Style($('search-active'), 'opacity', {duration: 1000, onStart: function() { $('search-active').setStyle('visibility', 'visible'); }});
		effect.start(0, 1);
		
		return false;
	   });
        }

	common_functions();
});
