var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;

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

    hasTemplate:{
        value: true
    },

    _trackID:{
        value:null,
        writable:true,
        enumerable:true
    },

    trackID:{
        get:function(){
            return this._trackID;
        },
        set:function(value){
            this._trackID = value;
        }
    },

    _spans:{
        serializable:true,
        value:[]
    },

    spans:{
        serializable:true,
        get:function () {
            return this._spans;
        },
        set:function (newVal) {
            this._spans = newVal;
        }
    },

    _spanRepetition:{
        serializable:true,
        value:null
    },

    spanRepetition:{
        serializable:true,
        get:function () {
            return this._spanRepetition;
        },
        set:function (newVal) {
            this._spanRepetition = newVal;
        }
    },

    trackDuration:{
        value:0
    },

    currentKeyframe:{
        value:0
    },

    currentMillisecClicked:{
        value: 0
    },

    isAnimated:{
        value:false
    },

    animatedElement:{
        value:null
    },

    ninjaStylesContoller:{
        value: null
    },

    //TEMP
    keyFrames:{
        value:[],
        writable:true,
        enumerable:true
    },
    
    prepareForDraw: {
        value: function() {
            this.keyFrames = new Array();
            this.spans = new Array();
            this.track_lane.addEventListener("click", this, false);
            this.addNewEndPoint(0);

            this.ninjaStylesContoller = this.application.ninja.stylesController;
        }
    },

    handleNewTween:{
        value: function(event){
            var newTween = Tween.create();
        }
    },

    handleClick:{
        value:function (ev) {
            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
            this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left));

            // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
            // This needs to move to a keyboard shortcut that is TBD
            if (ev.shiftKey) {
                var prevFrame = this.keyFrames[this.keyFrames.length - 1][0];
                if (ev.offsetX > prevFrame) {
                    this.addNewEndPoint(ev.offsetX);
                    this.currentMillisecClicked = currentMillisecPerPixel * ev.offsetX;
                } else {
                    this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left));
                    this.splitSpan(ev);
                }
            }

            console.log("currentMillisecClicked = " + this.currentMillisecClicked);
        }
    },

    addNewEndPoint : {
        value: function(xpos){
            var newKeyFrame = document.createElement("div");
            newKeyFrame.className = "keyframe";
            newKeyFrame.style.left = (xpos - 2) + "px";
            this.track_lane.appendChild(newKeyFrame);

            if(xpos > 0){
                var prevFrame = this.keyFrames[this.keyFrames.length - 1][0];

                var newDefaultSpan = document.createElement("div");
                newDefaultSpan.className = "defaultSpan";
                newDefaultSpan.style.left = prevFrame + "px";
                newDefaultSpan.style.width = (xpos - prevFrame) + "px";
                this.track_lane.appendChild(newDefaultSpan);

                this.spans.push(newDefaultSpan);
            }

            var keyframePercent = this.currentMillisecClicked / this.application.ninja.timeline.totalDuration;
            var keyframeProperties;

            //console.log(keyframePercent);

            this.keyFrames.push([xpos, keyframePercent, keyframeProperties]);
            //console.log(this.keyFrames)
        }
    },

    splitSpan: {
        value: function(ev){
            console.log("splitting span at span offsetX: " + ev.offsetX);

            //this.track_lane.removeChild(ev.target);
        }
    },

    updateKeyframePercents:{
        value:function(){
            
        }
    },

    addAnimationRuleToElement:{
        value: function(){

        }
    },

    calculateKeyframePercent:{
        value:function() {

        }
    },

    buildKeyframesString:{
        value:function(){

        }
    }
});