function ImageDisplayer() {
  this.DisplaySizes = [600, 480, 360, 240];
  this.ThumbnailNativeSize = 160;
  this.TPImageIdToThumbNum = [];
  this.PageImageDescs = [];
  this.ThumbnailHTML = null;

  this.DisplayRow = null;
  this.SelectedWidth = null;
  this.SelectedHeight = null;
  this.SelectedImageDesc = null;
  this.Thumbnails = [];

  this.UpdateMenu = ImageDisplayerUpdateMenu;
  this.Draw = ImageDisplayerDraw;
  this.FrameThumbs = ImageDisplayerFrameThumbs;
  this.FillThumbs = ImageDisplayerFillThumbs;
  this.UpdatePageLinks = ImageDisplayerUpdatePageLinks;
  this.SelectAll = ImageDisplayerSelectAll;
  this.DeselectAll = ImageDisplayerDeselectAll;
  this.Resize = ImageDisplayerResize;
  this.AvailableHeight = ImageDisplayerAvailableHeight;
  this.UpdateSelectedImageDesc = ImageDisplayerUpdateSelectedImageDesc;

  this.GetPageLength = null;
  this.GetCurrentEvent = null;
  this.GetFIndexTPImageId = null;
  this.TPImageIdToEPILoc = null;

  this.ToggleFavoriteness = null;

  this.MarkedPos = null;
  this.Type = "ImageDisplayer";
}

function ImageDisplayerUpdateMenu(e_idx, p_idx) {
  var event = TP.GetEvents()[e_idx];
  if (! event.Loaded) return;
  var options = [];

  for (var i = 0; i < event.PageOverviews.length; i++) {
    if (event.PageOverviews.length == 1) break;
    var page_overview = event.PageOverviews[i];
    options.push({ value: i, text: page_overview.Title });
  }
  $('#page_select').linkselect("replaceOptions", options, false);
  if (p_idx != null) $('#page_select').linkselect('val', p_idx, false);
}

function ImageDisplayerUpdateSelectedImageDesc(image_desc) {
  this.SelectedImageDesc = image_desc;
}

function ImageDisplayerResize() {
  if (TP.CurPage == null) return;

  var thumbs_div = this.DisplayRow.cells[0].getElementsByTagName("div")[0];
  thumbs_div.style.height = "100%";
  thumbs_div.style.width = "100%";
  var available_width = thumbs_div.offsetWidth;
  var thumb_canvas_width = 182;
  var thumbs_columns = Math.floor(available_width / thumb_canvas_width);
  var thumbs_div_width = thumbs_columns * thumb_canvas_width;
  thumbs_div.style.width = (thumbs_columns * thumb_canvas_width) + 'px';
  thumbs_div.style.margin = '0px auto';
  if (thumbs_columns > 0) {
    var thumbs_rows = Math.ceil(TP.CurPage.ImageCount / thumbs_columns);
    var thumbs_div_height = (
      225 * thumbs_rows
    );
    var image_displayer_row_thumbs = document.getElementById('image_displayer_row_thumbs');
    var image_displayer_cell_thumbs = image_displayer_row_thumbs.getElementsByTagName('td')[0];
    var sub = 0;
    if (thumbs_rows == 1) sub = 180;
    if (thumbs_rows == 2) sub = 70;
    image_displayer_row_thumbs.style.height = (thumbs_div_height - sub)+'px';
    image_displayer_row_thumbs.vAlign = 'top';
    image_displayer_cell_thumbs.style.height = (thumbs_div_height - sub)+'px';
  }
  return;
}

function ImageDisplayerAvailableHeight() {
  $(window).unbind('resize');
  var scroll_height = document.body.scrollHeight + 12;
  $(window).bind('resize', function() { TP.Resize(); });
  var available_height = scroll_height - 110;
  return (available_height > 0) ? available_height : 0;
}

function ImageDisplayerDraw() {
  this.Resize();
  this.FrameThumbs();
  this.FillThumbs();
  this.UpdatePageLinks();
}

var ThumbnailHTML = '<div class="thumb_effect"></div><div class="thumb_canvas"></div><div class="thumb_overlay"></div><div class="thumb_x"><span class="image_name"></span></div><div class="thumb_nav"><div class="image_checkbox_div"><input type="checkbox" class="image_checkbox"></div><img src="/_img/buttons/btn_zoomin.png" class="image_zoomin"></div>';

function ImageDisplayerFrameThumbs(first_i, last_i) {
  var ID = this;
  var thumbs_div = this.DisplayRow.cells[0].getElementsByTagName("div")[0];

  if (first_i == null) first_i = 0;
  if ( last_i == null)  last_i = 99;

  if (ID.Thumbnails.length > last_i)
    return;

  for (var i = ID.Thumbnails.length; i <= last_i; i++) {
    var Canvas = document.createElement("div");
    Canvas.className = 'Canvas';
    Canvas.setAttribute('id', 'Canvas-' + i);
    // Canvas.style.overflow = 'hidden';
    Canvas.innerHTML = ThumbnailHTML;
    thumbs_div.appendChild(Canvas);

    var T = new Thumbnail();
    ID.Thumbnails[i] = T;
    var canvas_obj = $(Canvas);
    T.Canvas = canvas_obj;
    T.Pos = i;

    T.image_checkbox = $(Canvas.childNodes[4].childNodes[0].childNodes[0]);

    T.thumb_canvas = Canvas.childNodes[1];
    T.thumb_effect = Canvas.childNodes[0];
    T.thumb_nav = Canvas.childNodes[4];
    T.image_name = Canvas.childNodes[3].childNodes[0];

    $(Canvas.childNodes[4].childNodes[0]).click(function(e) {
      var pos = this.parentNode.parentNode.getAttribute('id').substr(7);
      T.CheckboxClicked(pos, e);
    });
    T.image_checkbox.click(function(e) {
      var pos = this.parentNode.parentNode.parentNode.getAttribute('id').substr(7);
      T.CheckboxClicked(pos, e);
    });
    $(Canvas.childNodes[4].childNodes[1]).click(function(e) {
      if (e != null) e.stopImmediatePropagation();
      var pos = this.parentNode.parentNode.getAttribute('id').substr(7);
      TPopupLargeView(pos, true);
    });
    canvas_obj.mouseover(function(e) {
      var pos = this.getAttribute('id').substr(7);
      TThumbMousedOver(pos,e);
    });
    canvas_obj.click(function() {
      var pos = this.getAttribute('id').substr(7);
      TPopupLargeView(pos, false);
    });
  }
}

