//setup the namespace
if (typeof crumbs == "undefined" || !crumbs) {
    var crumbs = {};
}

crumbs.Product = Class.create();
crumbs.Product.prototype = {
	initialize: function(properties, template) {
		this.properties = properties;
		this.template = template;
		
		this.element = document.createElement('div');
		this.element = $(this.element);
		this.element.addClassName("product-grid-elm");
		this.element.innerHTML = this.template.evaluate(this.properties);
		var imgNodes = this.element.select(".product-image-tag");
		var imgNode = imgNodes[0];
		imgNode.src = imgNode.getAttribute('mysrc');
		
		var nameNode = this.element.select(".product-name-helper");
		nameNode = $(nameNode[0]);
		if(this.properties.is_highlight) {
			nameNode.addClassName("product-star");
		} else {
			//disable product-star-anchor
			var psa = this.element.select(".product-star-anchor");
			Element.setStyle(psa[0], { display: "none" })
		}
		//Star takes precedence over new
		if(!this.properties.is_highlight && this.properties.is_new) {
			nameNode.addClassName("product-new");
		}
		this.displayOrder = 0;

		if (this.properties.is_draggable) 
			this.initDrag();
		else
			Event.observe(this.element, "click", this.onClick.bindAsEventListener(this));

		this.initHover();
	},
	setDisplayOrder: function(order) {
		this.displayOrder = order;
	},
	render: function(parentElement) {
		parentElement.appendChild(this.element);
	},
	initDrag: function() {
		this.eventClick   = this.onClick.bindAsEventListener(this);
		//make a local draggable object for the "product-image-bg" element
		var dragOptions = { revert: true,
							starteffect: null,
							endeffect: null,
							onClick: this.eventClick,
							onStart: this.startDrag,
							onEnd: this.stopDrag }
		var dragElms = $(this.element).select(".product-image-bg");
		if(!dragElms) return false;
		var dragElm = dragElms[0];
		this.draggable = new crumbs.ProductDraggable(dragElm, dragOptions);
		//console.log("making draggable:");
	},
	dragRevert: function (element, top_offset, left_offset) {
		//var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.01;
		//new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, queue: {scope:'_draggable', position:'end'}, afterFinish: this.eventFinishDragRevert}); 
	},
	startDrag: function(dragElm, evt) {
		screenManager.getCart().target();
		//this.previousDragId = dragElm.element.identify();
		dragElm.element.id = "product-proxy";
		Element.setStyle(dragElm.element, { left: "0px" });
	},
	stopDrag: function(dragElm, evt) {
	},
	
	initHover: function () {
		var hoverElms = $(this.element).select(".product-image-bg");
		var hoverElm = hoverElms[0];
		Event.observe(hoverElm, 'mouseover', this.hoverImg);
		Event.observe(hoverElm, 'mouseout', this.unhoverImg);
		
		if(this.properties.is_highlight) {
			var starElm = $(this.element).select(".product-star-anchor");
			Event.observe(starElm[0], 'mouseover', this.hoverStar);
			Event.observe(starElm[0], 'mouseout', this.unhoverStar);
		}
	},
	hoverImg: function (event) {
		var element = Event.element(event);
		element.parentNode.parentNode.parentNode.addClassName("product-grid-elm-hover");
	},
	unhoverImg: function (event) {
		var element = Event.element(event);
		Element.removeClassName(element.parentNode.parentNode.parentNode, "product-grid-elm-hover");
	},
	hoverStar: function (event) {
		Element.addClassName(Event.element(event).parentNode.parentNode, "product-name-hover");
	},
	unhoverStar: function (event) {
		Element.removeClassName(Event.element(event).parentNode.parentNode, "product-name-hover");
	},
	
	onClick: function (event, elm) {
		this.clickFunctions();
		return;
	},
	clickFunctions: function() {
		//try {
			var modal = screenManager.getProductModal();
			modal.setId(this.properties.id);
			modal.setDisplayOrder(this.displayOrder);
			modal.setUrl(this.properties.url);
			modal.load();
		//} catch (e) {
			//do nothing.. IE craps the first time so i'm hiding the error
		//}
	},

	destruct: function () {
		this.element.parentNode.removeChild(this.element);
	}
};