LivecastCustomList = function(view, ajaxTarget, pageSize, pageCount, cssClass, pageNumBoxID, pageCountBoxID, username, thumbURL, thumbNA) {  
  this.view = view;
  this.ajaxTarget = ajaxTarget;
  this.pageSize = pageSize;
  this.pageCount = pageCount;  
  this.cssClass = cssClass;
  this.boxPageNum = $('#'+pageNumBoxID);
  this.username = username;
  this.pageCountBoxID = pageCountBoxID;
  this.thumbURL = thumbURL;
  this.thumbNA = thumbNA;
  
  
  var pThis = this; // closure hack
  this.boxPageNum.bind('change', function(e) { pThis.change_page_h(e, pThis); });
  this.boxPageNum.bind('keydown', function(e) { if(e.keyCode==13) pThis.change_page_h(e, pThis); });
  this.refresh = function() { LivecastCustomList.prototype.refresh(pThis); };
  this.repopulate = function(num, sortField, sortOrder) { LivecastCustomList.prototype.repopulate(pThis, num, sortField, sortOrder); };
  this.sort = function(field) { LivecastCustomList.prototype.sort(pThis, field); };
  this.check = function(recordID, checkboxID, fieldname) { LivecastCustomList.prototype.check(pThis, recordID, checkboxID, fieldname); };
  this.itemClicked = function(eventArgs) { LivecastCustomList.prototype.itemClicked(pThis, eventArgs); }
  this.gotoNextPage = function() { LivecastCustomList.prototype.gotoNextPage(pThis); }
  this.gotoPrevPage = function() { LivecastCustomList.prototype.gotoPrevPage(pThis); }
  this.requestInfo = function(webcastID) { LivecastCustomList.prototype.requestInfo(pThis, webcastID); }

  // init
  this.setPageCount(pageCount);
  if(cssClass) this.colorAltRows();
  this.fetchThumbs();
};

LivecastCustomList.prototype = {
  view : '_',
  ajaxTarget : null,
  cssClass : null,
  pageSize : 0,
  pageCount : 0,
  pageCountBoxID : '_',
  boxPageNum : null,
  sortField : null,
  sortOrder : 'asc', // or 'desc'
  currentPage : 1,
  disabled : false,  // controls are disabled during ajax calls
  username : '_',
  highlightID : 0,
  thumbURL : '_',
  thumbNA : '_',
  
  // external event handlers attach HERE ***
  onItemClickedEvent : function() {},     // fired as a result of a user action
  onInfoRequest : function(webcastID) {}, // user action
  onAjaxStart : function(){},
  onAjaxEnd : function(){},

  colorAltRows : function() {
    $('table.' + this.cssClass + ' tbody tr:odd > *').addClass('alternateRows');
  },

  setPageCount : function(n) {
    if(!n) n = 1;
    this.pageCount = n;
    $('#'+this.pageCountBoxID).text(this.pageCount);
  },

  ajaxFailed : function(pThis,args) {
    // statusText (HTTP)
    // responseText = HTML
    pThis.disabled = false;
    pThis.onAjaxEnd();
    alert('AJAX call failed: ' + args.statusText);
  },
  
  refresh : function(pThis) {
    pThis.repopulate(pThis.currentPage, pThis.sortField, pThis.sortOrder);
  },
  
  repopulate : function(pThis, num, sortField, sortOrder) {
    pThis.boxPageNum.val(num);
    pThis.disabled = true;
    pThis.onAjaxStart();

    var querystring = {
        user: pThis.username,
        AJAX:1,
        view: pThis.view,
        start:(pThis.pageSize * (pThis.boxPageNum.val()-1)), 
        sort: sortField,
        orderBy: sortOrder
    };
    if(SID) querystring.sid = SID;
    var pd = $('#PageDataField').val();
    if(pd) querystring.pagedata = escape(pd); // URL encodes

    $.ajax({
      url : location.pathname,  // callback to self...
      data : querystring,
      success: function(html) {
        pThis.currentPage = num;
        $(pThis.ajaxTarget).html(html);
        if(pThis.cssClass) pThis.colorAltRows();
        pThis.disabled = false;
        pThis.setHighlight(pThis, pThis.highlightID);
        pThis.onAjaxEnd();
        pThis.fetchThumbs();
      },
      error : function(args) { pThis.ajaxFailed(pThis, args); }
    });
  },
  
  change_page_h : function(e, pThis) {
    e.preventDefault();  // no postback
    if(pThis.disabled) return;
    var pg = parseInt(pThis.boxPageNum.val());
    if(pg > this.pageCount) {
      pg = this.pageCount;
      this.boxPageNum.val(pg);
    }
    if(pg > 0 && pg <= this.pageCount && pg != pThis.currentPage)
      pThis.repopulate(pg, pThis.sortField, pThis.sortOrder);
  },

  gotoFirstPage : function() {
    this.repopulate(1, this.sortField, this.sortOrder);
  },

  gotoPrevPage : function(pThis) {
    if(pThis.disabled) return;
    var page=parseInt(pThis.boxPageNum.val());
    if(page>1) pThis.repopulate(page-1, pThis.sortField, pThis.sortOrder);
  },

  gotoNextPage : function(pThis) {
    if(pThis.disabled) return;
    var page = parseInt(pThis.boxPageNum.val());
    if(page < pThis.pageCount) pThis.repopulate(page + 1, pThis.sortField, pThis.sortOrder);
  },
  
  sort : function(pThis, field) {
    if(pThis.disabled) return;
    if(pThis.sortField == field) {
      // invert sort order
      pThis.sortOrder = (pThis.sortOrder == 'asc') ? 'desc' : 'asc';
    }
    else {
      pThis.sortOrder = 'asc';
      if(field == 'StreamNo') pThis.sortOrder = 'desc'; // most viewed videos first
    }
    pThis.sortField = field;
    var page = parseInt(pThis.boxPageNum.val());
    pThis.repopulate(page, pThis.sortField, pThis.sortOrder);
  },
  
  check : function(pThis, recordID, checkboxID, fieldname) {
    var chk = $('#'+checkboxID)[0].checked;
    $.get(location.pathname, { update:1, id:recordID, field:fieldname, newValue:chk });;
  },
  
  fetchThumbs : function() {
    var pThis = this;
    $('img[id^='+this.view+'Thumb_]').error(function() { // 404
      if(this.src != pThis.thumbNA)
        this.src = pThis.thumbNA; 
    })
    .each(function() {    
      this.src = pThis.thumbURL
                      .replace('<<', this.name.substr(0,2))
                      .replace('>>', this.name.substr(2,2))
                      .replace('##', this.name);
    });
  },
  
  itemClicked : function(pThis, eventArgs) {
    if(pThis.disabled) return;
    eventArgs.sender = pThis;
    pThis.onItemClickedEvent(eventArgs);    
    pThis.setHighlight(pThis, eventArgs.mediaID);
  },

  setHighlight: function(pThis, id) {
    //clear
    $('div[id^="GalleryCell_"]').removeClass('galleryCellSelected');
    $('div[id^="GridThumb_"]').removeClass('gridCellSelected');  
    //set
    pThis.highlightID = id;
    $('#GalleryCell_'+id).addClass('galleryCellSelected');
    $('#GridThumb_'+id).addClass('gridCellSelected');
  },

  requestInfo : function(pThis, id) {  
    pThis.onInfoRequest(id);
  }    
};