// No DOM and IE Mac = no JavaScript functionality
if((document.getElementById) && (!((navigator.userAgent.indexOf('MSIE') > -1) && (navigator.userAgent.indexOf('Mac') > -1)))) {
	Behaviour.register({
	  'body': function(element) {
			element.addClassName('js');
		},
	  'ul.menu li a': function(element) {
	   if(!element.up('li').hasClassName('act')) {
       element.observe('mouseover', (function(event) {
          if(this.fx) { this.fx.cancel(); }
          this.fx = new Effect.Morph(this, { style: { backgroundColor: '#DCDCDC' }, duration: 0.4 }); // backgroundColor: '#64788C', color: '#FFF'
        }).bindAsEventListener(element));
       
       element.observe('mouseout', (function(event) {
          if(this.fx) { this.fx.cancel(); }
          this.fx = new Effect.Morph(this, { style: { backgroundColor: '#F4F4F4' }, duration: 0.4 }); // backgroundColor: '#F4F4F4', color: '#787878'
        }).bindAsEventListener(element));
      }
	  },
		'#content.gallery #scroller, #content.entry #scroller': function(element) {
			element.o = new Feinmass.Ui.Scroller(element);
		},
		'#content.team #scroller': function(element) {
			element.o = new Feinmass.Ui.TeamScroller(element);
		},
		'#content.home #scroller': function(element) {
			element.o = new Feinmass.Ui.AutoScroller(element);
		},
		'.item a img': function(element) {
		  element.up('a').o = new Feinmass.Ui.ToolTip(element.up('a'));
		},
		'.thumbnail a img': function(element) {
      element._opacity = element.getOpacity();
		  element.observe('mouseover', (function(event) {
		    if(this.fx) {
          this.fx.cancel();
        }
		    this.fx = new Effect.Opacity(this, { from: this.getOpacity(), to: 0.99, duration: 0.2 });
		  }).bindAsEventListener(element));
		  
		  element.observe('mouseout', (function(event) {
		    if(this.fx) {
          this.fx.cancel();
        }
		    this.fx = new Effect.Opacity(this, { from: this.getOpacity(), to: element._opacity, duration: 0.2 });
		  }).bindAsEventListener(element));
		},
    '#content.entry .overview a': function(element) {
      element.o = new Feinmass.Ui.Overview(element);
    },
    '#content.team .overview': function(element) {
      element.o = new Feinmass.Ui.TeamOverviewList(element);
    },
    '#content.team #scroller a.person': function(element) {
      element.o = new Feinmass.Ui.TeamOverviewLink(element);
    },
    '.thumbnails a': function(element) {
      element.observe('mouseover', (function(event) {
        var id = this.id.replace('img', 'txt');
        var el = $(id);
        if(el) {
          el.addClassName('hover');
        }
      }).bindAsEventListener(element));
      
      element.observe('mouseout', (function(event) {
        var id = this.id.replace('img', 'txt');
        var el = $(id);
        if(el) {
          el.removeClassName('hover');
        }
      }).bindAsEventListener(element));
    },
    '.textlist a': function(element) {
      element.observe('mouseover', (function(event) {
        var id = this.id.replace('txt', 'img');
        var el = $(id);
        if(el) {
          el.addClassName('hover');
        }
      }).bindAsEventListener(element));
      
      element.observe('mouseout', (function(event) {
        var id = this.id.replace('txt', 'img');
        var el = $(id);
        if(el) {
          el.removeClassName('hover');
        }
      }).bindAsEventListener(element));
    },
    '.more': function(element) {
      if(!Prototype.Browser.IE_LT_7) { // IE 6 does some stragne things with this when we use sIFR
        element.o = new Feinmass.Ui.More(element);
      }
    }
	});
}


if((navigator.userAgent.indexOf('Firefox') > -1) && (top != window)) {
	// Firefox: dom:loaded wird in iFrame nicht ausgeloest 
	Event.observe(window, 'load',  (function() {
		sIFR.initialize();
	})); 
} else {
	Event.observe(document, 'dom:loaded',  (function() {
		sIFR.initialize();
	})); 
}


/**
 * @namespace Holds functionality related to Feinmass.
 */
