// This is just here to tell JS lint that we need to use a global variable
/*global TVI, loadFirebugConsole, document, alert, console, window $ */

/*
    TVI Framework
    Version 1.0
    Copywrite 2009 TVI Design
    Last Updated: 11/01/2010
    
    Contents:
        TVI.Components.Button
*/

TVI.Components.Button = function() {

    /* Private */

    /* Properties */

    var cmp = {};
    var componentIndex = -1;





    /* Methods */

    var init = function() {
    
        //add to components array
        componentIndex = TVI.Components.add({
        
            type: 'button',
            selector: '.TVI-button',
            setup: setup,
            create: create,
            layout: layout
        
        });
        
    };
    
    
    
    
    
    var setup = function(container){
    
        //add data to elements
        container.find('.TVI-button').each(function(){
        
            $(this).data('componentIndex', componentIndex);
        
        });
            
    };



    var create = function(element) {

        // Check if disabled for IE6
        if (TVI.Components.Button.disableInIE6 == true && navigator.userAgent.indexOf('MSIE 6') > 0) {
            return;
        }

        // Finds all buttons within the supplied root element and create them

        var linkElement = element.html();
        var buttonElement = element;
        var fixedWidth = false;
        var totalWidth = buttonElement.width();
        var middleSectionWidth = totalWidth;
        var middleClass = ''
        var widthUsed = 0;
        var buttonStyle = 'defaultStyle';
        var iconStyle = '';
        var buttonLeftHTML = '';
        var buttonMiddleHTML = '';
        var buttonRightHTML = '';
        var buttonHTML = '';
        

        // Get a list of the classes used on the main element
        var classes = buttonElement.attr('class').split(' ');
        var classesLength = classes.length;

        //loop through classes
        for (i = 0; i < classesLength; i++) {
        
            // Check to see if we need to maintain the width of the button
            if (classes[i] === 'TVI-fixedWidth') {
            
                fixedWidth = true;
                
                element.data('fixedWidth', true);
                
            }
            
            // Check to see if we are not using the default style
            if (classes[i].substring(0, 17) == 'TVI-button-style-') {
                buttonStyle = classes[i].substring(17);
            }
            
        }

        // Create a shortcut to the button style
        buttonStyle = TVI.Components.Button.styles[buttonStyle];


        // Add hover and active classes to button
        buttonElement.bind("mouseenter", function() {
            $(this).addClass(buttonStyle.hoverClass);
        });
        buttonElement.bind("mouseleave", function() {
            $(this).removeClass(buttonStyle.hoverClass);
            $(this).removeClass(buttonStyle.activeClass);
        });
        buttonElement.bind("mousedown", function() {
            $(this).addClass(buttonStyle.activeClass);
        });
        buttonElement.bind("mouseup", function() {
            $(this).removeClass(buttonStyle.activeClass);
        });


        // Check to see if there is an icon on the left
        if (buttonElement.hasClass('TVI-button-iconLeft')) {

            // Work out which icon to use
            for (i = 0; i < classesLength; i++) {
                if (classes[i].substring(0, 21) == 'TVI-button-iconStyle-') {
                    iconStyle = classes[i].substring(21);
                }
            }
            buttonLeftHTML = '<span class="TVI-button-iconLeft sp pngFix"><span class="pngFix ' + buttonStyle.iconClass + ' ' + iconStyle + '"></span></span>'
            widthUsed += buttonStyle.leftIconWrapperWidth + buttonStyle.leftPaddingWithIcon;
            middleClass = 'TVI-button-middle-iconLeft '
        }
        else {
            buttonLeftHTML = '<span class="TVI-button-left sp pngFix"></span>'
            widthUsed += buttonStyle.leftEndWidth + buttonStyle.leftPadding;
        }

        // Check to see if there is an icon on the right
        if (buttonElement.hasClass('TVI-button-iconRight')) {

            // Work out which icon to use
            if (iconStyle == '') {
                for (i = 0; i < classesLength; i++) {
                    if (classes[i].substring(0, 21) == 'TVI-button-iconStyle-') {
                        iconStyle = classes[i].substring(21);
                    }
                }
            }

            buttonRightHTML = '<span class="TVI-button-iconRight sp pngFix"><span class="pngFix ' + buttonStyle.iconClass + ' ' + iconStyle + '"></span></span>'
            widthUsed += buttonStyle.rightIconWrapperWidth + buttonStyle.rightPaddingWithIcon;
            middleClass = 'TVI-button-middle-iconRight '
        }
        else {
            buttonRightHTML = '<span class="TVI-button-right sp pngFix"></span>';
            widthUsed += buttonStyle.rightEndWidth + buttonStyle.rightPadding;
        }

        // Resize the middle section if we're using a fixed width
        if (fixedWidth == true) {
            middleSectionWidth = totalWidth - widthUsed;
            buttonMiddleHTML = '<span class="TVI-button-middle ' + middleClass + 'sp" style="width:' + middleSectionWidth + 'px;"><span class="TVI-button-text">' + buttonElement.html() + '</span></span>';
        }
        else {
            buttonMiddleHTML = '<span class="TVI-button-middle ' + middleClass + 'sp"><span class="TVI-button-text">' + buttonElement.html() + '</span></span>';
        }


        // Inject the HTML
        buttonHTML = '<span class="clearfix">' + buttonLeftHTML + buttonMiddleHTML + buttonRightHTML + '</span>';
        buttonElement.html(buttonHTML);

        // Tell the system it doesn't need to be created again.
        element.addClass('TVI-created');

    };





    var layout = function(element) {
    
        
    
        //don't resize if not fixed width
        var fixedWidth = element.data('fixedWidth') !== undefined ? element.data('fixedWidth') : false;
        
        if (!fixedWidth){
            return;
        }
        
        // Check if disabled for IE6
        if (TVI.Components.Button.disableInIE6 == true && navigator.userAgent.indexOf('MSIE 6') > 0) {
            return;
        }

        // Finds all buttons within the supplied root element and create them
        var linkElement = element.html();
        var buttonElement = element;        
        var totalWidth = buttonElement.width();
        var middleSectionWidth = totalWidth;
        var middleClass = ''
        var widthUsed = 0;
        var buttonStyle = 'defaultStyle';
        var iconStyle = '';
        

        // Get a list of the classes used on the main element
        var classes = buttonElement.attr('class').split(' ');
        var classesLength = classes.length;

        //loop through classes
        for (i = 0; i < classesLength; i++) {
            
            // Check to see if we are not using the default style
            if (classes[i].substring(0, 17) == 'TVI-button-style-') {
                buttonStyle = classes[i].substring(17);
            }
            
        }        

        // Create a shortcut to the button style
        buttonStyle = TVI.Components.Button.styles[buttonStyle];


        // Check to see if there is an icon on the left
        if (buttonElement.hasClass('TVI-button-iconLeft')) {            
            widthUsed += buttonStyle.leftIconWrapperWidth + buttonStyle.leftPaddingWithIcon;            
        }
        else {
            widthUsed += buttonStyle.leftEndWidth + buttonStyle.leftPadding;
        }

        // Check to see if there is an icon on the right
        if (buttonElement.hasClass('TVI-button-iconRight')) {
            widthUsed += buttonStyle.rightIconWrapperWidth + buttonStyle.rightPaddingWithIcon;            
        }
        else {
            widthUsed += buttonStyle.rightEndWidth + buttonStyle.rightPadding;
        }
        
        middleSectionWidth = totalWidth - widthUsed;
        
        element.find('.TVI-button-middle').width(middleSectionWidth);

    };





    /* Public */

    TVI.apply(cmp, {

        /* Properties */
        
        disableInIE6: false,

        styles: {
            defaultStyle: {
                leftEndWidth: 11,
                leftIconWrapperWidth: 20,
                leftPadding: 0,
                leftPaddingWithIcon: 9,
                rightEndWidth: 11,
                rightIconWrapperWidth: 20,
                rightPadding: 0,
                rightPaddingWithIcon: 9,
                iconClass: 'icon16',
                hoverClass: 'buttonHover',
                activeClass: 'buttonActive'
            }
        },


        /* Methods */

        create: function(element) {

            create(element);

        },

        layout: function(element) {

            layout(element);

        }

    });

    TVI.ready(init);


    return cmp;

} ();