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

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

    function generateExhibitHTML() {
        var xaxis = this.config.xaxis;
        var yaxis = this.config.yaxis;
        if (xaxis && yaxis) {
            var minx = 0;
            var maxx = 0;
            var miny = 0;
            var maxy = 0;
            var database = $.exhibit.database;
            var recordIds = database.getAllItems().toArray();
            for (var i = 0; i < recordIds.length; i++) {
                var id = recordIds[i];
                var record = database.getItem(id);
                var x = parseFloat(record[xaxis]);
                var y = parseFloat(record[yaxis]);
                if (minx > x || i === 0) {
                    minx = x;
                }
                if (maxx < x || i === 0) {
                    maxx = x;
                }
                if (miny > y || i === 0) {
                    miny = y;
                }
                if (maxy < y || i === 0) {
                    maxy = y;
                }
            }
            if (maxx - minx <= 1 && maxx - minx > 0) {
                return $("<div ex:role='view' ex:viewLabel='Unsupported Range Values'></div>");
            }
            if (maxy - miny <= 1 && maxy - miny > 0) {
                return $("<div ex:role='view' ex:viewLabel='Unsupported Range Values'></div>");
            }
        }

        var view = $("<div ex:role='view' ex:viewClass='Exhibit.ScatterPlotView' ex:viewLabel='" + this.config.name + "'></div>");
        var props = $.freemix.property.enabledProperties();
        if (xaxis) {
            view.attr("ex:x", props[xaxis].expression());
            view.attr("ex:xLabel", props[xaxis].label());
        }
        if (yaxis) {
            view.attr("ex:y", props[yaxis].expression());
            view.attr("ex:yLabel", props[yaxis].label());
        }

        var lens = $("<div class='scatterplot-lens' 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: "Scatter Plot",
        thumbnail: "/site_media/images/scatterplot-icon.png",
        display: display,
        generateExhibitHTML: generateExhibitHTML,
        
        generateTitleExhibitHtml: $.freemix.prototypes.generateTitleExhibitHtml,

        config: {
            type: "scatterplot",
            title: undefined,
            titleLink: undefined,
            xaxis: undefined,
            yaxis: undefined,
            metadata: []
        }
    });

})(jQuery);