/* <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;

exports.StyleSheet = Montage.create(Component, {

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

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

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

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

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

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

    _translateDistance: {
        value: null
    },

    prepareForDraw : {
        value: function() {
            this.nameText.element.addEventListener('click', this, false);
        }
    },

    willDraw : {
        value: function() {
            if(this.editing) {
                document.body.addEventListener('mousedown', this, false);
                this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth;

            } else {
                document.body.removeEventListener('mousedown', this, false);
            }
        }
    },
    draw : {
        value: function() {
            var transStr = '-webkit-transform';

            this.mediaInput.value = this._source.media.mediaText;

            if(this.editing) {
                this.editView.classList.add('expanded');
                this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
            } else {
                this.editView.classList.remove('expanded');
                this.editView.style.removeProperty(transStr);
            }

            if(this.default) {
                this._element.classList.add('default-style-sheet');
            } else {
                this._element.classList.remove('default-style-sheet');
            }

            if(this.dirty) {
                this.nameText.element.classList.add('ss-dirty');
            } else {
                this.nameText.element.classList.remove('ss-dirty');
            }

            if(this.disabled) {
                this.element.classList.add('ss-disabled');
            } else {
                this.element.classList.remove('ss-disabled');
            }

        }
    },

    /* ------ Events------ */

    handleMousedown : {
        value: function(e) {
            var nonBlurringElements = [
                this.editView,
                this.deleteButton.element,
                this.disableButton.element];

            if(nonBlurringElements.indexOf(e.target) === -1) {
                this.editing = false;
            }
        }
    },

    handleClick : {
        value: function(e) {
            this.parentComponent.parentComponent.defaultStyleSheet = this.source;
        }
    },

    handleEditButtonAction: {
        value: function(e) {
            this.editing = true;
        }
    },

    handleImportButtonAction: {
        value: function(e) {
            e.stopPropagation();
        }
    },

    handleDisableButtonAction: {
        value: function(e) {
            e.stopPropagation();
            this.disabled = !this.disabled;
        }
    },

    handleDeleteButtonAction : {
        value: function(e) {
            e.stopPropagation();
            this.parentComponent.parentComponent.handleDeleteAction(this);
        }
    },

    /* ------ State properties ------ */

    _editing : {
        value: null
    },
    editing : {
        get: function() {
            return this._editing;
        },
        set: function(enterEditingMode) {
            this._editing = enterEditingMode;
            this.needsDraw = true;
        }
    },

    _name: {
        value: "Style Tag",
        distinct: true
    },
    name : {
        get: function() {
            return this._name;
        },
        set: function(text) {
            this._name = text;
        }
    },
    _dirty : {
        value: null
    },
    dirty : {
        get: function() {
            return this._dirty;
        },
        set: function(value) {
            if(value === this._dirty) { return false; }

            this._dirty = value;
            this.needsDraw = true;
        }
    },

    _readOnly : { value: null },
    readOnly : {
        get: function() {
            return this._readOnly;
        },
        set: function(isReadOnly) {
            this._readOnly = isReadOnly;
            this.needsDraw = true;
        }
    },

    _default : { value: null },
    default : {
        get: function() {
            return this._default;
        },
        set: function(value) {
            this._default = value;
            this.needsDraw = true;
        }
    },

    _disabled : {
        value: null
    },
    disabled: {
        get: function() {
            return this._disabled;
        },
        set: function(disable) {
            var label = (disable) ? "Enable" : "Disable";
            this._source.ownerNode.disabled = disable;
            this.disableButton.label = label;

            this._disabled = disable;
            this.needsDraw = true;
        }
    },

    external : {
        value: null
    },

    _source : {
        value: null
    },
    source : {
        get: function() {
            return this._source;
        },
        set: function(sheet) {
            if(!sheet || sheet === this._source) { return; }

            this._extractData(sheet.ownerNode);
            this._source = sheet;
        }
    },

    _extractData : {
        value: function(sheetNode) {
            var data = sheetNode.dataset, key;

            for(key in data) {
                this[key] = data[key];
            }
        }
    },

    /* ------ Data Attribute Properties ------ */

    _ninjaExternalUrl: { value: null },
    ninjaExternalUrl : {
        get: function() { return this._ninjaExternalUrl; },
        set: function(url) {
            this.external = true;
            this._ninjaExternalUrl = url;
        }
    },

    _ninjaFileName: { value: null },
    ninjaFileName : {
        get: function() { return this._ninjaFileName; },
        set: function(fileName) {
            this.name = fileName;
            this._ninjaFileName = fileName;
        }
    },

    _ninjaFileUrl: { value: null },
    ninjaFileUrl : {
        get: function() { return this._ninjaFileUrl; },
        set: function(fileUrl) {
            this._ninjaFileUrl = fileUrl;
        }
    },

    _ninjaFileReadOnly: { value: null },
    ninjaFileReadOnly : {
        get: function() { return this._ninjaFileReadOnly; },
        set: function(isReadOnly) {
            this._ninjaFileReadOnly = this.readOnly = isReadOnly === "true";
        }
    },

    _ninjaUri: { value: null },
    ninjaUri : {
        get: function() { return this._ninjaUri; },
        set: function(uri) {
            this._ninjaUri = uri;
        }
    }
});