var Feinmass = { };


/**
 * @namespace Holds functionality related to the Feinmass Ui.
 */
Feinmass.Ui = { };


/**
 * @class Feinmass.Ui.Scroller
 */
Feinmass.Ui.Scroller = Class.create({
	_name: 'Ui.Scroller',
	
	initialize: function(element) {
		this.element = element;
		this.scrollable = this.element.down('.items');
    this.build();
    this.addEvents();
    
    this.effect = null;

    if(window.location.hash) {
      this.goToId(window.location.hash.substr(1));
    }
	},
	
	observe: function(event_name, callback) {
		this.element.observe(event_name, callback);
	},
	
	stopObserving: function(event_name, callback) {
		this.element.stopObserving(event_name, callback);
	},
	
	addEvents: function() {
	},
	
	getIdOfCurrentItem: function() {
    var current = this.scrollable.positionedOffset().left;

    for(var i = 0; i < this.items.length; i++) {
      var p = current + this.items[i].positionedOffset().left;
      
      if(p >= 0) {
        
        return (this.items[i].id) ? this.items[i].id: null;
      }
    }
	},
	
	getWidth: function() {
	  
	  this.items = this.element.select('.item');
	
	  return this.items.inject(0, (function(acc, el) {
	    return acc + el.getWidth() + el.getMarginH();
	  }).bind(this));
	},
	
	build: function() {

    this.addScrollBackButton();
     
    this.width = this.getWidth();
	  
	  this.width = this.width - this.items.last().getMarginRight();

    this.scrollable.setStyle({
      width: this.width + this.items.last().getMarginRight() + 'px'
    });
    
    this.addButtons();
    this.element.fire('Feinmass:UiScrollerStart', { distance: 0 });
	},
	
	addScrollBackButton: function() {
	  
	  if(this.getWidth() > document.viewport.getWidth()) {
      this.btn_start = new Element('a', { href: '#', 'class': 'btn-start', style: 'display:none' }).insert('zum Anfang');
      this.scrollable.insert(
        new Element('div', { 'class': 'item back' }).insert(
          this.btn_start
        )
      );
    }
	},
	
	addButtons: function() {
    this.btn_prev = new Element('a', { href: '#', 'class': 'btn-prev', style: 'display:none' });
    this.btn_next = new Element('a', { href: '#', 'class': 'btn-next', style: 'display:none' });

    this.observe('Feinmass:UiScrollerStart', this.toggleButtons.bindAsEventListener(this));
    
    this.element.insert(this.btn_prev);
    this.element.insert(this.btn_next);
	},
	
	beginning: function(event) {
	
	  event.stop();
	
	  var current = this.scrollable.positionedOffset().left;
	  this.move(-current);
	},
	
	end: function(event) {
	  
	  event.stop();
	
	  distance = document.viewport.getWidth() - this.width;
	  this.move(distance);
	},
	
	goToId: function(id) {
	  var item = (id.indexOf('p_') > -1) ? $(id): $(id.replace('p', 'p_'));

	  if(item) {
	    var pos = -(this.scrollable.positionedOffset().left + item.positionedOffset().left)
      this.move(pos);
	  }
	},
	
	next: function(event) {
	  var distance = 0;
	  var current = this.scrollable.positionedOffset().left;
	  var max = this.width - document.viewport.getWidth() + current;
	  
	  event.stop();

    for(var i = 0; i < this.items.length; i++) {
      var p = current + this.items[i].positionedOffset().left;

      if(p < 0) {
        continue;
      }

      var w = this.items[i].getWidth() + this.items[i].getMarginRight();
      if(((distance + w) > document.viewport.getWidth()) && (Object.isUndefined(this.items[i].down('div.space')))) {
        if(this.items[i].id) {
          this.goToId(this.items[i].id);
          break;
        } else {
          distance = distance + w; 
        }
      } else if((distance + w) >= max) {
        distance = max;
        this.move(-distance);
      } else {
        distance = distance + w; 
      }
    }
	},
	
	previous: function(event) {
	  var distance = 0;
	  var current = this.scrollable.positionedOffset().left;
	  var max = (current < 0) ? 0 - current: 0;
	  
	  event.stop();

    var m = this.width + current;
	  var r = 0;
	  for(var i = (this.items.length - 1); i >= 0; i--) {
	    var w = this.items[i].getWidth() + this.items[i].getMarginRight();
	    r = r + w;
	    
	    if(r < m) {
	      continue;
	    }
	    
	    if(r - w < m) {
	      distance = r - m;
	    } else {
	      distance = distance + w;
	    }
	    if(distance > document.viewport.getWidth()) {
	      distance = distance - w;
	      break;
	    }
	  }

	  distance = (distance > max) ? max: distance;
	  this.move(distance);
	},
	
	toggleButtons: function(event) {
    var d = (event.memo.distance) ? event.memo.distance: 0;
    var pos = this.scrollable.positionedOffset();
    
    if((pos.left + d) < 0) {
      if(!this.btn_prev.visible()) {
        new Effect.Opacity(this.btn_prev, { from: 0, to: 1, duration: 0.4,
          beforeStart: (function() {
            this.setStyle({
              opacity: 0,
              display: 'block'
            });
          }).bind(this.btn_prev),
          afterFinish: (function() {
            this.btn_prev.observe('click', this.previous.bindAsEventListener(this));
          }).bind(this)});
      }
    } else {
      if(this.btn_prev.visible()) {
        new Effect.Opacity(this.btn_prev, { from: 1, to: 0, duration: 0.4,
          beforeStart: (function() {
            this.btn_prev.stopObserving('click');
          }).bind(this), 
          afterFinish: (function() {
            this.setStyle({
              display: 'none'
            });
          }).bind(this.btn_prev)
        });
      }
    }

    if((pos.left + this.width + d) > document.viewport.getWidth()) {
      if(!this.btn_next.visible()) {
        new Effect.Opacity(this.btn_next, { from: 0, to: 1, duration: 0.4,
          beforeStart: (function() {
            this.setStyle({
              opacity: 0,
              display: 'block'
            });
          }).bind(this.btn_next),
          afterFinish: (function() {
            this.btn_next.observe('click', this.next.bindAsEventListener(this));
          }).bind(this)});
      }
      
      // btn to start
      if(this.btn_start && this.btn_start.visible()) {
        new Effect.Opacity(this.btn_start, { from: 1, to: 0, duration: 0.4,
          beforeStart: (function() {
            this.btn_start.stopObserving('click');
          }).bind(this), 
          afterFinish: (function() {
            this.setStyle({
              display: 'none'
            });
          }).bind(this.btn_start)
        });
      }
    } else {
      if(this.btn_next.visible()) {
        new Effect.Opacity(this.btn_next, { from: 1, to: 0, duration: 0.4,
          beforeStart: (function() {
            this.btn_next.stopObserving('click');
          }).bind(this), 
          afterFinish: (function() {
            this.setStyle({
              display: 'none'
            });
          }).bind(this.btn_next)
        });
      }
      
      // btn to start
      if(this.btn_start && !this.btn_start.visible()) {
        new Effect.Opacity(this.btn_start, { from: 0, to: 1, duration: 0.4,
          beforeStart: (function() {
            this.setStyle({
              opacity: 0,
              display: 'block'
            });
          }).bind(this.btn_start),
          afterFinish: (function() {
            this.btn_start.observe('click', this.beginning.bindAsEventListener(this));
          }).bind(this)});
      }
    }
	},
	
	move: function(distance) {
	
	  if(this.is_moving) {
	    return;
	  }
	
	  if(this.fx) {
	    this.fx.cancel();
	  }
	  
    this.element.fire('Feinmass:UiScrollerStart', { distance: distance });
    this.is_moving = true;
	
	  this.fx = new Effect.Move(this.scrollable, { x: distance, y: 0, mode: 'relative', duration: 0.75,  afterFinish: this.moveFinished.bind(this) });
	},
	
	moveFinished: function() {
	  this.fx = null;
    this.is_moving = false;
	  this.element.fire('Feinmass:UiScrollerEnd');
	}
});

