/*global jQuery */
 (function($) {
     var renderExhibitProperty = $.freemix.renderExhibitProperty;
     
     // Display the view's UI.	
    function display() {
        var content = this.getContent();
        root = $.freemix.getTemplate("map-view-template");
        content.empty();
        root.appendTo(content);
        this.findWidget().recordTitle().recordPager(
            function(row, model, metadata) {
                t = $("<td class='inner'></td>").insertAfter(row.find("td.visible")).createChildCheck({
                    radio: true,
                    checked: model.config.latlng === metadata.property,
                    change: function() {
                        if ($(this).is(":checked")) {
                            model.config.latlng = metadata.property;
                        }
                    },
                    name: 'latlng'
                });

                $("<td class='inner'></td>").insertAfter(t).createChildCheck({
                    radio: true,
                    checked: model.config.colorKey === metadata.property,
                    change: function() {
                        if ($(this).is(":checked")) {
                            model.config.colorKey = metadata.property;
                        }
                    },
                    name: 'colorKey'
                });
            }
        );
    }


    function generateExhibitHTML() {
        if (!this.config.latlng) {
            return $("<div ex:role='view' ex:viewClass='Map' ex:viewLabel='Location Missing'></div>");
        }
        var latlng = this.config.latlng;
        var colorKey = this.config.colorKey;
        var view = $("<div ex:role='view' ex:viewClass='Map' ex:viewLabel='" + this.config.name + "'></div>");
        if (latlng) {
            view.attr("ex:latlng", '.' + latlng);
        }
        if (colorKey) {
            view.attr("ex:colorKey", '.' + colorKey);
        }

        var lens = $("<div class='map-lens' ex:role='lens' style='display:none'></div>");
        var props = $.freemix.property.enabledProperties();
        
        lens.append(this.generateTitleExhibitHtml());
        
        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'>" + renderExhibitProperty(metadata) + "</td></tr>").appendTo(table);
            }

        });

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

    $.freemix.view.addViewType({
        label: "Map",
        thumbnail: "/site_media/images/map-icon.png",
        display: display,
        generateExhibitHTML: generateExhibitHTML,
        generateTitleExhibitHtml: $.freemix.prototypes.generateTitleExhibitHtml,
        config: {
            type: "map",
            title: undefined,
            titleLink: undefined,
            latlng: undefined,
            colorKey: undefined,
            metadata: []
        }
    });

})(jQuery);