var page = ( 
  
  function() {
    var comicsData;
    var facilities = null;
    var downloading = false;
    var remove_image = new Image(13,13); 
    var remove_hover_image = new Image(13,13); 
    pollcount = 0;
    function loadComicsData(callback) {
      $.getJSON('js/comics.json', function(data) {
        comicsData = [];
	$.each(data, function(i, record) {
          var accum = [];
	  var hash = [];
	  if (record.artist) {
	    $.each(record.artist, function(j, artist) {
              if (!hash[artist.name]) {
                hash[artist.name] = artist.name;
		accum.push(artist);
              }
	    });
	  }
	  if (record.coverArtist) {
	    $.each(record.coverArtist, function(j, artist) {
              if (!hash[artist.name]) {
                hash[artist.name] = artist.name;
		accum.push(artist);
              }
	    });
	  }
	  record.allArtists = accum;
	  comicsData.push(record);
        });
        callback();
      });
    }
    function isSingleArtist(renderObj) {
        var artistArray = renderObj.record.artist;
        var coverArtistArray = renderObj.record.coverArtist;
        return artistArray && coverArtistArray && artistArray.length == 1 && coverArtistArray.length == 1 && artistArray[0].name == coverArtistArray[0].name;
    }
    function reverseArticle(s) {
      var arr = s.split(",");
      return arr[1] + " " + arr[0];
    }
    function commaArtistList(arr) {
      var accum = [];
      $.each(arr, function(i, artist) {
          accum.push((i > 0 ? ", " : "") + reverseArticle(artist.name));
      });
      return accum.join("");
    }

    var renderers = {
      "year": function(renderObj) {
        var record = renderObj.record;
        renderObj.cell.html(record.year);
      },
      "artists": function(renderObj) {
        var accum = [];
        var artistArray = renderObj.record.artist;
        var coverArtistArray = renderObj.record.coverArtist;
        if (isSingleArtist(renderObj)) {
          var name = reverseArticle(artistArray[0].name) + " (cover+inside)";
          renderObj.cell.html(name);
          return;
        }
        if (artistArray) {
          accum.push(commaArtistList(artistArray));
        }
        if (coverArtistArray) {
          accum.push(" (cover: ");
          accum.push(commaArtistList(coverArtistArray));
	  accum.push(")");
        }
        renderObj.cell.html(accum.join(""));
      },
      "urls": function(renderObj) {
        var accum = "";
        if (renderObj.record.detailUrl) {
          accum += "<a href='" + renderObj.record.detailUrl + "'>detail</a> ";
        }
        if (renderObj.record.valueUrl) {
          accum += "<a href='" + renderObj.record.valueUrl + "'>value</a>";
        }
        renderObj.cell.html(accum);
      },
      "title": function(renderObj) {
        var record = renderObj.record;
        var i = 0;
        var accum = [];
        accum[i++] = "Full title: ";
        if (record.startTitle) accum[i++] = record.startTitle + " ";
        var titleArray = record.title.split(",");
	var title = titleArray.length == 1 ? titleArray[0] : reverseArticle(record.title);
        accum[i++] = title + " ";
        if (record.endTitle) accum[i++] = record.endTitle;
	accum[i++] = "<br>Brand: ";
	accum[i++] = record.brand;
	accum[i++] = "<br>Date: " + record.month + ", " + record.year;
	accum[i++] = "<br>Issue: " + record.issue;

        var span = $("<span>").text(record.title).attr("title",accum.join(""));
        renderObj.cell.html(span);
      },
      "issue": function(renderObj) {
        var record = renderObj.record;
        var span = $("<span>").text(record.issue);
        $(span).mouseover(function() {
          $("#img1")
            .attr("src", "img/" + record.flash + ".JPG")
            .hover(
              function() {
                $(this).attr("src", "img/" + record.photo + ".JPG");
              },
              function() {
                $(this).attr("src", "img/" + record.flash + ".JPG");
              }
            );
        });
        renderObj.cell.html(span);
      }
            
    };

// {monthYear: 196503, month: "March", year: 1965, title: "Tales of Suspense", moreTitle: "Featuring Iron Man and Captain America", issue: 63, photo: 362, flash: 363, brand: "Marvel", hero: ["Iron Man", "Captain America"], villain: ["Phantom, The"]},
    function createVoltaTable() {
      $("#dataTableRowDiv").volta({

        columns: ['Photo', 'Brand', 'Title', 'Issue', 'Year', 'Artists', 'Urls'],
        keys: ['photo', 'brand', 'title', 'issue', 'year', 'artists', 'urls'],
        // widths: [60, 350, 60, 60, 170],
        style: {ascending: "sorting_asc", descending: "sorting_desc", sortable: "sorting"},
        sort:  {month: false},
        sortBy: 1,
        renderers: renderers,
        data: comicsData,
        border: 0,
        cellspacing: 0,
        cellpadding: 2,
        pageSize: 10
      });
      $("#voltaTablePaginationDiv").volta('paginate', $("#dataTableRowDiv").volta(), {
        prefix: "volta",
        style: {paginate: "paging_full_numbers"}
      });
      $("#searchFieldDiv").volta('search', $("#dataTableRowDiv").volta(), {
        fields: ["brand", "title", "hero", "villain",]
      });
      
    }
    function addFilterWidgets() {
      $('#filtersDiv').volta('selector', $("#dataTableRowDiv").volta(), {"field": "title", "defaultText": "All Titles"} );
      $('#filtersDiv').volta('selector', $("#dataTableRowDiv").volta(), {"field": "year", "defaultText": "All Years"} );
      $('#filtersDiv').volta('selector', $("#dataTableRowDiv").volta(), {"field": ["hero", "name"], "defaultText": "All Heroes"} );
      $('#filtersDiv').volta('selector', $("#dataTableRowDiv").volta(), {"field": ["villain", "name"], "defaultText": "All Villains"} );
      $('#filtersDiv').volta('selector', $("#dataTableRowDiv").volta(), {"field": ["allArtists", "name"], "defaultText": "All Artists"} );
    }
    exposedMethods = {
      loadComicsData: loadComicsData,
      createVoltaTable: createVoltaTable,
      addFilterWidgets: addFilterWidgets
    }
    return exposedMethods;
  }
)();
$(document).ready(function() {
  $('#loadingDataTable').show();
  page.loadComicsData(function() {
    page.createVoltaTable();
    page.addFilterWidgets();
    $('#loadingDataTable').hide();
  });
});