/**
 * @class Feinmass.Ui.TeamScroller
 */
Feinmass.Ui.TeamScroller = Class.create(Feinmass.Ui.Scroller, {
	_name: 'Ui.TeamScroller',

  next: function(event) {
	  var distance = 0;
	  var current = this.scrollable.positionedOffset().left;
	  var max = this.width - document.viewport.getWidth() + current;
	  
	  event.stop();

    for(var i = 0; i < this.items.length; i++) {
      var p = current + this.items[i].positionedOffset().left;

      if(p <= 0) {
        continue;
      }

      if(this.items[i].id) {
        this.goToId(this.items[i].id);
      }
      
      if(this.items[i].hasClassName('back')) {
        this.move(-max);
      }
    }
	},
  
  previous: function(event) {
	  var distance = 0;
	  var current = this.scrollable.positionedOffset().left;
	  var max = (current < 0) ? 0 - current: 0;
	  
	  event.stop();

    var m = this.width + current;
	  var r = 0;
	  for(var i = (this.items.length - 1); i >= 0; i--) {
	    var w = this.items[i].getWidth() + this.items[i].getMarginRight();
	    r = r + w;

	    if(r <= m) {
	      continue;
	    }

	    if(this.items[i].id) {
        this.goToId(this.items[i].id);
        break;
      }
      
      if(i == 0) {
        this.move(max);
        break;
      }
	  }
	}
});



