/**
 * blanco.base.js
 * Copyright 2007 Heiko Bauer (hb at unshape dot com) | Unshape Design
 */

// global vars
var BlancoBase_ul2close = null;

/**
 * base class for several useful functions
 */
function BlancoBase() {
  /*** initialize ***/
  
  /**
   * eliminate flicker on hovering in ie
   */
  try {
  	document.execCommand("BackgroundImageCache", false, true);
  } catch(err) {}
  
  /*** properties ***/
  var selects = new Object();
  var cF = new Object();
  
  /*** methods ***/
  
  /**
   * bind a function to any scope (private)
   */
  if (!Function.prototype.bind) Function.prototype.bind = function(obj, args) {
    var method = this,
                 temp = function() {
                   return method.apply(obj|| window, args || arguments);
                 };
    return temp;
  }

  /**
   * tag (private)
   * shortcut for getElementById
   */
  var tag = function(id_) {
    return document.getElementById(id_);
  };
  
  /**
   * tags (private)
   * shortcut for getElmentsByTagName
   */
  var tags = function(root, tag) {
    return (root).getElementsByTagName(tag);
  };
  
  /**
   * eventToObject (private)
   * retrieve object related to event e
   */
  var eventToObject = function(e) {
    return e ? e.target : window.event.srcElement;
  };
  
  /**
   * selectReplacement (private)
   */
  var selectReplacement = function(obj, w) {
    obj.className += ' replaced';
    var ulc = document.createElement('ul');
    ulc.className = 'selectTrigger';
    ulc.style['width'] = w + 'px';

    var lic = document.createElement('li');
    
    var triga = document.createElement('a');
    triga.className = 'selectTrigger';
    triga.href = '#this'
    triga.style['width'] = w + 'px';

    var h = function(e) {
      var obj = eventToObject(e);
      if (obj.parentNode.className != 'sfhover') {
        obj.parentNode.className = 'sfhover';
      }else{
        obj.parentNode.className = '';
      }
    };
    triga.onclick = h.bind(this);

    var h = function(e) {
      var obj = eventToObject(e);
      BlancoBase_ul2close = obj;
      window.setTimeout("BlancoBase_ul2close.parentNode.className = ''", 230);
    };
    triga.onblur = h.bind(this);

    var txt = document.createTextNode('Trigger');
    triga.appendChild(txt);
    lic.appendChild(triga);
    
    ulc.appendChild(lic);

    var ul = document.createElement('ul');
    ul.className = 'selectReplacement';
    ul.style['width'] = w + 'px';
    var opts = obj.options;
    for (var i=0; i<opts.length; i++) {
      var selectedOpt;
      if (opts[i].selected) {
        selectedOpt = i;
        break;
      }else{
        selectedOpt = 0;
      }
    }
    for (var i=0; i<opts.length; i++) {
      var li = document.createElement('li');
      var txt = document.createTextNode(opts[i].text);
      li.appendChild(txt);
      li.selIndex = opts[i].index;
      li.selectID = obj.id;
      var h = function(e) {
        var obj = eventToObject(e);
        selectMe(obj);
      };
      li.onclick = h.bind(this);
      if (i == selectedOpt) {
        li.className = 'selected';
        triga.innerHTML = opts[i].text;
      }
      if (window.attachEvent) {
        li.onmouseover = function() {
          this.className += ' hover';
        };
        li.onmouseout = function() {
          this.className = this.className.replace(new RegExp(" hover\\b"), '');
        };
      }
      ul.appendChild(li);
    }
    lic.appendChild(ul);
    
    var cd = document.createElement('div');
    cd.style['clear'] = 'left';
    
    obj.parentNode.insertBefore(cd, obj);
    
    selects[ul.id] = ulc;
    obj.parentNode.insertBefore(ulc, cd);
  };
  
  /**
   * selectMe (private)
   * select clicked list-item
   */
  var selectMe = function(obj) {
    obj.parentNode.style['zIndex'] = 0;
    var lis = tags(obj.parentNode, 'li');
    for (var i=0; i<lis.length; i++) {
      lis[i].style['zIndex'] = 0;
    }
    for (var i=0; i<lis.length; i++) {
      if (lis[i] != obj) {
        lis[i].className = '';
        var h = function(e) {
          var obj = eventToObject(e);
          selectMe(obj);
        };
        lis[i].onclick = h.bind(this);
      }else{
        setVal(obj.selectID, obj.selIndex);
        obj.className = 'selected';
        
        li = obj.parentNode.parentNode;
        li.className = obj.className.replace(new RegExp(" sfhover\\b"), '');

        li.firstChild.innerHTML = obj.innerHTML;
      }
    }
  };
  
  /**
   * setVal (private)
   * set value of clicked list-item in the original list
   */
  var setVal = function(objID, selIndex) {
    var obj = tag(objID);
    obj.selectedIndex = selIndex;
  };


  /**
   * replaceSelect (public)
   * replace single select 
   * e.g. var bb = new BlancoBase();
   *      bb.replaceSelect('something', 'selectReplacement');
   */
  this.replaceSelect = function(sel, w) {
    var s = tag(sel);
    selectReplacement(s, w);
  };
  
  /**
   * replaceSelectsInForm (public)
   * replace all selects in a form
   * e.g. var bb = new BlancoBase();
   *      bb.replaceSelectsInForm('frm', 'selectReplacement');
   */
  this.replaceSelectsInForm = function(frm, w) {
    var f = tag(frm);
    var s = tags(f, 'select');
    for (var i=0; i<s.length; i++) {
      selectReplacement(s[i], w);
    }
  };
  
  /**
   * makeDropDown (public)
   * transform dropdown
   * e.g. var bb = new BlancoBase();
   *      bb.makeDropDown('websites', 'erster');
   */
  this.makeDropDown = function(trigger_element, list_element) {
    /* set mousehooks */
    document.getElementById(trigger_element).onmouseover = function(){
      window.clearTimeout(cF[list_element]);
  
      document.getElementById(trigger_element).className = 'pfeil-ausgeklappt';
    
      document.getElementById(list_element).style.visibility = 'visible';
    
      document.getElementById(list_element).onmouseover = function(){
        window.clearTimeout(cF[list_element]);
        document.getElementById(list_element).style.visibility = 'visible';
        document.getElementById(trigger_element).className = 'pfeil-ausgeklappt';
      }
    
      document.getElementById(list_element).onmouseout = function(){
        cF[list_element] = window.setTimeout(function(){
        document.getElementById(list_element).style.visibility = 'hidden';
        document.getElementById(trigger_element).className = 'pfeil';
        }, 200);
      }
    }
    
    document.getElementById(trigger_element).onmouseout = function(){
      cF[list_element] = window.setTimeout(function(){
        document.getElementById(list_element).style.visibility = 'hidden';
        document.getElementById(trigger_element).className = 'pfeil';
      }, 200);
    }
    
    /* set hover effekt */
    var elems = document.getElementById(list_element).getElementsByTagName('div');
    for (var i=0; i<elems.length;i++) {
      if (elems[i].className == 'klapppunkt') {
        elems[i].onmouseover = function() {
          this.style.background = '#f0f0ef';
        }
        elems[i].onmouseout = function() {
          this.style.background = '#fff';
        }
      }
    }
  };
}