/**
* Mylo builder
*
* @author Peter Howells
* @package M&P
*/

var Mylo_Builder = Class.create({

	btnBack: null,						// back button
	btnBuy: null,						// buy button
	btnReset: null,						// reset button
	container: null,					// containing element
	loadingIcon: null,					// loading image
	options: [],						// object options
	pricing: {},						// pricing data js object
	section: [],						// sections
	sectionCount: 0,					// number of sections
	selectedOptions: 0,					// number of options selected
	summaryContainer: null,				// summary container
	summaryImage: null,					// summary image

    /**
    * constructor
    * find container element and set up existing items
    */
    initialize: function(options) {
		this.options = {
			back: 'btnBack',
			chassis: null,
			container: null,
			cover1: null,
			cover2: null,
			currency: '£',
			pricing: {},
			reset: 'btnReset',
			section: ['Section1', 'Section2', 'Section3'],
			summary: 'Summary'
		};
    	Object.extend(this.options, options || {});

		this.btnBack = $(this.options.back),
		this.btnBuy = $(this.options.buy),
		this.btnReset = $(this.options.reset),
		this.container = $(this.options.container);
		this.pricing = this.options.pricing;
		this.summaryContainer = $(this.options.summary);
        
        // wait until dom is ready
        document.observe('dom:loaded', function() {
            this._build();
            this._listen();
        }.bind(this));
    },

	/**
	 * add options section
	 */
	_addSection: function(id) {
		++this.sectionCount;
		this.section.push(new Mylo_Builder_Section(id, this.sectionCount));
	},
    
    /**
    * build interface and capture existing items
    */
    _build: function() {
		// capture sections
		this.options.section.each(this._addSection.bind(this));

		// disable buy button
		this.btnBuy.disabled = true;
		this.btnBuy.addClassName('disabled');
    },

	/**
	 * handle image load
	 */
	_eventImageLoaded: function(event) {
		new Effect.Fade(this.loadingIcon);
		new Effect.Appear(this.summaryImage);
	},

	/**
	 * handle option change event
	 */
	_eventOptionChanged: function(event) {
		if(!event.memo.updated)
			++this.selectedOptions;

		if(this.selectedOptions >= this.sectionCount) {
			this.btnBuy.disabled = false;
			this.btnBuy.removeClassName('disabled');

			this.summaryContainer.update();

			this.loadingIcon = new Element('img', {src:'/mylo/builder/images_pt/loading.gif'}).setStyle({left:'50%', marginLeft:'-16px', marginTop:'-16px', position:'absolute', top:'50%', zIndex:999});
			this.summaryContainer.insert(this.loadingIcon);

			var fullCode = '';
			var price = parseInt(this.options.pricing[this.options.chassis]);
			price += parseInt(this.options.pricing[this.options.cover1]);
			/*price += parseInt(this.options.pricing[this.options.cover2]);*/            
			this.section.each(function(item) {
				fullCode += fullCode ? '-' + item.itemcode : item.itemcode;
				price += this.pricing[item.itemcode];                
			}.bind(this));

			var pram = this.section[0].itemcode + '-' + this.section[1].itemcode;
			var buggy = this.section[2].itemcode + '-' + this.section[1].itemcode;

			var d = new Date();
			//var imgSrc = '/mylo/builder/images/combination/a-' + pram + '-b-' + buggy + '.jpg';
            var img = '/mylo/builder/images/combination/a-' + pram + '-b-' + buggy + '.jpg';
            var imgSrc ='/cajaContenidos.do?metodoAction=descargarImagen&imagen='+img+'&time='+d;

			this.summaryImage = new Element('img', {src:imgSrc}).addClassName('pngfix').hide();
			this.summaryImage.observe('load', this._eventImageLoaded.bindAsEventListener(this));
			this.summaryContainer.insert(this.summaryImage);
			this.summaryContainer.insert('<p>' + price + this.options.currency+'</p>');
			this.summaryContainer.insert('<input name="item0" type="hidden" value="' + this.section[0].itemcode + '" />');
			this.summaryContainer.insert('<input name="item1" type="hidden" value="' + this.section[1].itemcode + '" />');
			this.summaryContainer.insert('<input name="item2" type="hidden" value="' + this.section[2].itemcode + '" />');
            this.summaryContainer.insert('<input name="item3" type="hidden" value="48780" />');
            this.summaryContainer.insert('<input name="item4" type="hidden" value="48800" />');
		}
	},

	/**
	* back button click
	*/
	_eventBackClick: function(event) {
		event.stop();
		top.location = '/mylo/';
	},

	/**
	* reset button click
	*/
	_eventResetClick: function(event) {
		event.stop();
		this.btnBuy.disabled = true;
		this.btnBuy.addClassName('disabled');
		this.selectedOptions = 0;
		this.summaryContainer.update();
		this.section.each(function(item) {
			item.reset();
		});
	},
    
    /**
    * add event listeners
    */
    _listen: function() {
        document.observe('option::changed', this._eventOptionChanged.bindAsEventListener(this));
		this.btnBack.observe('click', this._eventBackClick.bindAsEventListener(this));
		this.btnReset.observe('click', this._eventResetClick.bindAsEventListener(this));
    }
    
});

/**
* Mylo configure section
*
* @author Peter Howells
* @package M&P
*/

var Mylo_Builder_Section = Class.create({

	box: null,							// box number
	container: null,					// containing element
	imageContainer: null,				// image container
	itemcode: null,						// selected item code
	options: [],						// available options
	resetState: null,					// reset state

    /**
    * constructor
    * find container element and set up existing items
    */
    initialize: function(id, box) {
		this.box = box ? box : 1;
		this.container = $(id);
		this.resetState = this.container.innerHTML;
		this._build();
		this._listen();
	},

	reset: function() {
		// reset item code
		this.itemcode = null;
		
		// reset html
		this.container.innerHTML = this.resetState;

		// remove listeners
		this.options.invoke('stopObserving');

		// re-build + listen
		this._build();
		this._listen();
	},

	/**
	 * build object
	 */
	_build: function() {
		this.imageContainer = this.container.select('div.image').first();
		this.options = this.container.select('li a');
	},

	/**
	 * handle option click
	 * set selected item code
	 */
	_eventOptionClick: function(event) {
		event.stop();
		var updated = this.itemcode ? true : false;
		this.itemcode = event.target.hash.replace('#', '');
		this.container.fire('option::changed', {section:this, updated:updated});

		// set selected class
		this.options.invoke('removeClassName', 'selectedOption');
		event.target.addClassName('selectedOption');

		// show image
		this.imageContainer.update('<img class="pngfix" height="170" src="/mylo/builder/images_pt/builder/box' + this.box + '/' + this.itemcode + '.png" width="175" />');
	},

	/**
	 * add event listeners
	 */
	_listen: function() {
		this.options.each(function(item) {
			item.observe('click', this._eventOptionClick.bindAsEventListener(this));
		}.bind(this));
	}

});