/*
    TVI Framework
    Version 1.0
    Copywrite 2010 TVI Design
    Last Updated: 04/05/2010
    
    Contents:
        TVI.Components.DatePicker
*/

TVI.Components.DatePickers = function() {

    /* Private */

    /* Properties */

    var cmp = {};
    var componentIndex = -1;
    var selecting = {};
    var currentInput = null;
    var currentCalendar = null;





    /* Methods */

    var init = function() {

        //add to components array
        componentIndex = TVI.Components.add({

            type: 'datePicker',
            selector: '.TVI-datePicker',
            setup: setup,
            create: create,
            layout: layout

        });

        //apply hover states
        TVI.event('.TVI-datePicker-control', 'mouseenter', function(){
        
            $(this).addClass('TVI-datePicker-hover');
        
        });
        TVI.event('.TVI-datePicker-control', 'mouseleave', function(){
        
            $(this).removeClass('TVI-datePicker-hover');
        
        });
        
    };





    var setup = function(container) {
    
        //add data to elements
        container.find('.TVI-datePicker').each(function() {

            $(this).data('componentIndex', componentIndex);

        });

    };





    var create = function(element) {
        
        //ignore if already created
        if (element.hasClass('TVI-datePicker-created')){ return; }
        
        
        var elementID = element.attr('id');

        var calendarID = elementID + '-calendar';
        
        //get textbox element
        var inputEl = element.find('INPUT[type=text]');


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

        for (i = 0; i < classesLength; i++) {
            if (classes[i] === 'TVI-datePicker-noButton'){
                useButton = false;
            }
        }


        var html = '' + 

            '<div class="TVI-datePicker-control TVI-onTop clearfix">' + 
                '<div class="TVI-datePicker-wrapper clearfix">' + 
                    '<div class="TVI-datePicker-input-wrapper sp">' + 
                        
                    '</div>' + 
                    (useButton === true ? '<div class="TVI-datePicker-button sp"></div>' : '') + 
                '</div>' + 
                '<div class="TVI-datePicker-panel">' + 
                    '<div id="' + calendarID + '" class="TVI-calendar"></div>'
                '</div>' + 
            '</div>';

        inputEl.wrap(html);
        
        
        var panelEl = $('#' + elementID + ' .TVI-datePicker-panel:first');
        var buttonEl = $('#' + elementID + ' .TVI-datePicker-button:first');

        //create calendar
        App = App || {};

        App[calendarID] = new TVI.Components.Calendar({
        
            ID: calendarID
        
        });

        App[calendarID].addListener('dayClicked', function(d){

            var date = d.day + '/' + d.month + '/' + d.year;

            //set textBox value if TVI textbox
            if (App[elementID] !== undefined){
            
                App[elementID].val(date);
            
            }
            else{
                inputEl.val(date);
            }

            panelEl.hide();
                    
            cmp.fireEvent('dateChanged', date);
        
        });
        
        inputEl.focus(function(){
                        
            panelEl.show();
                    
        });
        
        buttonEl.click(function(){
            
            panelEl.show();
            
        });

        $('BODY').bind('click', function(e){ onBodyClick(e, calendarID, elementID) });


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

    };





    var onBodyClick = function(e, calendarID, elementID){        
    
        if ($(e.target).parents('#' + calendarID).length === 0 && $(e.target).parents('#' + elementID + ' .TVI-datePicker-control').length === 0){
            
            $('#' + elementID + ' .TVI-datePicker-panel:first').hide();
            
        }
            
    };





    var layout = function(element){

        // Finds all Custom DDLs within the supplied root element and create them

        var datePickerElement = element.find('.TVI-datePicker-control:first');
        var totalWidth = datePickerElement.parent().width();
        var style = 'defaultStyle';


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

        var useButton = true;

        // Check to see if we are not using the default button style
        for (i = 0; i < classesLength; i++) {

            if (classes[i] === 'TVI-datePicker-noButton'){
                useButton = false;
            }
        
            if (classes[i].substring(0, 21) == 'TVI-datePicker-style-') {
                style = classes[i].substring(21);
            }

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

        //Work out the width of the middle section
        var inputWrapperWidth = totalWidth - (style.inputWrapperLeftSize + style.inputWrapperRightSize);

        if (useButton){
        
            inputWrapperWidth -= style.buttonWidth;
        
        }


        //resize input
        var textBoxEl = element.find('INPUT[type=text]');

        //calculate width of textbox
        var textBoxWidth = inputWrapperWidth - style.inputLeftSize - style.inputRightSize;

        textBoxEl.width(textBoxWidth);


            
        element.find('.TVI-datePicker-input-wrapper:first').width(inputWrapperWidth);
                    
    };





    /* Public */

    TVI.apply(cmp, new TVI.Observable());

    TVI.apply(cmp, {

        /* Properties */
        
        styles: {
            defaultStyle: {
                inputWrapperLeftSize: 1,
                inputWrapperRightSize: 1,
                inputLeftSize: 6,
                inputRightSize: 6,
                buttonWidth: 24
            }
        },

        /* Methods */

        create: function(element) {

            create(element);

        },

        layout: function(element) {

            layout(element);

        }

    });

    TVI.ready(init);


    return cmp;

} ();