window.addEvent('domready', function() {
	
	new Rotator('banner', { delay: 15000, speed: 500 });
	
	if ($('designer_more'))
	{
		$('designer_less').style.display = "none";
		$('designer_less').style.cursor = "pointer";
		$('designer_more').style.cursor = "pointer";
		$('designer_more').addEvent('click', function(e){
			e.stop();
			this.getParent().style.height = "600px";
			this.style.display = "none";
			$('designer_less').style.display = "block";
		});
	
		$('designer_less').addEvent('click', function(e){
			e.stop();
			$('designer_description').style.height = "180px";
			this.style.display = "none";
			$('designer_more').style.display = "block";
		});
	}
});

Rotator = new Class({
	options: {
		delay: 10000,
		speed: 500
	},
	initialize: function(el, options){ 
		this.setOptions(options);
		this.id				= el;
		this.el				= $(el);
		this.items			= this.el.getElements('li');
		this.height			= this.el.getSize().y;
		this.count			= this.items.length;
		
		if (this.count > 1)
		{
			this.paused			= false;
			this.complete		= true;
			this.index			= 0;
			this.next			= 0;
			this.previous		= -1;
			this.initialized	= $defined(this.el) && this.count >= 1 && this.options.speed < this.options.delay;
			this.navigation		= new Element('ul').addClass('navigation').inject(this.el, 'after').setOpacity('0.5').addEvents({
				'mouseout':  function() { this.setOpacity('0.5'); },
				'mouseover': function() { this.setOpacity('1.0'); }
			});
			
			this.resume();
			if (this.initialized) {
			
				// create back/forward
				$$('div.banner').getElement('a[class=previous]').addEvent('click', function() { this.back(); }.bind(this));
				$$('div.banner').getElement('a[class=next]').addEvent('click', function() { this.forward(); }.bind(this));
				
				// pause on mouseover
				//this.el.addEvents({
				//	'mouseout':  function() { this.resume(); }.bind(this),
				//	'mouseover': function() { this.pause(); }.bind(this)
				//});
				
				this.items.each(function(item, index) {
							
					// generate navigation
					var i		= index + 1;
					var li		= new Element('li');
					var anchor	= new Element('a').set('text', i).setStyle('background-image', 'url(/web/resource/img/home/banner/navigation/' + i + '.png)').injectInside(li).addEvent('click', function() {
						this.go(index);
					}.bind(this));
					
					if (window.ie6)
						anchor.href = 'javascript:void(0);';
						
					li.inject(this.navigation);
					item.setStyles({ display: 'block', opacity: 0 });
					
					// banner click event
					var a = item.getElement('a[href!=#]');
					if (a != null && a.href.contains('http://')) {
						a.addEvent('click', function() {
							window.open(a.href, '_self'); 
							return false;
						});
					}
				}.bind(this));
				
				this.navigation.items = this.navigation.getElements('li');
				this.start();
			}
		} else {
			this.items[0].setStyles({
				'display': 'block'
			});
			$$('div.banner').getElement('a[class=previous]').setStyle('display', 'none');
			$$('div.banner').getElement('a[class=next]').setStyle('display', 'none');
		}	
	},
	go: function(index) { if (!this.complete || index == this.previous) return;
		
		this.pause();
		if (index == -1) {
			this.index	= this.index - 1;
			this.index	= this.index < 0 ? (this.count - 1) : this.index;
		} else {
			this.index	= $defined(index) ? index : this.next;
		}
		
		this.navigation.items[this.index].addClass('selected'); 
		this.next		= this.index + 1;
		this.next		= this.next < 0 || this.next >= this.count ? 0 : this.next;	
		this.paused		= true; //this.debug('periodical:' + this.periodical + ', previous:' + this.previous + ', index:' + this.index + ', next:' + this.next);
		
		this.fx			= new Fx.Tween(this.items[this.index], {
			duration: this.options.speed,
			onStart: function() {
				this.complete = false;
				this.items[this.index].setStyle('z-index',99);
				
				if (this.previous != -1) {
					this.navigation.items[this.previous].removeClass('selected');
					this.items[this.previous].setStyle('z-index',0);
				}
			}.bind(this)
		}).start('opacity', 0, 1).chain(function() {
			if (this.previous != -1)
				this.items[this.previous].setStyle('opacity', 0);
				
			this.previous	= this.index;
			this.complete	= true;
			this.paused		= false;
			this.resume();
		}.bind(this));
	},
	start:   function() { if (!this.paused) this.go(); },
	back:    function() { this.go(-1); },
	forward: function() { this.go(); },
	pause:   function() { $clear(this.periodical); },
	resume:  function() { this.periodical = this.start.periodical(this.options.delay, this); },
	debug:	 function(m){ if (window.console) console.log(m); }
});
Rotator.implement(new Options);