/**
 * @class Feinmass.Ui.AutoScroller
 */
Feinmass.Ui.AutoScroller = Class.create(Feinmass.Ui.Scroller, {
	_name: 'Ui.AutoScroller',
	
	initialize: function($super, element) {
	  $super(element);

    this.scrollable.makePositioned();
    if(this.width > document.viewport.getWidth()) {
      this.executer = window.setTimeout((function() {
        window.setInterval(this.auto.bind(this), 15)
      }).bind(this), 500);
	  }
	},
	
  addScrollBackButton: function() {
    // no btn
  },
  
  addButtons: function () {
    // no btns
  },
  
  toggleButtons: function() {
    // nothing todo here
  },
  
  auto: function() {
    this.move(-1);
  },
  
  move: function(distance) {
    var pos = this.scrollable.positionedOffset().left + distance;

    var item = this.element.select('.item').first();
        
    if(Math.abs(pos) >= (item.getWidth() + item.getMarginRight())) {
      pos = 0;
      this.scrollable.appendChild(item);
    }

    this.scrollable.setStyle({
			left: pos + 'px'
    });
  }
});


/**
 * @class Feinmass.Ui.ToolTip
 */
Feinmass.Ui.ToolTip = Class.create({
	_name: 'Ui.ToolTip',
	
	initialize: function(element) {
    this.element = element;
    this.text = this.element.readAttribute('title');
    this.element.writeAttribute('title', '');
    this.addEvents();
	},
	
	addEvents: function() {
    if(!this.text) {
	    return;
	  }
    this.element.observe('mouseover', this.show.bindAsEventListener(this));
	  this.element.observe('mouseout', this.hide.bindAsEventListener(this));
	},
	
	build: function() {
    var el = document.getElementsByTagName('body')[0].down('.tooltip');
    
    if(!el) {
	    var el = new Element('div', { 'class': 'tooltip', 'style': 'display: none;' });
	    el.setOpacity(0);
	    document.getElementsByTagName('body')[0].insert(el);

	    document.observe('mousemove', (function(event) {
	      var pos = event.pointer();
	      var x = pos.x + 10;
	      var y = pos.y + 10;
	      
	      if((x + this.getWidth() > document.viewport.getWidth())) {
	        x = (x - 15) - this.getWidth();
	      }
	      
	      if((y + this.getHeight() > document.viewport.getHeight())) {
	        y = (y - 10) - this.getHeight();
	      }
	      
        this.setStyle({
          left: x + 'px',
          top: y + 'px'
        });
	    }).bindAsEventListener(el));
    }

	  return el;
	},
	
	show: function() {
	  var tt =  this.build();
	  tt.innerHTML = this.text.escapeHTML();

	  if(tt.fx) {
	    tt.fx.cancel();
	  }
	  
	  tt.fx = new Effect.Opacity(tt, { from: tt.getOpacity(), to: 1, duration: 0.2,
      beforeStart: (function() {
        this.setStyle({
          display: 'block'
        });
      }).bind(tt)}
    );
	},
	
	hide: function() {
	  var tt =  this.build();
	  
    if(tt.fx) {
	    tt.fx.cancel();
	  }
	  
	  tt.fx = new Effect.Opacity(tt, { from: tt.getOpacity(), to: 0, duration: 0.2, delay: 0.1,
      afterFinish: (function() {
        this.setStyle({
          display: 'none'
        });
      }).bind(tt)
    });
	}
});



