$(function() {
    ListingEditor.register('premiumService', {
        fields:  ["service_level"],
        show: function(callback, cancelCallback) {
            var context = this;
            var editor = $$("div.editor");
            var listing = ListingEditor.workingListing();
            $("<h2><strong>Upgrade</strong> Listing</h2>").appendTo(editor);
            
            var premiumRadioButtons = [
              $$("input", { name: "service_level", type: "radio", id: "premium_0", value: "0" }),
              $$("input", { name: "service_level", type: "radio", id: "premium_1", value: "1" }),
              $$("input", { name: "service_level", type: "radio", id: "premium_2", value: "2" }),
              $$("input", { name: "service_level", type: "radio", id: "premium_3", value: "3" })
            ];
            
            var table = $("<table class='serviceComparison'><tbody></tbody></table>");
            editor.append(table);
            
            table = table.find("tbody");
            var setActive = function(col) {
                table.find('td').removeClass('selected');
                table.find('tr').each(function() {
                    $(this).find('td').eq(col + 1).addClass('selected');
                    premiumRadioButtons[col].checked = true;
                });
            };
            var getSelectedValue = function(items) {
              for (var i = 0; i < items.length; i++) {
                if (items[i].attr('checked')) {
                    return i;
                }
              }
            }

            table.append("<tr><th></th><th class='f'>Free</th><th class='s'>Standard</th><th class='pl'>Plus</th><th class='pr'>Premium</th>");
            table.append("<tr><td>Standard Info</td><td class='f'><img alt='yes' src='/images/icons/tick.png'/></td><td class='s'><img alt='yes' src='/images/icons/tick.png'/></td><td class='pl'><img alt='yes' src='/images/icons/tick.png'/></td><td class='pr'><img alt='yes' src='/images/icons/tick.png'/></td>");
            table.append("<tr><td>Categories</td><td class='f'>3</td><td class='s'>3</td><td class='pl'>6</td><td class='pr'>6</td>");
            table.append("<tr><td><a class='logo' href='/images/premium/logo-example.jpg'>Logo on Search <img src='/images/icons/help.png'/></a></td><td></td><td class='s'><img alt='yes' src='/images/icons/tick.png'/></td><td class='pl'><img alt='yes' src='/images/icons/tick.png'/></td><td class='pr'><img alt='yes' src='/images/icons/tick.png'/></td>");
            table.append("<tr><td><a class='rank' href='/images/premium/ranking-example.jpg'>Featured listing <img src='/images/icons/help.png'/></a></td><td></td><td></td><td class='pl'><img alt='yes' src='/images/icons/tick.png'/></td><td class='pr'><img alt='yes' src='/images/icons/tick.png'/></td>");
            table.append("<tr><td><a class='banner' href='/images/premium/banner-example.jpg'>Personalised Banner <img src='/images/icons/help.png'/></a></td><td></td><td></td><td></td><td class='pr'><img alt='yes' src='/images/icons/tick.png'/></td>");
            table.append("<tr><td>Advert Free</td><td></td><td></td><td></td><td class='pr'><img alt='yes' src='/images/icons/tick.png'/></td>");
            table.append("<tr class='prices'><td></td><td>Free</td><td>$99/yr</td><td>$195/yr</td><td>$550/yr</td>");
            table.append($$("tr.buttons", $$("td"), $$("td", premiumRadioButtons[0]), $$("td", premiumRadioButtons[1]), $$("td", premiumRadioButtons[2]), $$("td", premiumRadioButtons[3])));
            
            premiumRadioButtons[listing.service_level || 0].attr('checked', true)
            setActive(listing.service_level || 0);
            
            table.find('a').click(function (event) { 
              return zoomClick(this, event); 
            });
            table.find('a').mouseover(function (){
              zoomPreload(this);
            });
            
            table.find('tr').each(function() {
                $(this).find('td').not(':first').css('cursor', 'pointer').each(function(g) {
                  var f = g; 
                  $(this).click(function() {
                    setActive(f);
                    premiumRadioButtons[f].attr('checked', true);
                  });
                });
            });
            
            editor.append(EditorFormatter.dialogButtons(function() {
                ListingEditor.updateSubmission('service_level', parseInt(getSelectedValue(premiumRadioButtons)));
                ModalPopup.hide();
                $('#premiumService').effect('highlight', {}, 200);
                if (callback) callback();
            }, function () {
                ModalPopup.hide();    
                if (cancelCallback) cancelCallback();
            }));
            
            EditorFormatter.applyData(editor);
            ModalPopup.show(editor);
        },
        refresh: function() {
          var listing = ListingEditor.workingListing();
          //if (ListingEditor.options['mode'] == 'approve'){
            $("#premiumService a").text(["Upgrade", "Standard", "Plus", "Premium"][listing.service_level || 0]);
          //}
        }
    });
});