/// <reference path="http://localhost/IndustrialDashboard/Scripts/IndustrialDashboard.js" />

define([
  // Application.
  "app",

  //templates-loader
  "js/templates-loader"

],

function (app, T) {

    var RangeControl = { Model: {}, Views: {} }

    RangeControl.Model = Backbone.Model.extend({
        defaults: {
            dateFrom: "2011-07-02"
            , dateTo: "2011-08-02"            
        }
        , initialize: function () {
            
        }
    });

    RangeControl.Views.Main = Backbone.View.extend({
        template: "rangeControl/rangeControl"
        , id: "global-range-control"
        , title: ""
        //default not cacheable, change this if you want the view to be cacheable
        // if the view is set as cacheable should also have a refresh method to reset the view without erasing the DOM.
        //refreshing only the data, maybe?
        , isCacheable: false
        , initialize: function () {
            this.options.MYREFERENCES = {};
            this.listenTo(this.model, "change", this.rangeModelChanged);
        }, 
        // global view variable (seen in this scope, public to the view, and SHARED BETWEEN OTHER INSTANCES OF THE SAME VIEW)
        // containing all the variables for this view

        //properties that you wanna scope as private variables for each instance of a view should not be placed here
        //the only way i found to maintain the variables between instances of the same view, is either using models,
        // (each view will have its own model so data is not shared between them), or in case you don't want to use a model
        // you can use the Backbone.View.options object, and doing something like
        // this.options.attributes = {}
        // and storing every single variable inside attributes.

        events: {
            "click #calendar-icon-clickeable": "showCalendar"
            , "focus #datePicker1": "showCalendarFocus"
        }, 

        render: function (container) {
            var that = this;
            var thatContainer = container;
            
            T.render.call(this, this.template, function (tmp) {
                //getInternationalizationData
                if (!that.options.i18n) that.options.i18n = {};
                app.getI18NJed(that, that.template, function (i18nJED) {
                    //storing internationalization data
                    that.options.i18n[that.template] = i18nJED;

                    //start: before the view is visible, but the template was already loaded (not instanced nor appended)

                    //end:

                    //loading the view and appeding it to the views's $el.
                    that.$el.html(tmp());

                    //start: the view was already loaded an is on a div element, but not appended to the main container
                    //here you can perform anything you want DOM related, by getting the dom element via that.$el.find("#id")

                    that.options.MYREFERENCES.datePicker1 = that.$el.find("#datePicker1").datepicker(
                        {
                            showOn: "focus"
                            , beforeShow: function () { that.calendarBeforeShow.call(that); }
                            , onSelect: function () { that.calendarChanged.call(that); }
                            , showOtherMonths: true
                            , selectOtherMonths: true
                        }
                    );

                    that.options.MYREFERENCES.datePicker1.datepicker("setDate", Core.DateTime.Parse(that.model.get("dateFrom")));

                    $(".ui-widget").wrap('<div class="jqueryUIcontrols" />');

                    //:end

                    //appending view to the main container
                    thatContainer.append(that.$el);

                }, false);
            });
        }
        , rangeModelChanged: function () {
            if (this.options.MYREFERENCES.datePicker1) {
                if (Core.DateTime.ToString(this.options.MYREFERENCES.datePicker1.datepicker("getDate"), "yyyy-mm-dd HH:MM:ss") != this.model.get("dateFrom"))
                    this.options.MYREFERENCES.datePicker1.datepicker("setDate", Core.DateTime.Parse(this.model.get("dateFrom")));
            }
        }

        , calendarChanged: function (params) {
            var dateSelected = Core.DateTime.ToString(this.options.MYREFERENCES.datePicker1.datepicker("getDate"), "yyyy-mm-dd HH:MM:ss");
            this.model.set("dateFrom", dateSelected);
        }

        , calendarBeforeShow: function () {
            try {                
            } catch (Error) { }
        }

        , showCalendar: function () {
            if (this.options.MYREFERENCES.datePicker1.datepicker("widget").is(":visible"))
                this.options.MYREFERENCES.datePicker1.datepicker("hide");
            else
                this.options.MYREFERENCES.datePicker1.datepicker("show"); 
        }

        , showCalendarFocus: function () {
            //$("#calendar-icon-clickeable").click();
        }

        , close: function () {
            this.remove();
            this.unbind();
        }
        , show: function () {
            this.$el.show();
        }
        , hide: function () {
            this.$el.hide();
        }
    });

    // Required, return the module for AMD compliance.
    return RangeControl;

});