/**
 * @class Feinmass.Ui.Overview
 */
Feinmass.Ui.Overview = Class.create({
	_name: 'Ui.Overview',
	
	initialize: function(element) {
    this.element = element;
    
    this.addEvents();
	},
	
	addEvents: function() {
	  this.element.observe('click', this.show.bindAsEventListener(this));
	},
	
	build: function() {
	  var el = document.getElementsByTagName('body')[0].down('#overview');

	  if(!el) {
	    el = new Element('div', { id: 'overview', 'style': 'display: none;' });
      el.setOpacity(0);
      document.getElementsByTagName('body')[0].insert(el);
      var content_el = new Element('div', { 'class': 'content loading' });
      el.insert(content_el);
      content_el.insert('&nbsp;');
      
	    el.observe('click', this.hide.bindAsEventListener(this));
	  }
	  
	  return el;
	},
	
	load: function() {
	  if(this.is_loaded) {
	    return;
	  }
	  var url = this.element.readAttribute('rel');
	  this.request = new Ajax.Request(url, {
	    onSuccess: this.onSuccess.bind(this),
	    onFailure: this.onFailure.bind(this)
	  });
	},
	
	onSuccess: function(response) {
	  var el = this.build().down('.content');
	  
    el.setOpacity(0);
	  el.removeClassName('loading');
    
	  el.innerHTML = response.responseText;
	  Behaviour.applyToElement(el);
	  
	  new Effect.Opacity(el, { from: el.getOpacity(), to: 1, duration: 0.4,
      beforeStart: (function() {
        this.setStyle({
          display: 'block'
        });
        if(typeof sIFR != 'undefined') {
					sIFR.replace(fago, {
						selector: '#overview h1',
						css: [
							'.sIFR-root { font-size: 26px; color: #DCDCDC; }',
							'em { font-style: normal; color: #DCDCDC; }'
						],
						wmode: 'transparent'
					});
        }
      }).bind(el),
      afterFinish: (function() {
        this.fixHeight();
      }).bind(this)}
    );
	  
	  this.is_loaded = true;
	},
	
	onFailure: function() {
    window.location.href = this.element.href;
	},
	
	fixHeight: function() {
    var el = this.build().down('.content');
    var h = el.getHeight();
    var oEl = el.up('#overview');
    var oH = oEl.getHeight();
    if(oH < (h + el.getMarginV())) {
      el.up('#overview').setStyle({
        'height': h + el.getMarginV() + 25 + 'px'
      });
    }
	},
	
	show: function(event) {
	  var el = this.build();
	  var h = (document.viewport.getHeight() > document.getElementsByTagName('body')[0].getHeight()) ? document.viewport.getHeight(): document.getElementsByTagName('body')[0].getHeight();
	  
	  event.stop();
	  
	  el.setStyle({
	    height: h + 'px'
	  });
	  
    if(this.fx) {
      this.fx.cancel();
    }

		this.fx = new Effect.Opacity(el, { from: el.getOpacity(), to: 1, duration: 0.4,
      beforeStart: (function() {
        this.setStyle({
          display: 'block'
        });
      }).bind(el)}
    );

    this.fixHeight();
    
    this.load();
	},
	
	hide: function(event) {
	  var el = this.build();
	  
	  if((event.element().nodeName.toLowerCase() == 'a') || event.element().nodeName.toLowerCase() == 'img') {
	    return;
	  }
	  
    if(this.fx) {
      this.fx.cancel();
    }

		this.fx = new Effect.Opacity(el, { from: el.getOpacity(), to: 0, duration: 0.4,
      afterFinish: (function() {
        this.setStyle({
          display: 'none'
        });
      }).bind(el)}
    );	  
	}
});



