/**
 * File: http://www.facilitywarehouse.com/gallery/js/Product.js
 */

var Product = new Class({
	
	state: 'off',
	selected: false,
	viewed: false,
	rotate: 0,
	
	initialize: function(obj) {
		this.target = obj;
		this.id = $E('input.id', this.target).getProperty('value');
		this.ref_number = $E('input.ref_number', this.target).getProperty('value');
		this.quantityfield = {state: 0, el: $('quantity' + (this.id))};
		this.quantitysubmit= {el: $('quantitysubmit' + (this.id))};
		
		this.setHoverEvents();
		this.setViewEvents();
		this.setFauxEvents();

		
		if (this.checkbox = $E('input.select', this.target))
			this.setSelectEvents();

		if (this.quantityfield.el && this.quantitysubmit.el)
			this.setQuantityFieldEvents();
	},
	
	setHoverEvents: function() {
		this.target.addEvent('mouseenter', this.mouseEnter.bindWithEvent(this));
		this.target.addEvent('mouseleave', this.mouseLeave.bindWithEvent(this));
	},
	
	setViewEvents: function() {
		this.target.addEvent('click', this.localView.bindWithEvent(this));
	},
	
	setHideEvents: function() {
		this.target.addEvent('click', this.localHide.bindWithEvent(this));
		//set event for remote hide from popup window (?)
	},
	
	setSelectEvents: function() {
		this.checkbox.addEvent('click', this.toggleSelect.bindWithEvent(this));
	},
	
	setFauxEvents: function() {
		$ES('.faux', this.target).each(function(obj) {
			obj.addEvent('click', function(evt) {
				new Event(evt).stopPropagation();
			});
		});
	},
	
	removeHoverEvents: function() {
		this.target.removeEvents('mouseenter');
		this.target.removeEvents('mouseleave');
	},
	
	removeViewEvents: function() {
		this.target.removeEvents('click');
	},
	
	mouseEnter: function() {
		this.changeState('hover');
	},
	
	mouseLeave: function() {
		this.changeState('off');
	},
	
	localView: function() {
		popup.show(this);
		this.remoteView();
	},
	
	remoteView: function() {
		this.removeViewEvents();
		this.setHideEvents();
		
		if (!this.selected) {
			this.removeHoverEvents();
			this.changeState('active');
		}else{
			this.changeState('selectedactive');
		}
		
		this.viewed = true;
	},
	
	localHide: function() {
		this.removeViewEvents();
		this.setViewEvents();
		
		if (!this.selected) {
			this.setHoverEvents();
			this.changeState('hover');
		}else{
			this.changeState('selected');
		}
		
		this.viewed = false;
		popup.remoteHide();
	},
	
	remoteHide: function() {
		this.removeViewEvents();
		this.setViewEvents();
		
		if (!this.selected) {
			this.setHoverEvents();
			this.changeState('off');
		}else{
			this.changeState('selected');
		}
		
		this.viewed = false;
	},
	
	toggleSelect: function(evt) {
		if (this.checkbox.checked) {
			if (!this.viewed) {
				this.removeHoverEvents();
				this.changeState('selected');
			}else{
				this.changeState('selectedactive');
			}
			
			this.selected = true;
		} else {
			if (!this.viewed) {
				this.setHoverEvents();
				this.changeState('hover');
			}
			
			this.selected = false;
		}
	},
	
	changeState: function(state) {
		switch (state) {
			case 'hover' :
				this.target.addClass('hover');
				this.target.removeClass('active');
				this.target.removeClass('selected');
				this.target.removeClass('selectedactive');
				this.state = 'hover';
				break;
			case 'active' :
				this.target.addClass('active');
				this.target.removeClass('hover');
				this.target.removeClass('selected');
				this.target.removeClass('selectedactive');
				this.state = 'active';
				break;
			case 'selected' :
				this.target.addClass('selected');
				this.target.removeClass('hover');
				this.target.removeClass('active');
				this.target.removeClass('selectedactive');
				this.state = 'selected';
				break;
			case 'selectedactive' :
				this.target.addClass('selectedactive');
				this.target.removeClass('hover');
				this.target.removeClass('active');
				this.target.removeClass('selected');
				this.state = 'selected';
				break;
				
				break;
			case 'off' :
			default :
				this.target.removeClass('active');
				this.target.removeClass('hover');
				this.target.removeClass('selected');
				this.target.removeClass('selectedactive');
				this.state = 'off';
				break;
		}
	},
	
	getAsyncDetails: function(popupstate) {
		var xhr = new XHR({method: 'get'}).send('/gallery/js/async/product.php', 'pid=' + this.id + '&' + Object.toQueryString(popupstate) + '&productstate=' + (this.selected ? '1' : '0'));
		xhr.addEvent('onSuccess', this.handleGetAsyncDetails.bind(this));
	},

	handleGetAsyncDetails: function(response) {
		this.fireEvent('onGetAsyncDetails', {response: response});
	},
	
	rotateImage: function(degrees, plc) {
		degrees = parseInt(this.rotate) + parseInt(degrees);
		degrees = degrees > 270 ? 0 : (degrees < 0 ? 360 + degrees : degrees);
		
		this.rotate = degrees;
		
		var el = $E(plc);
		
		var x = el.getProperty('height').toInt();
		var y = el.getProperty('width').toInt();
		
		if ((x / y) >= (320 / 250)) {
			y = (320 * y / x).round();
			x = 320;
			var p = ((250 - y) / 2).round();
		} else if ((x / y) < (320 / 250)) {
			x = (250 * x / y).round();
			y = 250;
			var p = 0;
		}
		
		el.setProperty('width', x);
		el.setProperty('height', y);
		el.setStyle('padding-top', p);
		
		el.setProperty('src', '/gallery/js/async/product.php?pid=' + this.id + '&action=rotate&degrees=' + degrees);
	},
	
	saveImage: function() {
		// Set IFRAME src
		$('productsaveimage').setProperty('src', '/gallery/save.php?pid=' + this.id);
	},

	setQuantityFieldEvents: function() {
		this.quantityfield.el.addEvent('focus', this.handleQuantityFocus.bind(this));
		this.quantityfield.el.addEvent('blur', this.handleQuantityBlur.bind(this));
		this.quantitysubmit.el.addEvent('click', this.handleQuantitySubmit.bind(this));
	},

	handleQuantityFocus: function() {
		this.quantityfield.el.addClass('quantityfocused');
		this.quantityfield.ovalue = this.quantityfield.el.value;

		this.quantitysubmit.el.addClass('quantitysubmitshown');
	},

	handleQuantityBlur: function() {
		this.doQuantityBlur.delay(500, this);
	},

	doQuantityBlur: function() {
		// only change to unfocused if valid data
		if (this.quantityfield.state == 1)
			return;

		this.quantityfield.el.removeClass('quantityfocused');
		this.quantitysubmit.el.removeClass('quantitysubmitshown');
		this.quantityfield.el.value = this.quantityfield.ovalue;
	},

	handleQuantitySubmit: function() {
		this.collection_id = $('collection_id').value;

		// keep quantity field focused until we verify data
		this.quantityfield.state = 1;
		this.updateCollectionAjax = new Ajax('/gallery/js/async/product.php', {
				method: 'post',
				data: Object.toQueryString({
					action: 'updatecollectionquantity',
					collection_id: this.collection_id,
					pid: this.id,
					quantity: this.quantityfield.el.value
					}),
				onComplete: this.handleUpdateCollectionQuantity.bind(this)
		});
		this.updateCollectionAjax.request();
	},

	handleUpdateCollectionQuantity: function(response) {
		if (this.updateCollectionAjax.getHeader('Error') == 1)
		{
			$('producterrorcontainer' + (this.collection_id) + (this.id)).setHTML(response);
		}else{
			$('producterrorcontainer' + (this.collection_id) + (this.id)).empty();
			this.quantityfield.state = 0;
			this.quantityfield.ovalue = this.quantityfield.el.value;
			this.doQuantityBlur();
			this.updateProductSummary();
			this.updateCollectionSummary();
		}
	},

	updateProductSummary: function() {
		var ajax = new Ajax('/gallery/js/async/collection.php', {
			method: 'post',
			data: Object.toQueryString({
				action: 'updateproductsummary',
				pid: this.id,
				collection_id: this.collection_id
				}),
			onComplete: this.handleUpdateProductSummary.bind(this)
		});
		ajax.request();
	},

	handleUpdateProductSummary: function(response) {
		$('productpriceextend' + this.id).setHTML(response);	
	},

	updateCollectionSummary: function() {
		var ajax = new Ajax('/gallery/js/async/collection.php', {
			method: 'post',
			data: Object.toQueryString({
				action: 'updatecollectionsummary',
				pid: this.id,
				collection_id: this.collection_id
				}),
			onComplete: this.handleUpdateCollectionSummary.bind(this)
		});
		ajax.request();
	},

	handleUpdateCollectionSummary: function(response) {
		$$('div.controls div.collectionsummary').each(function(obj){obj.setHTML(response);});	
	}
	
});
Product.implement(new Events);