function ImageDisplayerFillThumbs(first_i, last_i) {
  if (first_i == null) first_i = 0;
  if ( last_i == null)  last_i = 99;

  var ID = this;
  var image_descs = ID.PageImageDescs;
  for (var i = first_i; i <= last_i; i++) {
    var T = ID.Thumbnails[i];

    if (i < image_descs.length) {
      T.ImageDesc = image_descs[i];
      T.Empty = false;
      if (ID.SelectedImageDesc != null && ID.SelectedImageDesc.Index == T.ImageDesc.Index)
	ID.MarkedPos = i;
      ID.TPImageIdToThumbNum[T.ImageDesc.Index] = i;
      T.Update();
      T.Canvas.show();
    }
    else {
      T.Canvas.hide();
    }
  }
}

function ImageDisplayerUpdatePageLinks() {
  var ID = this;

  var event = TP.CurEvent;
  if (event != null && event.Loaded) {
    var num_pages = event.PageOverviews.length;
    var cur_page_num = TP.CurPage.Index + 1;

    var ranges;
    if (num_pages <= 11) ranges = [[1, num_pages]];
    else if (cur_page_num <= 6) ranges = [[1, 9], [num_pages, num_pages]];
    else if (cur_page_num >= num_pages - 5) ranges = [[1, 1], [num_pages - 8, num_pages]];
    else ranges = [[1, 1], [cur_page_num - 3, cur_page_num + 3], [num_pages, num_pages]];

    var page_cell_vals = [];
    for (var i = 0; i < ranges.length; i++) {
      if (i > 0) page_cell_vals.push("...");
      for (var j = ranges[i][0]; j <= ranges[i][1]; j++) page_cell_vals.push(j);
    }


    $('.dpage_nav').width(42 + 20 * page_cell_vals.length);
    var page_nav_html = "";

    if (cur_page_num == 1) {
      $('#prev_arrow').css({'visibility': 'hidden'});
    }
    else {
      $('#prev_arrow').css({'visibility': 'visible'});
    }
    if (cur_page_num == page_cell_vals[page_cell_vals.length - 1]) {
      $('#next_arrow').css({'visibility': 'hidden'});
    }
    else {
      $('#next_arrow').css({'visibility': 'visible'});
    }

    $('#prev_arrow').unbind("click");
    $('#prev_arrow').click(function () {
      $('#page_select').linkselect('val', cur_page_num - 2);
    });
    $('#next_arrow').unbind("click");
    $('#next_arrow').click(function () {
      $('#page_select').linkselect('val', cur_page_num);
    });
    for (var j = 0; j < page_cell_vals.length; j++) {
      if (page_cell_vals[j] == '...')
	page_nav_html +=
	  '<div class="dpage_nav_cell">...</div>';
      else {
	var nav_class = (page_cell_vals[j] == cur_page_num) ? "dpage_nav_cell_sel" : "dpage_nav_cell";
	var page_index = page_cell_vals[j]-1;
	page_nav_html +=
	  '<div class="'+nav_class+'">' +

	    '<a class="link_underline" href="#" onclick="$(\'#page_select\').linkselect(\'val\', \'' + page_index + '\'); return false;">'+page_cell_vals[j]+'</a>' +

	  '</div>';
      }
    }

    $('.dpage_nav_thumbs').each(function() {
      $(this).css({'visibility': (num_pages == 1 ? 'hidden' : 'visible')});
      $(this).html(page_nav_html);
    });

    if (event.PageOverviews.length > 1) {
      $('#page_select_link').show();
      $('.larrow').show();
      $('.rarrow').show();
    }
    else {
      $('#page_select_link').hide();
      $('.larrow').hide();
      $('.rarrow').hide();
    }

    $('#cur_page_name').html(TP.CurPage.Title);
    $('#cur_event_name').html(event.Title);
  }
}

function ImageDisplayerSelectAll() {
  var ID = this;

  for (var i = 0; i < ID.Thumbnails.length; i++) {
    T = this.Thumbnails[i];
    if (! T.Empty && ! TP.FMs['favorites'].IsMember(T.ImageDesc.Index)) {
      this.ToggleFavoriteness(T.ImageDesc);
      T.Update({'checkbox': 1});
    }
  }
}

function ImageDisplayerDeselectAll() {
  var ID = this;

  for (var i = 0; i < ID.Thumbnails.length; i++) {
    T = this.Thumbnails[i];
    if (! T.Empty && TP.FMs['favorites'].IsMember(T.ImageDesc.Index)) {
      this.ToggleFavoriteness(T.ImageDesc);
      T.Update({'checkbox': 1});
    }
  }
}