var FeaturePanel = new Class({
	
	//options
	options: {
		showControls: true,
		showTitles: true,
		duration:6000,
		showTOC: null,
		tocWidth: 20,
		tocClass: 'toc',
		tocActiveClass: 'toc-active',
		thumbnails: null,
		mainfeatures: '.feature-item',
		placePagingControls : null,
		visibleThumbs: 5
	},
	//implements
	Implements: [Options,Events],

	//initialization
	initialize: function(container,elements,options) {

		self = this;

		//set options
		self.setOptions(options);
	
		self.container = $(container);
		self.elements = $$(elements); 
		self.currentIndex = 0;
		self.interval = '';
		self.active = true;

		self.controls = {};
		
		if(self.container) {
			
			
			self.loader = new Element('div', {'class' : 'loader'}).inject(self.container, 'top');
		
			if(self.options.showTOC) {
				self.toc = []; 
				self.tocLinks = $$(self.options.showTOC);
			
				self.tocWidth = 0;
			
				self.tocLinks.each(function(el){ self.tocWidth += self.options.tocWidth; }.bind(this));			

				if(self.tocLinks.length > self.options.visibleThumbs && self.options.placePagingControls) {
					
					self.thumb_mover = $('thumbnail-mover');
					
					self.thumb_mover.setStyles({
						'width' : self.tocWidth + 20,
						'margin-left' : 0
						});
					self.thumb_mover.mover = new Fx.Tween(self.thumb_mover, { transition: Fx.Transitions.Quart.easeOut, duration: 500 });
					self.thumb_mover.pos = 7;
					
					//self.tocLinks.length
					
					self.thumb_mover.addEvents({
						'slide_right' : function() {
							if(!(this.pos == self.tocLinks.length)) {
								this.mover.start('margin-left', (this.getStyle('margin-left').toInt() - self.options.tocWidth));
								self.thumb_mover.prev.removeClass('disabled');
								this.pos = this.pos+1;
								if(this.pos == self.tocLinks.length){
									self.thumb_mover.next.addClass('disabled');
								}
							}
						},
						'slide_left' : function() {
							if(!(this.pos <= 7)) {
								
								this.mover.start('margin-left', (this.getStyle('margin-left').toInt() + self.options.tocWidth));
								this.pos = this.pos-1;
								self.thumb_mover.next.removeClass('disabled');
								if (this.pos <= 7) {
									self.thumb_mover.prev.addClass('disabled');
								};
								
							}
						},
						'reset' : function() {
							this.mover.start('margin-left', 0);
							this.pos = 7;
						}
					})
					
					self.thumb_mover.next = new Element('a',{
						href: '#',
						id: 'next-slide',
						text: '>>',
						events: {
							click: function(e) {
								if(e) e.stop();
								self.thumb_mover.fireEvent('slide_right');
							}
						}
					}).inject(self.options.placePagingControls);
					
					self.thumb_mover.prev = new Element('a',{
						href: '#',
						id: 'prev-slide',
						text: '<<',
						'class': 'disabled',
						events: {
							click: function(e) {
								if(e) e.stop();
								self.thumb_mover.fireEvent('slide_left');
							}
						}
					}).inject(self.options.placePagingControls);
					
				}
				else 
				{
					$(self.options.thumbnails).setStyles({ 'width' : self.tocWidth })
					$('thumbnail-mover').setStyles({ 'width' : self.tocWidth }).addClass('float-right');
				}
			}


			self.elements.each(function(el,i){
				if(self.options.showTOC) {
					if(i == 0) self.tocLinks[i].addClass(self.options.tocActiveClass);
					self.toc.push(self.tocLinks[i].addEvent('click', function(e){ 
							if(e) e.stop(); 
							self.stop(); 
							self.show(i);
							}
						)
					);
				}
				if(i > 0) el.set('opacity',0);
			});

			self.featurePanels = $$(self.options.mainfeatures);

			if(self.featurePanels.length)
			{
				self.featurePanels.images = [];

				self.featurePanels.each(function(feature,n){
					self.featurePanels.images.push(feature.getElement('img').src);
				});

				self.progressTemplate = 'Loading image {x} of ' + self.featurePanels.images.length;
				self.loader.set('text', self.progressTemplate);
				self.updateProgress(0);
			}
			new Asset.images(self.featurePanels.images, {
				onProgress: function(c,index) {			
			 		self.updateProgress(c+1);
				},
				onComplete: function() {
					/* start the show */
					//Panel Control links
					self.create_controls();
					self.start();
				}
			});
		} else {
			throw new Error('No Feature Panel with id "'+ container +'" exists');
		}
		
	},

	show: function(to) {

		if(self.thumb_mover && self.currentIndex >= (self.thumb_mover.pos-1)) 
		{
			self.thumb_mover.fireEvent('slide_right');
		}
		
		self.elements[self.currentIndex].fade('out');
		if(self.options.showTOC) self.toc[self.currentIndex].removeClass(self.options.tocActiveClass);
		self.elements[self.currentIndex = ($defined(to) ? to : (self.currentIndex < self.elements.length - 1 ? self.currentIndex+1 : 0))].fade('in');
		if(self.options.showTOC) self.toc[self.currentIndex].addClass(self.options.tocActiveClass);
		if($defined(self.controls.view)) {
			self.controls.view.set('Title', self.toc[self.currentIndex].title);
		}

		if(self.thumb_mover && self.currentIndex == 0)
		{
			self.thumb_mover.fireEvent('reset');
		}

		
	},
	start: function() {
		self.loader.destroy();
		self.interval = self.show.periodical(self.options.duration);
	},
	stop: function() {
		$clear(self.interval);
	},
	pause: function() {
		if(self.active) { 
			$clear(self.interval); 
			self.active = false; 
		} else { 
			self.start(); 
			self.active = true; 
		}
		self.controls.pause.toggleClass('paused');
	},
	view_feature: function() {
		self.stop();
		window.location = self.toc[self.currentIndex].href;
	},
	//"private"
	create_controls: function() {
		if(self.options.showControls) {
			
			//var controls_holder = ;
			
			next = new Element('a',{
				href: '#',
				id: 'next',
				text: '>>',
				events: {
					click: function(e) {
						if(e) e.stop();
						self.stop(); 
						self.show();
					}
				}
			}).inject(self.container);
		}
		self.controls.view = new Element('a',{
			href: '#',
			id: 'view',
			text: 'View Project',
			'class': 'view-button',
			'disabled' : 'disabled',
			events: {
				click: function(e) {
					if(e) e.stop();
					
					self.view_feature();
					
				}
			}
		}).inject(self.container);
		self.controls.pause = new Element('a',{
			href: '#',
			id: 'pause',
			text: 'Pause',
			'class': 'pause-button',
			events: {
				click: function(e) {
					if(e) e.stop();
					self.pause();
				}
			}
		}).inject(self.container);
		if(self.options.showControls) {
			previous = new Element('a',{
				href: '#',
				id: 'previous',
				text: '<<',
				events: {
					click: function(e) {
						if(e) e.stop();
						self.stop(); 
						self.show(self.currentIndex != 0 ? self.currentIndex -1 : self.elements.length-1);
					}
				}
			}).inject(self.container);
		}
	},
	updateProgress: function(num) {
		self.loader.set('text', self.progressTemplate.replace('{x}',num));
	}
	
});