/* <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,
	Popup = require("montage/ui/popup/popup.reel").Popup;

var EasingMenu = exports.EasingMenu = Montage.create(Component, {

    hasTemplate:{
        value: true
    },

	/* Begin: Models */
	
	// popup: the initialized component.
    _popup: {
		value: null
    },
    popup: {
    	get: function() {
    		return this._popup;
    	},
    	set: function(newVal) {
    		this._popup = newVal
    	}
    },
    
    // callingComponent: pointer to the span that called for the menu
    _callingComponent: {
    	value: null
    },
    callingComponent: {
    	get: function() {
    		return this._callingComponent;
    	},
    	set: function(newVal) {
    		this._callingComponent = newVal;
    	}
    },
    
    // anchor: pointer to the anchoring element
    _anchor: {
    	value: null
    },
    anchor: {
    	get: function() {
    		return this._anchor;
    	},
    	set: function(newVal) {
    		this._anchor = newVal;
    	}
    },
    
    
    _top: {
    	value: null
    },
    top: {
    	get: function() {
    		return this._top;
    	},
    	set: function(newVal) {
    		this._top = newVal;
    	}
    },
    _left: {
    	value: null
    },
    left: {
    	get: function() {
    		return this._left;
    	},
    	set: function(newVal) {
    		this._left = newVal;
    	}
    },
    
    // currentChoice: The data attribute of the current choice
    _currentChoice: {
    	value: "none"
    },
    currentChoice: {
    	get: function() {
    		return this._currentChoice;
    	},
    	set: function(newVal) {
    		this._currentChoice = newVal;
    	}
    },
    
    _isShown: {
    	value: false
    },
    
    /* End: Models */
    
    /* Begin: Draw Cycle */
    willDraw: {
    	value: function() {
    		this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
    		document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
    	}
    },
    
    draw: {
    	value: function() {
    		// Update the selection classes.
			var easingSelected = this.element.querySelector(".easing-selected");
			if (easingSelected !== null) {
				easingSelected.classList.remove("easing-selected");
			}
            var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
            if (dataEl !== null) {
            	dataEl.classList.add("easing-selected");
            }
    	}
    },
    didDraw: {
    	value: function() {
    	}
    },
	/* End Draw Cycle */
    
    /* Begin: Controllers */
	show: {
		value: function() {
			// Initialize the popup if it hasn't already been done
            if (this.popup == null) {
            	this.popup = Popup.create();
	            this.popup.modal = false;
	            this.popup.content = EasingMenu.create();
            }
            
            // Show the popup
            this.popup.anchor = this.anchor;
            var position = {};
            position.top = this.top;
            position.left = this.left;
            this.popup.position = position;
            this.popup.show();
            this._isShow = true;

            // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
            this.popup.content.needsDraw = true;
		}
	},
	handleEasingChoicesClick: {
    	value: function(event) {
    		event.stopPropagation();

			// Un-highlight the old choice and highlight the new choice
			var easingSelected = this.element.querySelector(".easing-selected");
			if (easingSelected !== null) {
				easingSelected.classList.remove("easing-selected");
			}
    		event.target.classList.add("easing-selected");
    		
    		// Set the easing in the span that called us
    		this.callingComponent.easing = event.target.dataset.ninjaEase;
    		
    		// Hide the menu.
    		this.popup.hide();
    		this._isShow = false;
    	}
   },
	handleDocumentScroll: {
		value: function(event) {
			if (this._isShow = true) {
				this.popup.hide();
			}
		}
	}
    
    /* End: Controllers */
    
});