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

var VF = VF || {};

VF.FreedomPacks = (function(){
	
	var View = {
		sliderPOSH: {},
		inclusivesPOSH: {},
		enhance: function enhance(){
			this.createPOSH();
			
			$('topUpSelector').addClass('enhanced');
			
			this.sliderPOSH.inject('topupValues', 'after');
			this.inclusivesPOSH.inject('slider', 'after');
			
			this.setInitalValues();

			var _self = this, slider = new Slider('handle-container', 'handle',
				{
					snap: true,
					wheel: true,
					range: [1, Model.data.length],
					steps: Model.data.length - 1,
					onChange: _self.changeValues
				}
			);

		},
		createPOSH: function createPOSH(){
			var slider = new Element('div', {id: 'slider'}), inclusives = new Element('div', {id: 'inclusives'});
			
			slider.grab(
				new Element('div', {id: 'handle-container'})
					.grab(
						new Element('span', {id: 'handle'})
					)
			)
				.grab(
					new Element('span', {'class': 'price'})
			);
			
			inclusives.grab(
				new Element('div', {'class': 'leftCol', 'html': '<h3 class="redOnWhite"><span>FREE Texts</span></h3><div class="texts"></div>'})
			).grab(
				new Element('div', {'class': 'rightCol', 'html': '<h3 class="redOnWhite"><span>FREE Minutes</span></h3><div class="calls"></div>'})
			).grab(
				new Element('br', {'class': 'clear'})
			);
			this.sliderPOSH = slider;
			this.inclusivesPOSH = inclusives;
			
		},
		setInitalValues: function setInitalValues(){
			$$('.price').set('html', Model.data[0].price);
			$$('.texts').set('html', Model.data[0].texts);
			$$('.calls').set('html', Model.data[0].calls);
		},
		changeValues: function changeValues(index){
			var row = Model.data[index - 1] || null;
			if(row === null) throw 'Rowset with index of "' + index + '" does not exist';
			$$('.price').set('html', row.price);
			$$('.texts').set('html', row.texts);
			$$('.calls').set('html', row.calls);
		},
		init: function init(){
			this.enhance();
		}
	},
	Event = {
		bind: function bind(){
			
		},
		init: function init(){
			this.bind();
		}
	},
	Model = {
		data: [],
		fetch: function fetch(){
			var rowSet = $$('table#topupValues tbody tr'), _self = this;
			if(rowSet.length == 0) throw 'There appears to be no data, or could not find table with id "topupValues"';
			$each(rowSet, function(item, index){
				var columns = $(item).getElements('td');
				/**
				 * We could do anoother each in here but it's alot less
				 * browser work to set these manually, considering the fact
				 * that we know what the column names are
				 */ 
				data = {
					price: columns[0].get('html').replace(/\u00A3/, ""),
					texts: columns[1].get('html'),
					calls: columns[2].get('html')
				}
				
				_self.data.push(data);
			});
		},
		init: function init(){
			this.fetch();
		}
	};
	
	
	return {
		init: function init(){
			Model.init();
			View.init();
			Event.init();
		}
	}
		
})();

VF.FreedomPacks1 = (function(){
	
	return {
		init: function(){
			$('moreInfo').addClass('hide');
			window.addEvent('load', function() {
				SqueezeBox.initialize();
				SqueezeBox.assign($$('a[rel=lightbox][href^=#]'), {
					size: {x: 768, y: 180}
				});
			});
		}
	}
	
})();