var IndexVisualRight = {
	
	speed: 700,
	timeout: 6000,
	elements: null,
	elementsSelectors: null,
	current: 0,
	last: 1,
	timer: null,
	
	init: function()
	{
		this.elements = $('div#rightImages').children();
		this.elementsSelectors = $('ul#rightSelector').children();
		for (var i = 0; i < this.elements.length; i++) {
			$(this.elements[i]).css('z-index', String(this.elements.length-i)).css('position', 'absolute').hide();
        };

		this.next(this.current, this.last);
		this.handleManualSelect();
	},
	
	next: function(current, last)
	{
		IndexVisualRight.current = current;
		$(IndexVisualRight.elements[last]).fadeOut(IndexVisualRight.speed);
        $(IndexVisualRight.elements[current]).fadeIn(IndexVisualRight.speed);

        $(IndexVisualRight.elementsSelectors[last]).removeClass('active');
        $(IndexVisualRight.elementsSelectors[current]).addClass('active');
        
        if ((current + 1) < IndexVisualRight.elements.length)
        {
            current = current + 1;
            last = current - 1;
        } 
        else 
        {
            current = 0;
            last = IndexVisualRight.elements.length - 1;
        }
        
        IndexVisualRight.timer = setTimeout((function() {
			IndexVisualRight.next(current, last);
        }), IndexVisualRight.timeout);
	},
	
	handleManualSelect: function()
	{
		$('ul#rightSelector a').click(function() {
			$(this).blur();
			var clicked = $(this).attr('rel');
			clearTimeout(IndexVisualRight.timer);
			if (clicked != IndexVisualRight.current)
			{
				IndexVisualRight.next(clicked, IndexVisualRight.current);
			}
			
		});
	}
}

var IndexVisualLeft = {
	
	speed: 700,
	timeout: 6000,
	elements: null,
	elementsSelectors: null,
	current: 0,
	last: 1,
	timer: null,
	
	init: function()
	{
		this.elements = $('div#leftImages ul').children();

		for (var i = 0; i < this.elements.length; i++) {
			$(this.elements[i]).css('z-index', String(this.elements.length-i)).css('position', 'absolute').hide();
                        $('ul#leftSelector').append('<li><a href="javascript:;" rel="' + i + '">' + (i + 1) + '</a></li>');
                };
                
                this.elementsSelectors = $('ul#leftSelector').children();

		this.next(this.current, this.last);
		this.handleManualSelect();
	},
	
	next: function(current, last)
	{
		IndexVisualLeft.current = current;
		$(IndexVisualLeft.elements[last]).fadeOut(IndexVisualLeft.speed);
        $(IndexVisualLeft.elements[current]).fadeIn(IndexVisualLeft.speed);

        $(IndexVisualLeft.elementsSelectors[last]).removeClass('active');
        $(IndexVisualLeft.elementsSelectors[current]).addClass('active');
        
        if ((current + 1) < IndexVisualLeft.elements.length) 
        {
            current = current + 1;
            last = current - 1;
        } 
        else 
        {
            current = 0;
            last = IndexVisualLeft.elements.length - 1;
        }
        
        IndexVisualLeft.timer = setTimeout((function() {
			IndexVisualLeft.next(current, last);
        }), IndexVisualLeft.timeout);
	},
	
	handleManualSelect: function()
	{
		$('ul#leftSelector a').live('click', function() {
			$(this).blur();
			var clicked = $(this).attr('rel');
			clearTimeout(IndexVisualLeft.timer);
			if (clicked != IndexVisualLeft.current)
			{
				IndexVisualLeft.next(clicked, IndexVisualLeft.current);
			}
			
		});
	}
}

$(document).ready(function() {
	IndexVisualLeft.init();
        //IndexVisualRight.init();
});