var PromoRectangle = Class.create();
PromoRectangle.prototype = {
		initialize: function(option) {	
			this.contener_id = option.contener_id;
			this.list_li = $(this.contener_id).getElementsByTagName('li');
			this.current_position = 0;
			this.play = true;
			this.navArray = [];
			this.doNavBox();
			this.addOnclick();
			this.startChange();
		},

		doNavBox: function() {
			var firstInView = this.list_li.length - 1;
			var navContainer = document.createElement("div");
			navContainer.setAttribute('id','nav_box');
			$(navContainer).addClassName('nav_box');

			this.navPlay = document.createElement("span");
			this.navPlay.setAttribute('id','nav_play');
			$(this.navPlay).addClassName('nav_play nav_frame');
			
			this.navNext = document.createElement("span");
			this.navNext.setAttribute('id','nav_next');
			$(this.navNext).addClassName('nav_next nav_next2');
			this.navPrev = document.createElement("span");
			this.navPrev.setAttribute('id','nav_prev');
			$(this.navPrev).addClassName('nav_prev nav_prev2 active');

			
			if(this.list_li.length > 1) {
				$(this.navNext).addClassName('active');
			}
			navContainer.appendChild(this.navPlay);
			navContainer.appendChild(this.navNext);
			navContainer.appendChild(this.navPrev);

			for (var i = 0; i < this.list_li.length ; i++){
				var navItem = document.createElement("span");
				navItem.setAttribute('id', this.list_li[i].getAttribute('id')+'__'+i);
				this.navArray.push(navItem);
			}	
			
			for (var i = this.navArray.length - 1; i >= 0 ; i--){
				navContainer.appendChild(this.navArray[i]);
			}	
			
			$(this.navArray[this.current_position]).addClassName('active');
			$(this.contener_id).appendChild(navContainer);
		},
		
		addOnclick: function() {
			for (var i = 0; i < this.navArray.length ; i++){
				this.navArray[i].onclick = function() {
					return promoRectangle.changeOffer(this);
				};
			}

			this.navNext.onclick = function() {
				promoRectangle.startChange();
				return promoRectangle.moveNext();
			};
				
			this.navPrev.onclick = function() {
				promoRectangle.startChange();
				return promoRectangle.movePrev();
			};	

			this.navPlay.onclick = function() {
				if(this.play) {
					promoRectangle.startChange();
					$(promoRectangle.navPlay).addClassName('nav_frame');
				
				} else {
					promoRectangle.myPeriodicalExecuter.stop();
					$(promoRectangle.navPlay).removeClassName('nav_frame');
					
				}
				
				this.play = !this.play;
				console.log(this.play);
				return false;
			};	
		},
		moveNext: function() {
			var switchIndex = parseInt(promoRectangle.current_position) + 1;

			if(switchIndex >= promoRectangle.navArray.length) {
				switchIndex = 0;
			}
			
			promoRectangle.changeOffer(promoRectangle.navArray[switchIndex]);
			return true;
		},
		
		movePrev: function() {
			var switchIndex = parseInt(promoRectangle.current_position) - 1;
			
			if(switchIndex < 0) {
				switchIndex = promoRectangle.navArray.length - 1;
			} 
			
			promoRectangle.changeOffer(promoRectangle.navArray[switchIndex]);
			return true;
		},
		
		changeOffer: function(item) {
			var navItem = $(item);
			var index = promoRectangle.getIndex(navItem.getAttribute('id'));
			if(index == 'undefined' || index == null || !index ) return false;

			$(this.list_li[this.current_position]).addClassName('inactive');
			$(this.navArray[this.current_position]).removeClassName('active');
			this.current_position = index;
			
			$(this.list_li[this.current_position]).removeClassName('inactive');
			$(navItem).addClassName('active');

			return true;
		},

		getIndex: function(id) {
			return id.split('__')[1];
		},

		startChange: function() {
			if(this.myPeriodicalExecuter != null) {
				this.myPeriodicalExecuter.stop();
			}
			this.myPeriodicalExecuter = new PeriodicalExecuter(this.moveNext, 5);
		}	

};


function initPromoRectangle() { 
	var option = new Object();
	option.contener_id = 'promo_rectangle';
	
	promoRectangle = new PromoRectangle(option); 
}
Event.observe(window, 'load', initPromoRectangle, false);