/*
 * sodHover v1 Javascript (c) 2007 by Alexander v. Weiss | www.vonweiss.de
 *
 * sodHover automatically converts links, to change the image on mouseover.
 * Just give them ids like "hover_...". Mark active links with 
 * class="selected" and include this script.
 */

//var sodHover_image_dir = 'base/img/menu/';
var sodHover_image_type = 'jpg';

// Change filename by State. e.g.:
//  false  => spacer.gif, 
//  "over" => link id + "_over." + imge_type;
var sodHover_image_states = Object.extend({ 
			normal:     false,  // mouseout on link
			active:     "over", // mouseout on active link
			over:       "over", // mouseover on link
      activeover: "over"  // mouseover on active link
});

/* 
-- html:
<ul>
  <li><a href="#" id="hover_home"><span>Home</span></a></li>
  <li><a href="#" id="hover_service" class="selected"><span>Service</span></a></li>
</ul>
-- hover images:
   image_dir + link id + image_state + image_type
   e.g.: 
   config:
         image_dir = 'hoverimages/';
         image_states["normal"] = false;
         image_states["over"] = "HOVeR";
         image_states["activeover"] = "HOVeR_selected";
         image_type = 'jpg';
   result on mouseover:
         "hoverimages/hover_home_HOVeR.jpg"
         "hoverimages/hover_service_HOVeR_selected.jpg"
   result on mouseout:
         "hoverimages/spacer.gif" // spacer must be an 1x1 pixel transparent gif
*/

var sodHover = {

  start: function() {
  
    Window.onDomReady(sodHover.init.bind(sodHover));
    
  },

	init: function() {
  
		this.anchors = this.images = this.selected = [];
    this.known_states = new Array("normal","active","over","activeover");

    // Import config
    this.dir = sodHover_image_dir;
    this.type = sodHover_image_type;
    this.states = sodHover_image_states;

    this.convert_menu_links();
    
  },
  
  convert_menu_links: function() {
    // Search for links with id="hover_..."
		$A(document.getElementsByTagName('a')).each(function(el){
			if(el.href && el.id && el.id.test('^hover_', 'i')) {

        // Preload Images
        for (i=0; i < this.known_states.length; i++) {

          x = this.known_states[i];

          if (!this.images[x])
            this.images[x] = [];
        
          this.images[x][el.id] = new Image();
          this.images[x][el.id].src = (!this.states[x]) ? 
            this.dir + "spacer.gif" : 
            this.dir + el.id + "_" + this.states[x] + "." + this.type;
        }

        // Mark Active Link and replace image
        if (el.className == "selected") {
          this.selected[el.id] = true;
          this.replace_image(el,"active");
        }

        // Add Events
				el.onmouseover = this.over.pass(el, this);
				el.onmouseout = this.out.pass(el, this);

				this.anchors.push(el);
			}
		}, this);
  },

  // Mouseover event
	over: function(link) {
    this.replace_image(link,
      (this.selected[link.id] ? "activeover" : "over")
    );
  },

  // Mouseout event
	out: function(link) {
    this.replace_image(link,
      (this.selected[link.id] ? "active" : "normal")
    );
	},
  
  replace_image: function(link,state) {
    replace_by = "url(" + this.images[state][link.id].src + ")";
    if (link.style.backgroundImage != replace_by) {
      link.style.backgroundImage = replace_by;
    }
  }
}

sodHover.start();