/*global jQuery */
 (function($) {
 
     function createSetupHandler(model) {
         return function(selector, key, nullValue) {
              model.getContent().find(selector)
               .change(function() {
                   var value = $(this).val();
                   if (value != (nullValue || "" || undefined)) {
                       model.config[key] = value;
                   } else {
                       model.config[key] = undefined;
                   }
               })
               .val(model.config[key]);
           };
     }
     
     
 
     // Display the view's UI.	
     function display() {
         var content = this.getContent();
         root = $.freemix.getTemplate("timeline-view-template");
         content.empty();
         root.appendTo(content);
         
         var setupHandler = createSetupHandler(this);
         
         var $start = content.find("#timeline-start-date");
         var $end = content.find("#timeline-end-date");

         setupHandler("#timeline-start-date", "startDate");
         setupHandler("#timeline-end-date", "endDate");
         setupHandler("#top-band-unit", "topBandUnit");
         setupHandler("#bottom-band-unit", "bottomBandUnit");
         if (!$("#top-band-unit").val()) {
             $("#top-band-unit").get(0).options[0].selected = true;
             $("#top-band-unit").change();
         }
         if (!$("#bottom-band-unit").val()) {
             $("#bottom-band-unit").get(0).options[0].selected = true;
             $("#bottom-band-unit").change();
         }

         // Read record data into selects.
         $.each($.freemix.property.getPropertiesWithType("datetime"),
         function() {
             var value = $start.val();
             $start.append('<option value="' + this.name() + '">' + this.label() + '</option>');
             if (!value) {
                 $start.val(this.name());
                 $start.change();
             }
         });

         $.each($.freemix.property.getPropertiesWithType("datetime"),
         function() {
             var value = $end.val();
             $end.append('<option value="' + this.name() + '">' + this.label() + '</option>');
             if (!value) {
                 $end.val(this.name());
                 $end.change();
             }
         });
         
         this.findWidget().recordTitle().recordPager(
             function(row, model, metadata) { 
                 $("<td class='inner'></td>").insertAfter(row.find("td.visible")).createChildCheck({
                     radio: true,
                     checked: model.config.colorKey === metadata.property,
                     change: function() {
                         if ($(this).is(":checked")) {
                             model.config.colorKey = metadata.property;
                         }
                     },
                     name: 'colorKey'
                 });
             }
         );
     }

    function generateExhibitHTML() {
        var config = this.config;
        if (!config.startDate || !config.endDate) {
            return $("<div ex:role='view' ex:viewLabel='Range Missing'></div>");
        }
        var props = $.freemix.property.enabledProperties();
        var colorKey = config.colorKey;
        var view = $("<div ex:role='view' ex:viewClass='Timeline' ex:viewLabel='" + config.name + "'></div>");
        if (colorKey) {
            view.attr("ex:colorKey", '.' + colorKey);
        }
        if (config.name) {
            view.attr("ex:label", config.name);
        }
        if (config.title) {
            view.attr("ex:eventLabel", "." + config.title);
        }
        if (config.startDate) {
            view.attr("ex:start", "." + config.startDate);
        }
        if (config.endDate) {
            view.attr("ex:end", "." + config.endDate);
        }
        if (config.topBandUnit) {
            view.attr("ex:topBandUnit", config.topBandUnit);
        }
        if (config.bottomBandUnit) {
            view.attr("ex:bottomBandUnit", config.bottomBandUnit);
        }
        if (config.topBandUnitsPerPixel) {
            view.attr("ex:topBandUnitsPerPixel", "." + config.topBandUnitsPerPixel);
        }
        if (config.bottomBandUnitsPerPixel) {
            view.attr("ex:bottomBandUnitsPerPixel", "." + config.bottomBandUnitsPerPixel);
        }

        var lens = $("<div class='timeline-lens ui-widget-content' ex:role='lens' style='display:none'></div>");
        var title = $("<div class='exhibit-title ui-widget-header'></div>");
        if (this.config.title) {
            var html = "<span ex:content='" + props[this.config.title].expression() + "' ></span>";
            if (this.config.titleLink) {
                html += "&nbsp;<a ex:href-content='" + props[this.config.titleLink].expression() + "' target='_blank'>(link)</a>";
            }
            title.append(html);
        }
        lens.append(title);
        var table = $("<table class='property-list-table exhibit-list-table'></table>");
        $.each(this.config.metadata,
        function(index, metadata) {
            var property = metadata.property;
            var identify = props[property];
            if (!metadata.hidden && identify) {
                var label = identify.label();
                $("<tr class='exhibit-property'><td class='exhibit-label'>" + label + "</td><td class='exhibit-value'>" + $.freemix.renderExhibitProperty(metadata) + "</td></tr>").appendTo(table);
            }

        });

        lens.append(table).appendTo(view);
        return view;
    }

    $.freemix.view.addViewType({
        label: "Timeline",
        thumbnail: "/site_media/images/timeline-icon.png",
        display: display,
        generateExhibitHTML: generateExhibitHTML,
        generateTitleExhibitHtml: $.freemix.prototypes.generateTitleExhibitHtml,

        config: {
            type: "timeline",
            title: undefined,
            titleLink: undefined,
            colorKey: undefined,
            startDate: undefined,
            endDate: undefined,
            topBandUnit: undefined,
            topBandPixelsPerUnit: undefined,
            bottomBandUnit: undefined,
            bottomBandPixelsPerUnit: undefined,
            metadata: []
        }
    });

})(jQuery);