var DrawseeInterface = Class.create();
DrawseeInterface.prototype = {
  
  configs: {
    CurrentPage: 0
  },
  
  initialize: function() {
    Event.observe(window, 'load', this.init.bindAsEventListener(this), false);
  },
  
  init: function() {
    this.configs['CurrentPage'] = 1;
    this.loadPage();
  },
  
  accessToAPIwithSjax: function(method, objParams) {
    var data = null;
    objParams['Method'] = method;
    var params = $H(objParams).toQueryString();
    var myAjax = new Ajax.Request(
      '/drawsee/interface/api/',
      {
        method: 'post',
        parameters: params,
        asynchronous: false
      }
    );
    var respXml = myAjax.transport.responseXML;
    var xotree = new XML.ObjTree();
    data = xotree.parseDOM( respXml.childNodes[1] || respXml.childNodes[0] );
    return data;
  },
  
  loadPage: function() {
    var method = 'GetIndexByPage';
    var objParams = { page: this.configs['CurrentPage'], count: 12};
    
    var data = null;
    objParams['Method'] = method;
    var params = $H(objParams).toQueryString();
    var myAjax = new Ajax.Request(
      '/drawsee/interface/api/',
      {
        method: 'post',
        parameters: params,
        asynchronous: true,
        onComplete: function(originalRequest) {
          var respXml = originalRequest.responseXML;
          var xotree = new XML.ObjTree();
          var data = xotree.parseDOM( respXml.childNodes[1] || respXml.childNodes[0] );
          var configs = this.configs;
          if (data.pagerIF.result == 'success') {
            var elemSeeDiv = $('gallery_thumb');
            var elemsPager = document.getElementsByClassName('navi');
            var elemThumbList = elemSeeDiv.getElementsByTagName('UL')[0];
            elemThumbList.innerHTML = '';
            
            data.pagerIF.index = $A(
              data.pagerIF.index[0] ?
                data.pagerIF.index :
                [data.pagerIF.index]
            );
            
            for (var i = 0 ; i < data.pagerIF.index.length ; i++) {
              if (!data.pagerIF.index[i].title) {
                data.pagerIF.index[i].title = '-';
              }
              elemThumbList.innerHTML += ('<li>'
                +'<a href="" onclick="openDrawsee(' + data.pagerIF.index[i].target + ',\'see\',\'' + data.pagerIF.index[i].ID + '\');return false;">'
                +'<img class="renovaSketch" src="/drawsee/interface/thumbnail/?id=' + data.pagerIF.index[i].ID + '&target=' + data.pagerIF.index[i].target + '" alt="' + data.pagerIF.index[i].title + '" />'
                +'</a>'
                +'<img class="renovaTitle" src="/img/event/renova/title.gif" alt="' + data.pagerIF.index[i].title + '" />' + data.pagerIF.index[i].title + '</li>');
            }
            
            // enable next button
            elemsPager.each(function(elem) {
              $A($(elem).getElementsByTagName('SPAN')).each(function(elem2) {
                if (elem2.getAttribute('name') == 'next') {
                  if (data.pagerIF.maxPage > configs['CurrentPage']) {
                    elem2.innerHTML = '<a href="#" onclick="drawseeIF.setCursorNext();return false;"><img src="img/next.gif" border="0" height="25" width="60"></a>';
                  }
                  else {
                    elem2.innerHTML = '<img src="img/next_off.gif" border="0" height="25" width="60">';
                  }
                }
              });
            });
            
            // enable prev button
            elemsPager.each(function(elem) {
              $A($(elem).getElementsByTagName('SPAN')).each(function(elem2) {
                if (elem2.getAttribute('name') == 'prev') {
                  if (1 < configs['CurrentPage']) {
                    elem2.innerHTML = '<a href="#" onclick="drawseeIF.setCursorPrev();return false;"><img src="img/prev.gif" border="0" height="25" width="60"></a>';
                  }
                  else {
                    elem2.innerHTML = '<img src="img/prev_off.gif" border="0" height="25" width="60">';
                  }
                }
              });
            });
            
            // view max page count
            elemsPager.each(function(elem) {
              $A($(elem).getElementsByTagName('SPAN')).each(function(elem2) {
                if (elem2.getAttribute('name') == 'pagecount') {
                  elem2.innerHTML = '（全' + data.pagerIF.maxPage + 'ページ）';
                }
              });
            });
            
            // view direct page link
            var startPos = Math.max(Math.min(data.pagerIF.maxPage, this.configs['CurrentPage'] + 2) - 4, 1);
            var endPos = Math.min(Math.max(1, this.configs['CurrentPage'] - 2) + 4, data.pagerIF.maxPage);
            var html = '';
            for (var i = startPos ; i <= endPos ; i++) {
              if (i == this.configs['CurrentPage']) {
                html += (i + ' ');
              }
              else {
                html += ('<a href="#" onclick="drawseeIF.setCursor(' + i + ');return false;">' + i + '</a> ');
              }
            }
            elemsPager.each(function(elem) {
              $A($(elem).getElementsByTagName('SPAN')).each(function(elem2) {
                if (elem2.getAttribute('name') == 'pager') {
                  elem2.innerHTML = html;
                }
              });
            });
            
          }
        }.bindAsEventListener(this)
      }
    );
  },
  
  setCursor: function(num) {
    this.configs['CurrentPage'] = num;
    this.loadPage();
  },
  
  setCursorNext: function() {
    this.configs['CurrentPage']++;
    this.loadPage();
  },
  
  setCursorPrev: function(num) {
    this.configs['CurrentPage']--;
    this.loadPage();
  }
  
};

var drawseeIF = new DrawseeInterface();

function openDrawsee(target, mode, id) {
  switch (mode) {
  case 'draw':
    var resp = drawseeIF.accessToAPIwithSjax('GetUniqueID', {});
    if (resp.pagerIF.result == 'success') {
      window.open('/drawsee/' + target + '/index.php?bid=' + resp.pagerIF.UniqueID, 'drawsee_' + mode, 'width=640,height=480');
    }
    break;
  
  case 'see':
    window.open('/drawsee/' + target + '/index_v.php?bid=' + id, 'drawsee_' + mode, 'width=640,height=480');
    break;
  
  }
}