/**
 * @class Feinmass.Ui.More
 */
Feinmass.Ui.More = Class.create({
	_name: 'Ui.More',
	
	initialize: function(element) {
    this.element = element;
    
    this.height = this.element.getHeight();
    this.margin = this.element.getMarginBottom();

    this.element.setStyle({
      height: 0 + 'px',
      opacity: 0,
      marginBottom: 0 + 'px'
    });
    this.element.hide();
    this.build();
	},
	
	build: function() {
	  this.btn = new Element('a', { href: '#', title: 'Mehr' }).insert('&nbsp;&gt;&nbsp;Mehr');
    var el = this.element.previous();
	  el.insert(this.btn);
	  this.btn.observe('click', this.toggle.bindAsEventListener(this));
	},
  
  toggle: function(event) {
    event.stop();
    if(this.element.visible()) {
      if(Prototype.Browser.IE_LT_7) {
        this.element.hide();
      } else {
        new Effect.Parallel([
            new Effect.Morph(this.element, { style: {
              height: 0 + 'px',
              marginBottom: 0 + 'px'
            }}),
            new Effect.Opacity(this.element, { from: this.element.getOpacity(), to: 0})
          ],
          {
            //sync: true,
            duration: 0.4,
            afterFinish: (function() {
              this.element.hide();
              this.btn.innerHTML = '&nbsp;&gt;&nbsp;Mehr';
            }).bind(this)
          }
        );
      }
    } else {
      if(Prototype.Browser.IE_LT_7) {
        this.element.setStyle({
          opacity: 1
        });
        this.element.show();
      } else {
        new Effect.Parallel([
            new Effect.Opacity(this.element, { from: this.element.getOpacity(), to: 1}),
            new Effect.Morph(this.element, { style: { 
              height: this.height + 'px',
              marginBottom: this.margin + 'px'
            }})
          ],
          {
            //sync: true,
            duration: 0.4,
            beforeStart: (function() {
              this.element.show();
            }).bind(this),
            afterFinish: (function() {
              this.btn.innerHTML = '&nbsp;&gt;&nbsp;Weniger';
            }).bind(this)
          }
        );
      }
    }
  }
});



/**
 * @class Feinmass.Ui.TeamOverviewList
 */
Feinmass.Ui.TeamOverviewList = Class.create({
	_name: 'Ui.TeamOverviewList',
	
	initialize: function(element) {
    this.element = element;
    this.scroller = $$('#scroller')[0];
    
    if(this.scroller) {
      this.addEvents();
    }
	},
	
	addEvents: function() {
	  this.element.select('a').each((function(el) {
	    el.observe('click', this.goTo.bindAsEventListener(this));
	  }).bind(this));
	  
	  this.scroller.observe('Feinmass:UiScrollerEnd', this.setState.bindAsEventListener(this));
	  
	},
	
	goTo: function(event) {
	  var el = event.element();
	  var id = el.href.match(/\#(.*)/)[1];
	  if(id) {
      this.scroller.o.goToId(id);       
    }
	},
	
	setState: function(event) {
    var id = this.scroller.o.getIdOfCurrentItem();
    
    var a = this.element.select('a');
    if(id) {
      id = id.replace('_', '');

      for(var i = 0; i < a.length; i++) {
        if(a[i].href.indexOf('#' + id) > -1) {
          a[i].addClassName('act');
        } else {
          a[i].removeClassName('act');
        }
      }
    } else {
      a.each((function(el) {
        el.removeClassName('act');
      }));
    }
	}
});



/**
 * @class Feinmass.Ui.TeamOverviewLink
 */
Feinmass.Ui.TeamOverviewLink = Class.create({
	_name: 'Ui.TeamOverviewLink',
	
	initialize: function(element) {
    this.element = element;
    this.scroller = $$('#scroller')[0];
    
    if(this.scroller) {
      this.addEvents();
    }
	},
	
	addEvents: function() {
	  this.element.observe('click', this.goTo.bindAsEventListener(this));
	},
	
	goTo: function(event) {
	  var id = this.element.href.match(/\#(.*)/)[1];
	  if(id) {
      this.scroller.o.goToId(id);       
    }
	}
});