/*****************************
** Usage:
**
** All images need a rollover image named "-ro", i.e. pic.gif + pic-ro.gif
**
** add a rel="rollover" param to the images
**
** or
**
** put them all in one containing div with rel="rollover" und give them rel="rolloverchild" to give them a grouped rollover effect
**
*****************************/

var rolloverC = Class.create({
  initialize: function() {
    this.imgCont = {};
    this.counter = 0;
  },
  initAllElements: function () {
    var elemCont = $$('img[rel="rollover"], input[rel="rollover"][type="image"]');
    elemCont.each(this.readImages, this);
    elemCont.each(this.hookImages);
    var parentCont = $$('div[rel="rollover"]');
    parentCont.each(this.hookParents, this);
  },
  hookParents: function (parentObj) {
  	parentObj.select('img[rel="rolloverchild"]').each(this.readImages, this);
  	parentObj.makePositioned();
  	var rollImageElem = new Element("div", {'class': 'rollover_btn', 'style': 'width: 100%; height: 100%; position: absolute; top:0; left:0;'});
  	rollImageElemId = rollImageElem.identify();
  	parentObj.insert(rollImageElem);
    $(rollImageElemId).observe('mouseover', function(event) {
      var elem = event.element();
      elem.up('div[rel="rollover"]').select('img[rel="rolloverchild"]').each(rollCC.childImageOn);
    } );
    $(rollImageElemId).observe('mouseout', function(event) {
      var elem = event.element();
      elem.up('div[rel="rollover"]').select('img[rel="rolloverchild"]').each(rollCC.childImageOff);
    } );
  },
  childImageOn: function(imageObj) {
     imageObj.src = rollCC.imgCont[imageObj.identify()][1].src;
  },
  childImageOff: function(imageObj) {
     imageObj.src = rollCC.imgCont[imageObj.identify()][0].src;
  },
  readImages: function (imageObj) {
    var lastPoint = imageObj.src.lastIndexOf('.');
    if (lastPoint > -1) {
      var namepath = imageObj.src.slice(0, lastPoint);
      if (namepath.substr(-4)!="-off") {
			  var filesuffix = imageObj.src.slice(lastPoint);
			  var ident = imageObj.identify();
			  var imgArr = new Array;
			  imgArr[0] = new Image;
			  imgArr[0].src = imageObj.src;
			  imgArr[1] = new Image;
			  imgArr[1].src = namepath+"-ro"+filesuffix;
			  this.imgCont[ident] = imgArr;
      }
    }
  },
  hookImages: function (imageObj) {
    imageObj.observe('mouseover', function(event) {
      var elem = event.element();
      elem.src = rollCC.imgCont[elem.identify()][1].src;
    } );
    imageObj.observe('mouseout', function(event) {
      var elem = event.element();
      elem.src = rollCC.imgCont[elem.identify()][0].src;
    } );
  }
});

Event.observe(window, 'load', function() {
  rollCC = new rolloverC;
  rollCC.initAllElements();
});



// To Dos:
// - Nicht, wenn bereits -ro im namen ist
// - Klassenwechsler (statt Bildwechsler)