var IceCarousel = Class.create({
  initialize: function(el, options) {
		this.options = Object.extend({
			autoplay: false,
			seconds: 3,
			transition: 'scroll'
		}, 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(){
		switch (this.options.transition){
			case 'scroll':
				this.element.setStyle({overflow: 'hidden',position:'relative'});
				this.layer.setStyle({width:this.page_width*this.element_count+'px',position:'relative'});
				break;
			case 'fade':
				this.layer.select('div').invoke('setStyle', {position: 'absolute', display: 'none'});
				this.first_page.show();
				break;
		}
	},

	nextPage: function(e){
		if (this.active_page.next('div'))
			this.gotoPage(this.active_page.next('div'), e);
		else
			this.gotoPage(this.first_page, e);
	},
	
	prevPage: function(e){
		if (this.active_page.previous('div'))
			this.gotoPage(this.active_page.previous('div'), e);
		else
			this.gotoPage(this.last_page, e);
	},
	
	gotoPage: function(page, e){
		this.pauseExecuter(e);
		
		var page_count = page.previousSiblings().size();
		
		// choose effect
		
		switch(this.options.transition){
			case 'scroll':
				new Effect.Move(this.layer, {x:-this.page_width*page_count, y:0, mode: 'absolute', queue: 'end'+this.element.id});
				break;
			
			case 'fade':
				this.active_page.fade({duration:2});
				page.appear({duration:2});
				break;
				
			default: 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
		if (this.controls.down('.carousel-direct-page')){
			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), this.options.seconds);
	},
	
	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), this.options.seconds);
		}
	},
		
	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));
			
			if (this.controls.down('.carousel-direct-page')){
				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});
		}
	}
});