App.registerResponder('indicatorArea');

// -----------------------------------------------------------------------------

var Spread = {

  firstLoad: true,

  _detPrefix: 'details_',
  _subimgPrefix: 'subimg_',
  _subimguniPrefix: 'subimg_uni_',
  _xhtmlPrefix: 'xhtml_',
  _xhtmluniPrefix: 'xhtml_uni_', // unisized subcategories
  
  _xhtmlClass: 'xhtml',
  _xhtmlcodeClass: 'xhtml_code',
  _xhtmlcodeuniClass: 'xhtml_code_uni',  // unisized subcategories

  'showImg': function(file, dest) {
    $(dest).src = file;
    $(dest).parentNode.href = file;
    
    // update xhtml code
    var filename = file.replace(/.*\//, '');
    var xhtml_id = dest.replace(this._subimgPrefix, this._xhtmlPrefix);
    this._setXhtml(xhtml_id, filename);
  },
  
  'getDetails': function(subcatId) {
    var detailsId = this._detPrefix + subcatId;
    // lazy but effective cache -
    // only do the ajax call if the first span isn't set
    if(!($(detailsId).getElementsByTagName('span')[0].innerHTML)) {
      new Ajax.Request('spread-getdetails.php', {
        parameters: 'id=' + subcatId,
        onSuccess: function(t, json) {
          // apply values to all span tags where className matches json key
          var c = $(Spread._detPrefix+json.subcategory_id).getElementsByTagName('span');
          for(var i=0; i<c.length; i++) {
            if(json[c[i].className])
              c[i].innerHTML = json[c[i].className];
          }
        }
      });
    }
    Effect.toggle(detailsId, 'blind');
  },
  
  /**
   * Toggles elements by their class name
   */
  '_toggleByClassName': function(className) {
    var xcs = document.getElementsByClassName(className);
    for(var i=0; i<xcs.length; i++) {
      if($('show_xhtml').checked)
        Element.show(xcs[i]);
      else
        Element.hide(xcs[i]);
    }
  },
  
  /**
   * Toggles all elements with class "xhtml_code" and "xhtml_code_uni"
   * through the "show_xhtml" checkbox. We have two types of subcategories,
   * each has to be processed by its own.
   */
  'toggleXhtml': function() {
    /*
    var xcs = document.getElementsByClassName(this._xhtmlcodeClass);
    for(var i=0; i<xcs.length; i++) {
      //Element.toggle(xcs[i]);
      if($('show_xhtml').checked)
        Element.show(xcs[i]);
      else
        Element.hide(xcs[i]);
    }
    
    xcs = document.getElementsByClassName(this._xhtmlcodeuniClass);
    for(var i=0; i<xcs.length; i++) {
      //Element.toggle(xcs[i]);
      if($('show_xhtml').checked)
        Element.show(xcs[i]);
      else
        Element.hide(xcs[i]);
    }*/
    this._toggleByClassName(this._xhtmlcodeClass);
    this._toggleByClassName(this._xhtmlcodeuniClass);
    
    // toggle the direct link note
    if($('show_xhtml').checked)
      Element.show('note');
    else      
      Element.hide('note');
  },
  
  '_setXhtml': function(id, filename) {
    var alt = "Get Krusader!";
    var xhtml = '<a href="http://www.krusader.org/spread.php"><img src="' +
                filename + '" alt="' + alt + '" title="' + alt + '" border="0" /></a>';
    
    // FIXME konq doesn't show value on load?
    if(this.firstLoad) {
      $(id).defaultValue = xhtml;
    }  
    $(id).value = xhtml;
  },

  'setXhtmlAll': function() {
    var xcs = document.getElementsByClassName(this._xhtmlcodeClass);
    for(var i=0; i<xcs.length; i++) {
      this._setXhtml(xcs[i].id, this._getFilename(xcs[i].id));
    }
  },

  /**
   * @param xhtml_id (ex. "xhtml_2")
   * @return the plain filename (ex. "xyz.png")
   */
  '_getFilename': function(xhtml_id) {
    var xhtml_id = xhtml_id || "";
    var subimg_id = xhtml_id.replace(this._xhtmlPrefix, this._subimgPrefix);
    return $(subimg_id).src.replace(/.*\//, ''); // filename
  },
  
  'registerEventHandler': function() {
    // show xhtml code checkbox
    Event.observe('show_xhtml', 'click', function() {
      Spread.toggleXhtml();
    });
    
    // unisize image mouseover
    var uniOverHandler = function(event) {
      if($('show_xhtml').checked) {
        var xhtmluni_id = Event.element(event).id.replace(Spread._subimguniPrefix, Spread._xhtmluniPrefix);
        var filename = Event.element(event).src.replace(/.*\//, '');
        $(xhtmluni_id).style.background = '#fefeee';
        Spread._setXhtml(xhtmluni_id, filename);
      }
    }.bindAsEventListener(this);
    
    var uniOutHandler = function(event) {
        var xhtmluni_id = Event.element(event).id.replace(Spread._subimguniPrefix, Spread._xhtmluniPrefix);
        $(xhtmluni_id).style.background = '#fcfcfc';
    }.bindAsEventListener(this);
    
    var unis = document.getElementsByClassName('unisized');
    for(var i=0; i<unis.length; i++) {
      Event.observe(unis[i], 'mouseover', uniOverHandler);
      Event.observe(unis[i], 'mouseout', uniOutHandler);
    }
  }

}

App.postLoad( function() {
  Spread.toggleXhtml(); // check might survive a reload
  Spread.setXhtmlAll(); // init all 
  Spread.firstLoad = false;
  Spread.registerEventHandler();
});