// Slideshow style thing.

AccentPanel = new Class({
	
	Implements: [Events, Options],
	
	options: {
		startPanel : 0, // first panel to show (-1 == random)
		panelClass : '.bannerBg', // class name that identifies the panels
		showNavigation: true, // whether to show slides navigation
		navigationId: 'panel-navi-' + $time(), // id of the navigation container
		navigationClass: 'links'
	},
	
	initialize: function(container, options) {
		this.setOptions(options);
		this.container 		= $(container);
		this.panelClass 		= this.options.panelClass;
		this.showNavigation 	= this.options.showNavigation;
		this.navigationId 	= this.options.navigationId;
		this.navigationClass	= this.options.navigationClass;
		
		this.container.store('AccentPanel', this); // link the container to it's active panel;
		
		this.panels = this.container.getElements(this.panelClass);
		this.currentPanel	= (this.options.startPanel != -1) ? this.options.startPanel :  $random(0, this.panels.length-1);
		this.prepare();
		this.reset(); // position panels ready to rolls
		if (this.showNavigation) { // generate navi, if required
			this.navigation = this.buildNavigation();
		}
		this.show(this.currentPanel);
	},
	
	prepare: function() {
		this.panels.each(function(panel, i) {
			if (!panel.retrieve('AccentPanelContent')) {
				this.wrap(panel);
			}
			if (i != this.currentPanel) {
				panel.retrieve('AccentPanelContent').fade('hide');
			}
		}.bind(this));
	},
	
	// wraps the panel's content in a div (so that it can be faded in/out easily)
	wrap: function(el) {
		if(!this.panels.contains(el)) throw('This doesnt seem to be a panel?');

		var contentWrapper = new Element('div', { id : el.id + '-content' });
		var children = el.childNodes; // dont use get children because want textnodes
		contentWrapper.adopt(children);
		el.adopt(contentWrapper);
		el.store('AccentPanelContent', contentWrapper);
		return el;
	},
	
	getPanelContent: function(i) {
		return this.panels[i].getElement('#' + this.panels[i].id + '-content');
	},
	
	// generate the navigation
	buildNavigation: function() {
		var navi = new Element('ul', { 'class' : this.navigationClass, 'id' : this.navigationId });
		// add a link for each panel
		this.panels.each(function(panel, i) {
			navi.adopt(
				new Element('li', { 'id' : navi.id + '-panel-' + i }).adopt(
					new Element('a', { 'href':'#' }).store('panelRef', i).adopt(
						//new Element('span', { 'class':'text', 'html':'panel' + i })
						new Element('span', { 'class':'text', 'html':'•'})
					)
				)
			);
		});
		// add events to the links
		navi.getElements('a').each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.slideTo(i);
			}.bind(this));
		}.bind(this)); // too many binds? must be a better way to do this?
		// attach the navigation to the panel container
		this.container.adopt(navi);
		return navi;
	},
	
	hasNavigation: function() { 
		return !!this.navigation;  // the !! - forcing a boolean returntype
	},
	
	navigationHighlight: function(i) {
		if (!this.hasNavigation()) return false;
		
		var naviLinks = this.navigation.getElements('li');	
		naviLinks.removeClass('current');
		naviLinks[i].addClass('current');
		return true;
	},
	
	// puts panels in their starting positions
	reset: function(i) {
		if (i == null) {
			this.panels.setStyle('left', this.container.getWidth() + 'px'); // hide them all
		} else {
			this.panels[i].setStyle('left', this.container.getWidth() + 'px'); // hide only specified one
		}
	},

	// immediately show panel
	show: function(i) {
		this.panels[i].setStyle('left', '0px');
		this.setCurrentPanel(i);
	},
		
	slideTo: function(i) {
		if (!this.panels[i]) {
			throw('Panel not found!');
		}
		var panelContent = this.panels[i].retrieve('AccentPanelContent');
		
		// slide out current panel
		this.slideOut(this.currentPanel);
		// hello new panel
		this.panels[i].tween('left', '0px').get('tween').chain(function() {
			// fade in content
			panelContent.fade('in');
		});
		this.setCurrentPanel(i);
	},
	
	slideOut: function(i) {
		var panelContent = this.panels[i].retrieve('AccentPanelContent');
		// fade out content
		panelContent.fade('out').get('tween').chain(function() {
			// Slide out panel
			this.panels[i].tween('left', -this.container.getWidth() + 'px').get('tween').chain(function() { 
				this.reset(i);
			}.bind(this));
		}.bind(this));
		return;
	},
	
	next: function() {
		var next = (this.currentPanel == (this.panels.length-1)) ? 0 : (this.currentPanel + 1);
		this.slideTo(next);
	},
	
	prev: function() {
		var prev = (this.currentPanel == 0) ? (this.panels.length-1) : (this.currentPanel - 1);
		this.slideTo(prev);
	},
	
	rotate: function() {
		var nextInSequence = (this.currentPanel == (this.panels.length-1)) ? 0 : (this.currentPanel + 1);
		if(nextInSequence > this.panels.length-1){
		var nextInSequence = 1;
		}
		this.slideTo(nextInSequence);
		/*console.log(nextInSequence+"of"+this.panels.length+"panels");*/
	},
	
	setCurrentPanel: function(i) { 
		this.currentPanel = i;
		this.navigationHighlight(i);
	},
	
	getCurrentPanel: function() { return this.currentPanel; },
	
	getCurrentPanelElement: function() { return this.panels[this.currentPanel]; }
	
	
});