/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> */
 
////////////////////////////////////////////////////////////////////////
//
var Montage =			require("montage/core/core").Montage,
	Component =			require("montage/ui/component").Component,
	ColorPanelPopup =	require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup,
	ColorModel =        require("js/models/color-model").ColorModel;
////////////////////////////////////////////////////////////////////////
//Exporting as ColorPopupManager
exports.ColorPopupManager = Montage.create(Component, {
    ////////////////////////////////////////////////////////////////////
    //
    hasTemplate: {
    	value: false
    },
    ////////////////////////////////////////////////////////////////////
    //
    _hasCloseEvents: {
	 	value: false  
    },
    ////////////////////////////////////////////////////////////////////
    //
    addCloseEvents: {
    	value: function () {
    		//
    		this._hasCloseEvents = true;
    		////////////////////////////////////////////////////////////
            //Closing popups on resize
            window.addEventListener('resize', this, false);
            //Closing popups if outside limits
            document.addEventListener('mousedown', this, false);
            ////////////////////////////////////////////////////////////
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    removeCloseEvents: {
    	value: function () {
    		//
    		this._hasCloseEvents = false;
    		////////////////////////////////////////////////////////////
            //Closing popups on resize
            window.removeEventListener('resize', this, false);
            //Closing popups if outside limits
            document.removeEventListener('mousedown', this, false);
            ////////////////////////////////////////////////////////////
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    handleMousedown: {
	  	value: function (e) {
		  	//
		  	this.closeAllPopups(e);
	  	}  
    },
    ////////////////////////////////////////////////////////////////////
    //
    handleResize: {
	  	value: function (e) {
		  	//
		  	this.hideColorPopup();
	  	}  
    },
    ////////////////////////////////////////////////////////////////////
    //
    closeAllPopups: {
		value: function (e) {
			//
        	if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) {
        		if(!this.popupHitCheck(this._popupBase, e)) {
            		this.hideColorPopup();
        		}
        	} else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
            	if(!this.popupHitCheck(this._popupChipBase, e)) {
            		this.hideColorChipPopup();
        		}
        	} else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
            	if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
            		this.hideColorPopup();
        		}
        	} else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
            	if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
            		this.hideColorPopup();
        		}
        	} else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
            	if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
            		this.hideColorChipPopup();
        		}
        	} else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) {
            	if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
            		this.hideColorPopup();
        		}
        	}
		}  
    },
    ////////////////////////////////////////////////////////////////////
    //
    popupHitCheck: {
	  	value: function (element, e) {
	  		//Prevent any action for button to handle toggling
	  		if (e._event.target.inputType || e._event.target.colorMode) return true;
	  		//Storing limits of popup 
	  		var top, bottom, left, right;
	  		//Checking for popup to be opened otherwise nothing happens
	  		if (element && element.opened && element.popup && element.popup.element) {
            	//Getting horizontal limits	
               	left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft);
               	right = left + parseInt(element.popup.element.offsetWidth);
               	//Getting vertical limits
               	top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop);
               	bottom = top + parseInt(element.popup.element.offsetHeight);
               	//Checking click position in relation to limits
               	if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) {
               		//Hides popups since click is outside limits
	               	return false;
               	} else {
               		//Keeps popup open since click inside area
	               	return true;
               	}
            } else {
            	//Hides popups since element not detected
	            return false;
            }
	  	}  
    },
    ////////////////////////////////////////////////////////////////////
    //
    _popupBase: {
    	value: null
    },
    ////////////////////////////////////////////////////////////////////
    //
    _popupChipBase: {
    	value: null
    },
    ////////////////////////////////////////////////////////////////////
    //
    _popupChipBtn: {
    	value: null
    },
    ////////////////////////////////////////////////////////////////////
    //
    _popupGradientChipBase: {
    	value: null
    },
    ////////////////////////////////////////////////////////////////////
    //
    _popupGradientChipBtn: {
    	value: null
    },
    ////////////////////////////////////////////////////////////////////
    //Storing color manager
    _colorManager: {
        value: null
    },
    ////////////////////////////////////////////////////////////////////
    //
    colorManager: {
        get: function() {return this._colorManager;},
        set: function(value) {this._colorManager = value;}
    },
    ////////////////////////////////////////////////////////////////////
    //
    _colorPopupDrawing: {
    	value: false
    },
    ////////////////////////////////////////////////////////////////////
    //
	_colorChipPopupDrawing: {
    	value: false
    },
    ////////////////////////////////////////////////////////////////////
    //
	_colorGradientPopupDrawing: {
    	value: false
    },
    ////////////////////////////////////////////////////////////////////
    //TODO: Remove and use montage's built in component
    showColorPopup: {
    	value: function (x, y, side, align) {
    		//Check to see if popup is drawing, avoids errors
    		if (this._colorPopupDrawing) {
    			return;
    		}
    		//Check for toggling view
    		if (this._popupBase && this._popupBase.opened) {
    			//Toogles if called and opened
    			this.hideColorPopup();
    			return;
    		} else {
    			this._colorPopupDrawing = true;
    			////////////////////////////////////////////////////
    			//Initializing events
    			if (!this._hasCloseEvents) {
    				this.addCloseEvents();
    			}
    			////////////////////////////////////////////////////
    			//Creating popup
    			var popup = document.createElement('div');
    			document.body.appendChild(popup);
    			//
    			this._popupBase = ColorPanelPopup.create();
    			this._popupBase.element = popup;
    			this._popupBase.props = {x: x, y: y, side: side, align: align, wheel: true, palette: true, gradient: true, image: true, nocolor: true, history: true, panel: true};
    			this._popupBase.colorManager = this.colorManager;
    			//
    			this._popupBase.addEventListener('change', this, false);
		    	this._popupBase.addEventListener('changing', this, false);
    			//
    			this._popupBase.needsDraw = true;
    			this._popupBase.addEventListener('firstDraw', this, false);
        	}		
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    hideColorPopup: {
    	value: function () {
    		if (this._popupBase && this._popupBase.opened) {
    			//
    			this._popupBase.popup.removeEventListener('didDraw', this, false);
    			//
    			this.removeCloseEvents();
    			this.hideColorChipPopup();
    			this.hideGradientChipPopup();
    			//Making sure to return color manager to either stroke or fill (might be a Hack for now)
    			if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) {
    				this.colorManager.input = this.application.ninja.colorController.colorView.previousInput;
    			}
    			//
                this.application.ninja.popupManager.removePopup(this._popupBase.popup.element);
	    		this._popupBase.opened = false;
	    		//TODO: Fix HACK of removing popup
	    		this._popupBase.popup.base.destroy();
	    		this._popupBase.popup = null;
	    	} else if (this._popupChipBase && this._popupChipBase.opened) {
	    		this.hideColorChipPopup();
	    		//Making sure to return color manager to either stroke or fill (might be a Hack for now)
    			if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) {
    				this.colorManager.input = this.application.ninja.colorController.colorView.previousInput;
    			}
	    	}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    colorChipChange: {
    	value: function (e) {
    		//
    		if (!this._popupChipBtn) return;
    		//
    		var ctx,
    			cvs = this._popupChipBtn.getElementsByTagName('canvas')[0],
    			rgb = this._popupChipBase.colorManager.rgb,
				hsl = this._popupChipBase.colorManager.hsl,
				alpha = this._popupChipBase.colorManager.alpha.value || this._popupChipBase.colorManager.alpha;
			//
			this._popupChipBase._components.hex.value = this._popupChipBase.colorManager.hex;
    		//
    		if (cvs) {
	    		ctx = cvs.getContext('2d');
    			ctx.clearRect(0, 0, cvs.width, cvs.height);
    			ctx.beginPath();
    			ctx.lineWidth = 2;
	    		ctx.strokeStyle = "#666";
    			ctx.moveTo(0, 0);
	  			ctx.lineTo(cvs.width, 0);
	  			ctx.lineTo(cvs.width, cvs.height);
	  			ctx.lineTo(0, cvs.height);
	  			ctx.lineTo(0, 0);
				ctx.stroke();
				ctx.beginPath();
    			ctx.lineWidth = 2;
    			ctx.strokeStyle = "#333";
    			ctx.moveTo(2, 2);
		  		ctx.lineTo(cvs.width-2, 2);
	  			ctx.lineTo(cvs.width-2, cvs.height-2);
		 		ctx.lineTo(2, cvs.height-2);
	  			ctx.lineTo(2, 1);
				ctx.stroke();
			}
    		//
    		if (rgb) {
    			if (alpha) {
    				this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
    			} else {
	    			this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: 1, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', 1)'});
    			}
    		} else if (!(e._event.mode && e._event.mode === 'nocolor')) {
    			if (alpha) {
		    		this._popupChipBtn.color('rgb', {r: 255, g: 255, b: 255, a: alpha, css: 'rgba(255, 255, 255, '+alpha+')'});
		    	} else {
			    	this._popupChipBtn.color('rgb', {r: 255, g: 255, b: 255, a: 1, css: 'rgba(255, 255, 255, 1)'});
		    	}
    		} else {
	    		this._popupChipBtn.color('nocolor', null);
    		}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    colorGradientChipChange: {
    	value: function (e) {
    		//
    		if (!this._popupGradientChipBtn) return;
    		//
    		var ctx,
    			cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0],
    			rgb = this._popupGradientChipBase.colorManager.rgb,
				hsl = this._popupGradientChipBase.colorManager.hsl,
				alpha = this._popupGradientChipBase.colorManager.alpha.value || this._popupGradientChipBase.colorManager.alpha;
			//
			this._popupGradientChipBase._components.hex.value = this._popupGradientChipBase.colorManager.hex;
    		//
    		if (cvs) {
	    		ctx = cvs.getContext('2d');
    			ctx.clearRect(0, 0, cvs.width, cvs.height);
    			ctx.beginPath();
    			ctx.lineWidth = 2;
	    		ctx.strokeStyle = "#666";
    			ctx.moveTo(0, 0);
	  			ctx.lineTo(cvs.width, 0);
	  			ctx.lineTo(cvs.width, cvs.height);
	  			ctx.lineTo(0, cvs.height);
	  			ctx.lineTo(0, 0);
				ctx.stroke();
				ctx.beginPath();
    			ctx.lineWidth = 2;
    			ctx.strokeStyle = "#333";
    			ctx.moveTo(2, 2);
		  		ctx.lineTo(cvs.width-2, 2);
	  			ctx.lineTo(cvs.width-2, cvs.height-2);
		 		ctx.lineTo(2, cvs.height-2);
	  			ctx.lineTo(2, 1);
				ctx.stroke();
			}
    		//
    		if (rgb) {
    			if (alpha) {
    				this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
    			} else {
	    			this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: 1, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', 1)'});
    			}
    		} else {
    			if (alpha) {
		    		this._popupGradientChipBtn.color('rgb', {r: 255, g: 255, b: 255, a: alpha, css: 'rgba(255, 255, 255, '+alpha+')'});
		    	} else {
			    	this._popupGradientChipBtn.color('rgb', {r: 255, g: 255, b: 255, a: 1, css: 'rgba(255, 255, 255, 1)'});
		    	}
    		}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    showColorChipPopup: {
    	value: function (e) {
    		if (this._colorChipPopupDrawing) {
    			return;
    		}
    		if (this._popupChipBase && this._popupChipBase.opened && (!this._popupChipBase.props || (this._popupChipBase.props && !this._popupChipBase.props.gradientPopup)) && !e._event.srcElement.props.gradientPopup) {
    			//Toogles if called and opened
    			this.hideColorChipPopup();
    			return;
    		} else {
    			//
    			if (e._event.srcElement.props.gradientPopup) {
	    			this.showGradientChipPopup(e);
	    			return;
    			}
    			//Hidding other popup if opened
    			if (this._popupBase && this._popupBase.opened) {
    				this.hideColorPopup();
    				return;
    			}
    			//
    			this._popupChipBtn = this.application.ninja.colorController.colorView.currentChip;
    			//
    			this._colorChipPopupDrawing = true;
    			////////////////////////////////////////////////////
    			//Initializing events
    			if (!this._hasCloseEvents) {
    				this.addCloseEvents();
    			}
    			////////////////////////////////////////////////////
    			//Creating popup
    			var popup = document.createElement('div');
    			document.body.appendChild(popup);
    			//
    			this._popupChipBase = ColorPanelPopup.create();
    			this._popupChipBase.element = popup;
    			this._popupChipBase.isPopupChip = true;
    			if (e._event.srcElement.props) {
    				this._popupChipBase.props = e._event.srcElement.props;
    			} else {
    				this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false};
    			}
    			//
    			if (this._popupChipBase.props.offset) {
			    	this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupChipBase.props.offset)+'px';
			       	this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px';
		     	} else {
			        this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px';
			        this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px';
		        }
		        //
		        this._popupChipBase.props.source = e._event.srcElement;
		        //
    			this._popupChipBase.colorManager = ColorModel.create();
    			this._popupChipBase.colorManager.input = 'chip';
    			this._popupChipBase.colorManager.alpha = 1;
    			//
    			if (e._event.srcElement.colorMode === 'gradient'){
		        	this._popupChipBase.colorManager.gradient = {value: e._event.srcElement.colorValue};
	        	} else {
		        	this._popupChipBase.colorManager.gradient = null;
	        	}
    			//
    			this._popupChipBase.addEventListener('change', this, false);
		    	this._popupChipBase.addEventListener('changing', this, false);
    			//
    			this._popupChipBase.needsDraw = true;
    			this._popupChipBase.addEventListener('firstDraw', this, false);
        	}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    hideColorChipPopup: {
    	value: function () {
    		//
    		if (this._popupChipBase && this._popupChipBase.opened) {
    			//
    			this.removeCloseEvents();
    			this.hideGradientChipPopup();
    			//
    			this._popupChipBase.popup.removeEventListener('didDraw', this, false);
    			//Making sure to return color manager to either stroke or fill (might be a Hack for now)
    			if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) {
    				this.colorManager.input = this.application.ninja.colorController.colorView.previousInput;
    			}
    			//
                this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element);
	    		this._popupChipBase.opened = false;
	    		//TODO: Fix HACK of removing popup
	    		this._popupChipBase.popup.base.destroy();
	    		this._popupChipBase.popup = null;
	    	}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    showGradientChipPopup: {
    	value: function (e) {
    		if (this._colorGradientPopupDrawing) {
    			return;
    		}
    		if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
    			//Toogles if called and opened
	    		this.hideGradientChipPopup();
    			return;
    		} else {
    			//
    			this._popupGradientChipBtn = this.application.ninja.colorController.colorView.currentChip;
	    		//
    			this._colorGradientPopupDrawing = true;
    			////////////////////////////////////////////////////
    			//Initializing events
    			if (!this._hasCloseEvents) {
    				this.addCloseEvents();
    			}
    			////////////////////////////////////////////////////
    			//Creating popup
    			var popup = document.createElement('div');
    			document.body.appendChild(popup);
    			//
    			this._popupGradientChipBase = ColorPanelPopup.create();
    			this._popupGradientChipBase.element = popup;
    			this._popupGradientChipBase.isPopupChip = true;
    			if (e._event.srcElement.props) {
    				this._popupGradientChipBase.props = e._event.srcElement.props;
    			} else {
    				this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, history: false};
    			}
    			//
    			if (this._popupGradientChipBase.props.offset) {
			    	this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupGradientChipBase.props.offset)+'px';
			       	this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px';
		     	} else {
			        this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px';
			        this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px';
		        }
		        //
		        this._popupGradientChipBase.props.source = e._event.srcElement;
		        //
    			this._popupGradientChipBase.colorManager = ColorModel.create();
    			this._popupGradientChipBase.colorManager.input = 'chip';
    			this._popupGradientChipBase.colorManager.alpha = 1;
    			//
    			this._popupGradientChipBase.addEventListener('change', this, false);
		    	this._popupGradientChipBase.addEventListener('changing', this, false);
    			//
    			this._popupGradientChipBase.needsDraw = true;
    			this._popupGradientChipBase.addEventListener('firstDraw', this, false);
        	}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    hideGradientChipPopup: {
    	value: function () {
    		//
    		if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
    			//
    			this._popupGradientChipBase.popup.removeEventListener('didDraw', this, false);
    			//TODO: Add correct input setback
    			if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput && (!this._popupChipBase || (this._popupChipBase && !this._popupChipBase.opened))) {
    				this.colorManager.input = this.application.ninja.colorController.colorView.previousInput;
    			}
    			//
                this.application.ninja.popupManager.removePopup(this._popupGradientChipBase.popup.element);
	    		this._popupGradientChipBase.opened = false;
	    		//TODO: Fix HACK of removing popup
	    		this._popupGradientChipBase.popup.base.destroy();
	    		this._popupGradientChipBase.popup = null;
	    	}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //Reworking logic, firstDraw bubbles up, so target must be checked
    handleFirstDraw: {
    	value: function (e) {
    		if (e._target._element.className === 'cpp_popup') {
    			e._target.removeEventListener('firstDraw', this, false);
	    		//Creating an instance of the popup and sending in created color popup content
				e._target.popup = this.application.ninja.popupManager.createPopup(e._target.element, {x: e._target.props.x, y: e._target.props.y}, {side: e._target.props.side, align: e._target.props.align});
				//Displaying popup once it's drawn
				e._target.popup.addEventListener('firstDraw', this, false);
				//Hiding popup while it draws
				e._target.popup.element.style.opacity = 0;
				//Storing popup for use when closing
				e._target.popup.base = e._target;
			} else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') {
				if (!e._target.base.isPopupChip) {
					this._colorPopupDrawing = false;
				} else  if (e._target.base.props && e._target.base.props.gradientPopup) {
					this._colorGradientPopupDrawing = false;
				} else {
					this._colorChipPopupDrawing = false;
				}
	    		//
    			e._target.base.popup.removeEventListener('firstDraw', this, false);
    			//Fades in with CSS transition
				e._target.base.popup.element.style.opacity = 1;
				//Popup was added, so it's opened
		        e._target.base.opened = true;
		        //
		        if (e._target.base.props && e._target.base.props.source) {
		        	//
			        var cbtn = e._target.base.props.source, color, hsv;
			        //
			        if (cbtn.colorMode === 'rgb') {
		        		//
		        		if (cbtn.colorValue && !isNaN(cbtn.colorValue.r)) {
		        			color = cbtn.colorValue;
		        		} else if (cbtn.colorValue && cbtn.colorValue.color){
	        				color = cbtn.colorValue.color;
	        			} else {
	        				return;
	        			}
	        			//
	        			hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b);
	        		} else if (cbtn.colorMode === 'hsl') {
	        			//
	        			if (cbtn.colorValue && !isNaN(cbtn.colorValue.h)) {
	       					color = cbtn.colorValue;
		        		} else if (cbtn.colorValue && cbtn.colorValue.color){
	        				color = cbtn.colorValue.color;
	        			} else {
	        				return;
	        			}
	        			//
	        			color = this.colorManager.hslToRgb(color.h/360, color.s/100, color.l/100);
	        			//
	        			hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b);
	        		}
	        		//
	        		if (color && color.a && !e._target.base.props.panel) {
	        			e._target.base.colorManager.alpha = color.a;
		        		e._target.base._components.combo.slider.value = color.a*100;
	        		} else if (!e._target.base.props.panel){
		        		e._target.base._components.combo.slider.value = 100;
	        		}
	        		//
	        		if (hsv) {
		        		hsv.wasSetByCode = false;
	        			hsv.type = 'change';
	        			e._target.base._components.wheel.value = hsv;
	        		} else {
	        			e._target.base._components.hex.value = null;
		        		e._target.base.colorManager.applyNoColor(false);
	        		}
		        }
	        }
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    handleChange: {
    	value: function (e) {
    		if (this._popupChipBase && this._popupChipBase.opened && (!this._popupGradientChipBase || (this._popupGradientChipBase && !this._popupGradientChipBase.opened))) {
    			if (e._event.hsv) {
    				this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
    				this.colorChipChange(e);
    			} else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
	    			if (e._event.gradient && !e._event.wasSetByCode) {
	    				//
		    			this._popupChipBtn.color('gradient', e._event.gradient);
		    			this._popupChipBase._components.hex.value = null;
	    			} else if (!isNaN(e._target._xStart) && !e._event.wasSetByCode) {
	    				if (!isNaN(e._target._numValue)) {
		    				this._popupChipBase.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false};	
	    				}
	    				this.colorChipChange(e);
	    			} else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'nocolor')) {
		    			this.colorChipChange(e);	
	    			} else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
		    			this.colorChipChange(e);
	    			}
    			}
    			return;
    		} else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
    			if (e._event.hsv) {
    				this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
    				this.colorGradientChipChange(e);
    			} else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
	    			if (e._event.gradient && !e._event.wasSetByCode) {
			    		this._popupChipBtn.color('gradient', e._event.gradient);
			    		this._popupChipBase._components.hex.value = null;
			    	} else if (!isNaN(e._target._xStart) && !e._event.wasSetByCode) {
    					if (!isNaN(e._target._numValue)) {
		    				this._popupGradientChipBase.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false};	
	    				}
    					this.colorGradientChipChange(e);
    				} else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
		    			this.colorGradientChipChange(e);
	    			}
    			} else {
    				if (!isNaN(e._target._xStart) && !e._event.wasSetByCode) {
    					if (!isNaN(e._target._numValue)) {
		    				this._popupGradientChipBase.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false};	
	    				}
    					this.colorGradientChipChange(e);
    				} else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
		    			this.colorGradientChipChange(e);
	    			}
			    }
    			return;
    		}
    		//
    		if (!e._event.wasSetByCode) {
    			if (e._event.hsv) {
    				if(e._target._colorBarCanvas && this.colorManager.input !== 'chip') {
    					this.application.ninja.colorController.colorPopupManager.hideColorPopup();
    				}
	    			//
	    			if (this.colorManager.input !== 'chip') {
    					this.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
    				} else {
    					//this.colorChipChange(e);
    				}
    			} else if (!isNaN(e._target._xStart) && !isNaN(e._target._numValue) && !e._event.wasSetByCode) {
	    			this.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false};
	    		}
    		}
    	}
    },
    ////////////////////////////////////////////////////////////////////
    //
    handleChanging: {
    	value: function (e) {
    		if (!this._popupBase || !this._popupBase.opened) return;
    		if (e._event.hsv) {
    			//
    			if(e._target._colorBarCanvas && this.colorManager.input !== 'chip') {
    				this.application.ninja.colorController.colorPopupManager.hideColorPopup();
    			}
    			//Converting color to RGB to update buttons background colors (affecting only view)
				var color = this.colorManager.hsvToRgb(e._event.hsv.h/(Math.PI*2), e._event.hsv.s, e._event.hsv.v), i, input = this.colorManager.input;
				
				if (input === 'chip') {
					var ctx, cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0];
    				//if (cvs && color) {
		    		if (cvs) {
	    				ctx = cvs.getContext('2d');
    					ctx.clearRect(0, 0, cvs.width, cvs.height);
		    			ctx.beginPath();
    					ctx.lineWidth = 2;
	    				ctx.strokeStyle = "#666";
		    			ctx.moveTo(0, 0);
	  					ctx.lineTo(cvs.width, 0);
	  					ctx.lineTo(cvs.width, cvs.height);
			  			ctx.lineTo(0, cvs.height);
	  					ctx.lineTo(0, 0);
						ctx.stroke();
						ctx.beginPath();
    					ctx.lineWidth = 2;
    					ctx.strokeStyle = "#333";
		    			ctx.moveTo(2, 2);
				  		ctx.lineTo(cvs.width-2, 2);
	  					ctx.lineTo(cvs.width-2, cvs.height-2);
				 		ctx.lineTo(2, cvs.height-2);
	  					ctx.lineTo(2, 1);
						ctx.stroke();
					}
					//Updating background color
    				if (this.colorManager.alpha && this.colorManager.alpha.value) {
	    				this.application.ninja.colorController.colorView.currentChip.style.backgroundImage = 'none';
	    				this.application.ninja.colorController.colorView.currentChip.style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha.value+')';
	    			} else {
	    				this.application.ninja.colorController.colorView.currentChip.style.backgroundImage = 'none';
	    				this.application.ninja.colorController.colorView.currentChip.style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha+')';
	    			}
	    			return;
				}
    			//Applying color to all buttons in array
    			for(i=0; this.application.ninja.colorController.colorView._buttons[input][i]; i++) {
    				//TODO: Remove this and combine to single method for live updating colors
    				//Combines with drawing routing in 'selectInputHighlight'
    				var ctx, cvs = this.application.ninja.colorController.colorView._buttons[input][i].getElementsByTagName('canvas')[0];
    				if (cvs) {
	    				ctx = cvs.getContext('2d');
    					ctx.clearRect(0, 0, cvs.width, cvs.height);
    					ctx.beginPath();
    					ctx.lineWidth = 2;
	    				ctx.strokeStyle = "#666";
    					ctx.moveTo(0, 0);
	  					ctx.lineTo(cvs.width, 0);
	  					ctx.lineTo(cvs.width, cvs.height);
	  					ctx.lineTo(0, cvs.height);
		  				ctx.lineTo(0, 0);
						ctx.stroke();
						ctx.beginPath();
    					ctx.lineWidth = 2;
    					ctx.strokeStyle = "#333";
	    				ctx.moveTo(2, 2);
		  				ctx.lineTo(cvs.width-2, 2);
	  					ctx.lineTo(cvs.width-2, cvs.height-2);
	 					ctx.lineTo(2, cvs.height-2);
	  					ctx.lineTo(2, 1);
						ctx.stroke();
    				}
    				//Updating background color
    				if (this.colorManager.alpha && this.colorManager.alpha.value) {
	    				this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundImage = 'none';
	    				this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha.value+')';
	    			} else {
	    				this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundImage = 'none';
	    				this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha+')';
	    			}
    			}
    		}
    	}
    }
    ////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////
});