var Canvas = window.Canvas || {};

(function () {

	/**
	 * Img (Image) Element Class
	 *
	 * @namespace Canvas.Img
	 * @class Element
	 * @constructor
	 * @param el {HTMLElement | String} Container element for the canvas.
	 */
	Canvas.Img = function(el, oConfig) {
		/// this.rotateImage = new YAHOO.util.CustomEvent('rotateImage', this);
		this._initElement(el);
		this._initConfig(oConfig);
		this.setImageCoords();
	};
	
	function getVerifiedElement() {
		
	}
	
	/**
	 * Constant for the default CSS class name that represents a Canvas
     * @property Canvas.Img.CSS_CANVAS
     * @static
     * @final
     * @type String
     */
    Canvas.Img.CSS_CANVAS = "canvas-img";
	
	/**
     * Constant representing the Module's configuration properties
     * @property DEFAULT_CONFIG
     * @private
     * @final
     * @type Object
     */
     var DEFAULT_CONFIG = {

		"TOP": { 
		    key: "top", 
		    value: 10 
		},

		"LEFT": { 
		    key: "left", 
		    value: 10
		},

		"WIDTH": { 
		    key: "width", 
		    value: "50px"  
		},

		"HEIGHT": { 
		    key: "height", 
		    value: "50px"
		},

		"ANGLE": { 
		    key: "angle", 
		    value: 0  
		},

		"SCALE-X": { 
		    key: "scalex", 
		    value: 1
		},
		
		"SCALE-Y": { 
		    key: "scaley", 
		    value: 1
		},
		"CORNERSIZE": { 
		    key: "cornersize", 
		    value: 25
		},
		"BORDERWIDTH": { 
		    key: "borderwidth", 
		    value: 10
		},
		"POLAROIDHEIGHT": {
			key: "polaroidheight",
			value: 40
		}
     };
	
	/**
     * The main element that contains the canvas
     * @property _oElement
     * @type object
     */
	Canvas.Img.prototype._oElement = null;

	/**
     * The object literal containing config parameters
     * @property oConfig
     * @type object
     */
	
	Canvas.Img.prototype.top = null;
	Canvas.Img.prototype.left = null;
	Canvas.Img.prototype.width = null;
	Canvas.Img.prototype.height = null;
	Canvas.Img.prototype.oCoords = null;
	Canvas.Img.prototype.angle = null;
	Canvas.Img.prototype.theta = null;
	Canvas.Img.prototype.scalex = null;
	Canvas.Img.prototype.scaley = null;
	Canvas.Img.prototype.cornersize = null;
	Canvas.Img.prototype.polaroidheight = null;
	
	Canvas.Img.prototype.selected = false;
	Canvas.Img.prototype.cornervisibility = false;
	
	/**
     * The Canvas class's initialization method. This method is automatically 
     * called by the constructor, and sets up all DOM references for 
     * pre-existing markup, and creates required markup if it is not 
     * already present.
     * @method _initElement
     * @param {HTMLElement | String} el The element representing the Canvas
     * @param {Object} userConfig The configuration Object literal 
     * containing the configuration that should be set for this module. 
     * See configuration documentation for more details.
     */
	Canvas.Img.prototype._initElement = function(el) {
		if(YAHOO.util.Dom.inDocument(el)) {
			if(YAHOO.lang.isString(el)) {
				this._oElement = document.getElementById(el);
			} 
			else {
				this._oElement = el;
			}
			YAHOO.util.Dom.addClass(this._oElement, Canvas.Img.CSS_CANVAS);
		}
		else {
			// add element to the document: module.js
		}	
	};

	/**
     * For now we use an object literal without methods to store the config params
     * @method _initConfig
     * @param {Object} userConfig The configuration Object literal 
     * containing the configuration that should be set for this module. 
     * See configuration documentation for more details.
     */
	Canvas.Img.prototype._initConfig = function(oConfig) {
		var sKey;
		for (sKey in DEFAULT_CONFIG) {
			var defaultKey = DEFAULT_CONFIG[sKey].key;
			if (!oConfig.hasOwnProperty(defaultKey)) { // = !(defaultKey in oConfig)
				this[defaultKey] = DEFAULT_CONFIG[sKey].value;
			}
			else {
				this[defaultKey] = oConfig[defaultKey];
			}
		}
		this.theta = this.angle * (Math.PI/180);
		this.width = this._oElement.width + (2 * this.borderwidth);
		this.height = this._oElement.height + (2 * this.borderwidth);
	};
	
	Canvas.Img.prototype.setBorderVisibility = function(showBorder) {
		if (showBorder && (this.width == this._oElement.width)) {
			this.width += (2 * this.borderwidth);
			this.height += (2 * this.borderwidth);
		}
		else if (this.width != this._oElement.width) {
			if (!showBorder) {
				this.width -= (2 * this.borderwidth);
				this.height -= (2 * this.borderwidth);
			}
		}
		this.setImageCoords();
	};
	
	Canvas.Img.prototype.setCornersVisibility = function(visible) {
		this.cornervisibility = visible;
	};
	
	Canvas.Img.prototype.setPolaroidMode = function(showPolaroidFooter) {
		if (this.width != this._oElement.width) {
			if (showPolaroidFooter) {
				this.height += this.polaroidheight;
			}
			else if (showPolaroidFooter == false) { // != !showPolaroidFooter
				this.height -= this.polaroidheight;
			}
		}
		this.setImageCoords();
	};
	
	/**
     * For now we use an object literal without methods to store the config params
     * @method _initConfig
     * @param {Object} userConfig The configuration Object literal
 	 * THIS IS ALSO CALLED EVERYTIME THE POSITION OF THE IMAGE CHAGES (MOUSEUP, ANIM?)
     * containing the configuration that should be set for this module. 
     * See configuration documentation for more details.
     */
	Canvas.Img.prototype.setImageCoords = function() {
		/// canviar init
		this.left = parseInt(this.left);
		this.top = parseInt(this.top);
		
		this._width = parseInt(this.width) * this.scalex;
		this._height = parseInt(this.height) * this.scalex;
		this._hypotenuse = Math.sqrt(Math.pow(this._width / 2, 2) + Math.pow(this._height / 2, 2));
		this._angle = Math.atan(this._height / this._width);
		
		// offset added for rotate and scale actions
		var offsetX = Math.cos(this._angle + this.theta) * this._hypotenuse;
		var offsetY = Math.sin(this._angle + this.theta) * this._hypotenuse;
		var theta = this.theta;
		var sinTh = Math.sin(theta);
		var cosTh = Math.cos(theta);
		
		var tl = {
			x: this.left - offsetX,
			y: this.top - offsetY
		};
		var tr = {
			x: tl.x + (this._width * cosTh),
			y: tl.y + (this._width * sinTh)
		};
		var br = {
			x: tr.x - (this._height * sinTh),
			y: tr.y + (this._height * cosTh)
		};
		var bl = {
			x: tl.x - (this._height * sinTh),
			y: tl.y + (this._height * cosTh)
		};
		// clockwise
		this.oCoords = { tl: tl, tr: tr, br: br, bl: bl };
		
		this.setCornerCoords();			
	};
	
	Canvas.Img.prototype.setCornerCoords = function() {
		// Calculate the rotate boxes.
		var coords = this.oCoords;
		var theta = this.theta;
		var cosOffset = this.cornersize * this.scalex * Math.cos(theta);
		var sinOffset = this.cornersize * this.scalex * Math.sin(theta);
		coords.tl.corner = {
			tl: {
				x: coords.tl.x,
				y: coords.tl.y
			},
			tr: {
				x: coords.tl.x + cosOffset,
				y: coords.tl.y + sinOffset
			},
			bl: {
				x: coords.tl.x - sinOffset,
				y: coords.tl.y + cosOffset
			}
		};
		coords.tl.corner.br = {
			x: coords.tl.corner.tr.x - sinOffset,
			y: coords.tl.corner.tr.y + cosOffset
		};
		
		coords.tr.corner = {
			tl: {
				x: coords.tr.x - cosOffset,
				y: coords.tr.y - sinOffset
			},
			tr: {
				x: coords.tr.x,
				y: coords.tr.y
			},
			br: {
				x: coords.tr.x - sinOffset,
				y: coords.tr.y + cosOffset
			}
		};
		coords.tr.corner.bl = {
			x: coords.tr.corner.tl.x - sinOffset,
			y: coords.tr.corner.tl.y + cosOffset
		};
		
		coords.bl.corner = {
			tl: {
				x: coords.bl.x + sinOffset,
				y: coords.bl.y - cosOffset
			},
			bl: {
				x: coords.bl.x,
				y: coords.bl.y
			},
			br: {
				x: coords.bl.x + cosOffset,
				y: coords.bl.y + sinOffset
			}
		};
		coords.bl.corner.tr = {
			x: coords.bl.corner.br.x + sinOffset,
			y: coords.bl.corner.br.y - cosOffset
		};
		
		coords.br.corner = {
			tr: {
				x: coords.br.x + sinOffset,
				y: coords.br.y - cosOffset
			},
			bl: {
				x: coords.br.x - cosOffset,
				y: coords.br.y - sinOffset
			},
			br: {
				x: coords.br.x,
				y: coords.br.y
			}
		};
		coords.br.corner.tl = {
			x: coords.br.corner.bl.x + sinOffset,
			y: coords.br.corner.bl.y - cosOffset
		};
	};
	
}());