var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;

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

    hasTemplate:{
        value: true
    },

    _position:{
        value:0
    },

    position:{
        serializable:true,
        get:function(){
            return this._position;
        },
        set:function(value){
            this._position = value;
        }
    },

    _id:{
        value:0
    },

    id:{
        serializable:true,
        get:function () {
            return this._id;
        },
        set:function (value) {
            this._id = value;
        }
    },

    _timelinePosition:{
        value:0
    },

    timelinePosition:{
        serializable:true,
        get:function () {
            return this._timelinePosition;
        },
        set:function (value) {
            this._timelinePosition = value;
        }
    },

    _containingTrack:{
        value:{}
    },

    containingTrack:{
        serializable:true,
        get:function () {
            return this._containingTrack;
        },
        set:function (value) {
            this._containingTrack = value;
        }
    },

    _animatedProperties:{
        value:[]
    },

    animatedProperties:{
        serializable:true,
        get:function () {
            return this._animatedProperties;
        },
        set:function (value) {
            this._animatedProperties = value;
        }
    },

    containingSpan:{
        value: null
    },

    prepareForDraw:{
        value:function(){
            this.tweenkeyframe.addEventListener("click", this, false);
            this.animatedProperties = new Array();

            // should element mediator be used here?
            this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
            this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
        }
    },

    draw:{
        value:function(){
            this.tweenkeyframe.style.left = (this.position - 3) + "px";
        }
    },

    handleElementChange:{
        value:function (event) {

            if(event.detail.source && event.detail.source !== "keyframe") {

                var items = this.application.ninja.selectedElements;
                this.containingSpan.highlightSpan();
                if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){
                    // update this keyframe's animated properties from the item[0] element props
                    this.animatedProperties["top"] = items[0]._element.offsetTop;
                    this.animatedProperties["left"] = items[0]._element.offsetLeft;
                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
                    this.containingTrack.updateKeyframeRule();
                }
            }
        }
    },

    deselect:{
        value:function(){
            this.tweenkeyframe.classList.remove("keyframeSelected");

            this.eventManager.removeEventListener("elementChange", this, false);
        }
    },

    select:{
        value:function(){
            this.application.ninja.timeline.deselectKeyframes();
            this.tweenkeyframe.classList.add("keyframeSelected");
            this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
            this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
            this.application.ninja.timeline.selectedKeyframes.push(this);

            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
            var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
            this.application.ninja.timeline.updateTimeText(currentMillisec);

            var currentTop = this.animatedProperties["top"] + "px";
            var currentLeft = this.animatedProperties["left"] + "px";

            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");

            // turn on element change event listener
            this.eventManager.addEventListener("elementChange", this, false);
        }
    },

    handleClick:{
        value:function(ev){
            this.select();
        }
    }
});