var IceCarousel = Class.create({
  initialize: function(el, options) {
		this.options = Object.extend({
			autoplay: false
		}, options || {});
		
		this.element = $(el);
		
		this.layer = this.element.down('.carousel-page');
		this.element_count = this.layer.select('div').size();
		this.first_page = this.layer.firstDescendant();

		this.last_page = this.layer.down('div', this.element_count-1);
		this.active_page = this.first_page;
		
		this.timeout;
		this.controls;
		
		this.page_width = this.active_page.getWidth();
		
		
		this.styleElement();
		this.createJumpLinks();
		
		this.executer = this.options.autoplay;
		
		if (this.executer) this.startExecuter();
  },
  
	styleElement: function(){
		this.element.setStyle({
			overflow: 'hidden',
			position:'relative'
		});
		
		this.layer.setStyle({
			width:this.page_width*this.element_count+'px !important',
			position:'relative'
		});
	},

	nextPage: function(e){
		if (this.active_page.next('div'))
			this.gotoPage(this.active_page.next('div'));
		else
			this.gotoPage(this.first_page);
	},
	
	prevPage: function(e){
		if (this.active_page.previous('div'))
			this.gotoPage(this.active_page.previous('div'));
		else
			this.gotoPage(this.last_page);
	},
	
	gotoPage: function(page, e){
		this.pauseExecuter(e);
		
		var page_count = page.previousSiblings().size();
		new Effect.Move(this.layer, {x:-this.page_width*page_count, y:0, mode: 'absolute', queue: 'end'+this.element.id});
		this.active_page = page;
		
		//highlight active controll
		this.controls.select('a').invoke('removeClassName', 'carousel-selected-control');
		this.controls.down('a', page_count).addClassName('carousel-selected-control');
		
		if (e){
			e.stop();
		}
	},
	
	startExecuter: function(){
		this.periodical_executer = new PeriodicalExecuter(this.nextPage.bind(this), 3);
	},
	
	pauseExecuter: function(e){
		// stop the auto play, and resume after 5 seconds
		if (this.executer && e){
			this.periodical_executer.stop();
			if (this.timeout) clearTimeout(this.timeout);
			this.timeout = setTimeout((function(){this.startExecuter()}).bind(this), 5000);
		}
	},
		
	createJumpLinks: function(){
		this.controls = $(this.options.controls);
		
		if (this.controls){
			if (this.controls.down('.carousel-prev-control'))	this.prev_page = this.controls.down('.carousel-prev-control').observe('click', this.prevPage.bind(this));
			if (this.controls.down('.carousel-next-control'))	this.next_page = this.controls.down('.carousel-next-control').observe('click', this.nextPage.bind(this));
			
			this.controls.down('.carousel-direct-page').addClassName('carousel-selected-control');
			
			this.controls.select('.carousel-direct-page').each(function(s){
					var clean_href = s.href.replace(window.location.href.split('#')[0],'');
					if(clean_href.substring(0,1) == '#'){
						s.observe('click', this.gotoPage.bind(this,$(clean_href.substring(1))));
					}
			}, this);
		}
		else{
			this.controls = new Element('div', {'class':'carousel-controls'});
		
			this.layer.select('div').each(function(s){
				var page_count = s.previousSiblings().size();
				this.controls.insert(new Element('a', {'class':'carousel-direct-page'}).update('').observe('click', this.gotoPage.bind(this,s)));
			}, this);
		
			this.controls.down('.carousel-direct-page').addClassName('carousel-selected-control');
		
			this.prev_page = this.controls.insert(new Element('a', {'class':'carousel-prev-control'}).update('').observe('click', this.prevPage.bind(this)));
			this.next_page = this.controls.insert(new Element('a', {'class':'carousel-next-control'}).update('').observe('click', this.nextPage.bind(this)));
		
			this.element.insert({after: this.controls});
		}
	}
});