/**
 * Vodafone Bundles javascript, implemented
 * using the revealing module pattern
 * 
 * http://yuiblog.com/blog/2007/06/12/module-pattern/
 * 
 * @author Gavin Williams
 */

var VF = VF || {};

VF.Bundles = (function(){
	
	var View = {
		tabs: {},
		startitem: 0,
		/**
		 * Enhanced the view
		 */
		enhance: function enhance(){
			
			// Add an enhance class to pick up enhanced styles
			var carousel, slider, wrapper, mask, overlay;
			$$('#bundles').addClass('enhanced');
			
			/**
			 * Copy the bundle tabs, we don't want to inject
			 * the elements directly, this allows us to rollback
			 * if there's an error.
			 */
			this.copyBundleTabs();
			
			/**
			 * Create new mask and slider elements
			 */
			mask = new Element('div', {
				'id': 'mask'
			});
			
			slider = new Element('div', {
				'id': 'slider'
			});
			
			/**
			 * Inject all of the elements back into the DOM
			 */
			this.tabs.inject(slider);
			slider.inject(mask);

			mask.inject('bundles');
			
			/**
			 * Check to see if there is a deeplink into a specific tab
			 */
			this.checkStart();
			
			/**
			 * Enhance the slider
			 */
			this.enhanceSlider();
		},
		/**
		 * Enhance the slider
		 */
		enhanceSlider: function enhanceSlider(){
			var _self = this,
				slider = new noobSlide({
				box: $('slider'),
				items: $ES('div','slider'),
				size: 570,
				handles: $ES('a','bundle-tabs'),
				startItem: _self.startitem,
				mode: 'horizontal'
			});
		},
		/**
		 * Copy the bundle tabs to the tabs property
		 */
		copyBundleTabs: function copyBundleTabs(){
			this.tabs = $$('#bundles ul li div.bundle-tab');
		},
		/**
		 * Check to see if there's a deeplink into a specific tab
		 * if there is then select the tab and highlight it.
		 */
		checkStart: function checkStart(){
			var id = window.location.toString().split('#'), _self = this;
			
			if(id.length > 1){
				id = id[id.length - 1];
			}
			
			$each(this.tabs, function(item, index){
				if(item.getProperty('id') == id){
					_self.setStart(index);
				}
			});
			
		},
		/**
		 * Sets the tab and tab handle index based
		 * on the index passed to it
		 * @param {Object} index
		 */
		setStart: function setStart(index){
			this.startitem = index;
			var tabs = $$('ul#bundle-tabs li');
			tabs.removeClass('active');
			tabs[index].addClass('active');
		},
		/**
		 * Initialises the view
		 */
		init: function init(){
			this.enhance();
		}
	},
	Events = {
		bind: function bind(){
			this.bindHandles();
		},		
		bindHandles: function(){
			var _self = this;
			$$('#bundles ul li h2 a').addEvent('click', function(e){
				e = new Event(e).stop();
				$$('#bundles ul li.active').removeClass('active');
				this.getParent('h2').getParent('li').addClass('active');
			});	
		},
		init: function init(){
			this.bind();
		}
		
	};
	
	return {
		init: function init(){
			View.init();
			Events.init();
		},
		getView: function getView(){
			return View;
		},
		getEvents: function getEvents(){
			return Events;
		}
	}
	
})();