/* <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,
    nj        = require("js/lib/NJUtils").NJUtils;


exports.ComputedStyleSubPanel = Montage.create(Component, {
    groupDropDown:      { value: null },
    computedListEl:     { value: null },
    searchField:        { value: null },

    templateDidLoad : {
        value : function() {
            ///// Set current filter group
            this._group = this.groupDropDown.value;
            ///// Set up event listeners
            this.groupDropDown.addEventListener('change', this);
            this.searchField.addEventListener('input', this);
        }
    },
    // prepareForDraw : {
    //    value: function() {
    //             
    //    }
    // },
    willDraw : {
        value: function() {
            if(this._declaration) {
            
                var group = this.staticGroupingMap[this._group],
                    matchedInGroup, elementList;
            
                if(this._group === 'all' && !group) {
                    group = this.staticGroupingMap['all'] = nj.toArray(this._declaration).sort();
                }
            
                ///// Filter group to show only the styles that match search filter
                matchedInGroup = group.filter(function(item) {
                    return (item.indexOf(this._filter) > -1);
                }, this);
                
                this._elementList = matchedInGroup.map(function(propName) {
                    var propEl = nj.make('dt'),
                        valEl  = nj.make('dd'),
                        contEl = nj.make('div');

                    propEl.appendChild(nj.textNode(propName));
                    propEl.title = propName;
                    
                    valEl.appendChild(nj.textNode(this._declaration.getPropertyValue(propName)));
                    valEl.title = this._declaration.getPropertyValue(propName);
                    
                    contEl.appendChild(propEl);
                    contEl.appendChild(valEl);
                
                    return contEl;
                }, this);
            
                /*if(matchedInGroup.length) {
                
                } else {
                
                }*/
            }
        }
    },
    // The draw function appends the element list to the dom
    draw: {
        value: function() {
            if(this._elementList) {
                this.clearList();
                ///// Append style elements to the list container
                this._elementList.forEach(function(el) {
                    this.computedListEl.appendChild(el);
                }, this);   
            }
        }
    },
    clearList : {
        value: function() {
            nj.empty(this.computedListEl);
        }
    },
    ///// Drop down has changed values
    handleChange : {
        value: function(e) {
            this._group = this.groupDropDown.value;
            this.needsDraw = true;
        }
    },
    ///// Text input has changed values
    handleInput : {
        value : function(e) {
            this._filter = this.searchField.value.trim();
            this.needsDraw = true;
        }
    },
    // Publicly accessible list of computed styles
    declaration : {
        get: function() {
            return this._declaration;
        },
        ////// Accepts a CSSStyleDeclaration object, or dom element
        set: function(source) {
            var declaration, styles;
            if(source.constructor.name === 'CSSStyleDeclaration') {
                declaration = this._declaration = source;
            } else {
                ///// Get computed style of passed in node
                declaration = this._declaration = source.ownerDocument.defaultView.getComputedStyle(source);
            }
            
            this.needsDraw = true;
        }
    },
    ///// Renders the styles for the current node
    show : {
        value : function() {
            this.element.classList.remove(this._cssClasses.hide);
        }
    },
    hide : {
        value : function() {
            this.element.classList.add(this._cssClasses.hide);
        }
    },
    ///// Private
    //// Stores the current CSSDeclaration object returned by getComputedStyle
    //// which is needed to get property values
    _declaration : {
        enumerable: false,
        value : null
    },
    ///// List of elements to append to style list
    _elementList : {
        value: null
    },
    ///// Group selected in drop down
    _group : {
        enumerable: false,
        value : null
    },
    ///// Filter string entered in search input
    _filter : {
        enumerable: false,
        value : ''
    },
    ///// CSS classes used in component
    _cssClasses : {
        value : {
            hide : 'nj-css-panel-hide'
        }
    },
    ///// List of css properties within specified catagories
    staticGroupingMap : {
        value : {
            'all' : null,
            'background' : [
                'background-color', 'background-image', 'background-repeat', 'background-position',
                'background-attachment'
            ],
            'summary' : [
                'width', 'height', 'color', 'font-family', 'font-size', 'display'
            ],
            'dimensions' : [
                'width', 'height', 'top', 'right', 'bottom', 'left',
                'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
                'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 
                'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
            ],
            'border' : [
                'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
                'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
                'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
            ],
            'font' : [
                'font-family', 'font-size', 'font-weight', 'font-style', 'color', 'text-transform', 
                'text-decoration', 'letter-spacing', 'word-spacing', 'line-height', 'text-align',
                'vertical-align', 'direction'
            ],
            'layout' : [
                'position', 'display', 'visibility', 'z-index', 'overflow-x', 'overflow-y',
                'white-space', 'clip', 'float', 'clear'
            ]
        }
    }
});