/*
 * Add or connect to the container. We are lazy, and assume if the outermost
 * div exists that the full required HTML structure hs been properly set up
 * by the server. We might not even use this functionality, but just in case
 */
window.intelesense_data.add_view((function( $, intelesense_data )
{
    function container()
    {
        this.element = null;
        this.parent = null;
        this.model = null;
        this.current_time_zone = 'sensor';
    };

    container.prototype.init = function()
    {
        this.parent = intelesense_data.settings.parent_element;
        this.element = $(this.parent).find('#isd-container');
        this.model = intelesense_data.get_model('sensor_data');

        if(!this.element.length)
        {
            //create the container
            this.element = $([
                '<div id="isd-container">',
                    '<div class="isd-options">',
                        '<div style="padding:6px 10px" class="ui-widget-header ui-corner-all">',
                            '<input size="12" type="text" id="isd-options-date-start" name="isd-options-date-start"/>',
                            ' To ',
                            '<input size="12" type="text" id="isd-options-date-end" name="isd-options-date-end"/>',
                            '<select id="isd-options-timezone" name="isd-options-timezone">',
                                '<option value="data">Sensor Timezone</option>',
                                '<option value="utc">UTC</option>',
                                '<option value="user">User Timezone</option>',
                            '</select>',
                            '<button id="isd-options-submit">Update</button>',
                        '</div>',
                    '</div>',
                    '<div class="isd-content">',
                    '</div>',
                '</div>'
            ].join(' '));
            $(this.parent).append(this.element);
            this.element.find('#isd-options-submit, #isd-options-date-start, #isd-options-date-end').button();
            this.element.find('#isd-options-timezone').selectmenu({width:'170px'});

        //add message for IE
        if($.browser.msie && $.browser.version=="6.0")
        {
            this.element.prepend([
                '<div class="isd-display ui-state-highlight ui-corner-all ui-tabs">',
                '<p class="ui-tabs-panel">It appears that you are using IE 6.0. While ',
                'we do support your browser, you may find that performance is somewhat ',
                'reduced. In order to improve performance only the first chart has been ',
                'loaded automatically. For best results we recommend the latest version ',
                'of Firefox, Chrome, Safari, or Internet Explorer.</p></div>'
            ].join(''));
        }
        }
    };

    container.prototype.show = function()
    {
        var self = this;
        var el = this.element;
        var date_settings = {
            dateFormat: 'yy-mm-dd',
            onSelect: function(selectedDate)
            {
                var option = this.id == "isd-options-date-start" ? "minDate" : "maxDate";
                var instance = $(this).data("datepicker");
                var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                 $('#isd-options-date-start,#isd-options-date-end').not(this).datepicker("option", option, date);
            }
        };

        //set dates
        $('#isd-options-date-start')
            .val(this.model.format_date(new Date(this.model.first_loaded_time),'%y-%m-%d',null,'utc'))
            .datepicker(date_settings);
        $('#isd-options-date-end')
            .val(this.model.format_date(new Date(this.model.last_loaded_time),'%y-%m-%d',null,'utc'))
            .datepicker(date_settings);

        //set timezone
        var tz = $.cookie("options-timezone");
        if(tz)
        {
            $('#isd-options-timezone').val(tz);
            this.current_time_zone = tz;
        }

        //catch form submission
        $('#isd-options-submit').click(function()
        {
            var options_date_end = $('#isd-options-date-end').val();
            var options_date_start = $('#isd-options-date-start').val();
            var start = self.model.format_date(new Date(self.model.first_loaded_time),'%y-%m-%d',null,'utc');
            var end = self.model.format_date(new Date(self.model.last_loaded_time),'%y-%m-%d',null,'utc');
            var url = window.location.pathname.split('/');
            var i;

            if($('#isd-options-timezone').val()!=self.current_time_zone)
            {
                self.current_time_zone = $('#isd-options-timezone').val();
                $.cookie("options-timezone",self.current_time_zone,{ path: '/' });
                $(document).trigger('eventOptionsTimezoneChanged', self.current_time_zone);
            }

            if(start != options_date_start || end != options_date_end)
            {
                for(i in url)
                {
                    if(/\d\d\d\d-\d\d-\d\d/.test(url[i]))
                    {
                        url[i] = null;
                    }
                }
                url.push(options_date_start);
                url.push(options_date_end);
                window.location = url.join('/').replace(/\/+/g,'/');
            }
        });
    };

    container.prototype.hide = function()
    {
        this.element.hide();
    };

    return( new container() );

})( jQuery, window.intelesense_data ));