/*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* JsListNewsTicker 2.0
* Tickerize Unordered List-Items
* Dirk Ginader
* www.ginader.de
* dirk@ginader.de
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* degrades nicely, unbobtrusive
* testet in:
* Windows
* * Firefox 1.5
* * IE 7 Beta 2
* * IE 6
* * IE 5.5
* * IE 5.01
* * Opera 8.02
* MAC OS X
* * Firefox 1.5
* * Firefox 2 Beta
* * Safari 2.03
* * IE 5.02 MAC
* Linux (Ubuntu)
* * Firefox 1.07
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* USAGE in the Head of an HTML-Page:
<script language="JavaScript" type="text/javascript" src="js/listNewsTicker.js"></script>
<script language="JavaScript" type="text/javascript">
window.onload = function(){
	newsTicker = new JsListNewsTicker('tickerh','newsTicker',5,true,'tick');
	newsTicker2 = new JsListNewsTicker('ticker','newsTicker2',3000,true,'blend');
}
</script>
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* License:
* This file is entirely BSD licensed.

* Info:
* Include The listNewsTicker.js into the Head of you Document

* Create as many Instances of the Ticker as you want by doing the following:
* * To create a horizontal Ticker
* * newsTicker = new JsListNewsTicker('tickerh','newsTicker',5,true,'tick');
* * To create a rotating Ticker
* * newsTicker2 = new JsListNewsTicker('ticker','newsTicker2',3000,true,'blend');
* * * The 1st Parameter (String) is the Id of the Wrapping Element around the List
* * * The 2nd Parameter (String) is the Name of the Instance (needed for the Object to reference to itself)
* * * The 3rd Parameter (Integer) is the Time of the Interval the Ticker should react (in Miliseconds).
     				    Of course you want a horizontal Ticker to be triggered faster than a rotating Ticker
* * * The 4th Parameter (Boolean) defines if the Ticker should stop if the Mouse hovers over (true or false)
* * * The 5th Parameter (String) defines the Mode the Ticker should run in ("tick" or "blend")
						Tick creates a horizontal Ticker, while Blend rotates the Elements of the List by showing only ony at the time

* The Script attaches the CSS-Class "tickerAttached" to the wrapping Element after the behavoris are attached successful, so
  you can style the 2 States of the Ticker (With JavaScript and Without) totally different if you want to

* More information:
* http://blog.ginader.de/dev/JsListNewsTicker/JsListNewsTicker_2.0/index.php
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*/
JsListNewsTicker = function(tickerDivID,objName,interval,pauseOnOver,mode){
  if(document.getElementById){
    this.tickerDivID = document.getElementById(tickerDivID);
    this.objName = objName;
    this.interval = interval;
    this.init();
    if(pauseOnOver){
      this.attachPauseOnOver();
    }
    this[mode]();
  }
}
o = JsListNewsTicker.prototype;
o.init = function(){
  this.tickerItems = this.tickerDivID.getElementsByTagName("li");
  this.allowTick = true;
  this.tickCount=0;
  this.tickerDivID.className = 'tickerAttached';
}
o.attachPauseOnOver = function(){
  this.tickerDivID.obj = this;
  this.tickerDivID.onmouseover=function() {
    this.obj.MouseOver();
  }
  this.tickerDivID.onmouseout=function() {
    this.obj.MouseOut();
  }
}
o.MouseOver = function(){
  this.allowTick = false;
}
o.MouseOut = function(){
  this.allowTick = true;
}
o.blend = function(){
  if(this.allowTick){
    if(document.all){
      if(this.tickerDivID.filters && this.tickerDivID.filters.revealTrans){
        this.tickerDivID.filters.revealTrans.Apply();
      }
    }
    this.showOnlyItem(this.tickCount);
    if(document.all){
      if(this.tickerDivID.filters && this.tickerDivID.filters.revealTrans){
        this.tickerDivID.filters.revealTrans.play();
      }
    }
    this.tickCount++;
    if(this.tickCount>=this.tickerItems.length){
      this.tickCount=0;
    }
  }
  window.setTimeout(""+this.objName+".blend()",this.interval);
}
o.setUpTickerElements = function(){
  for(var i=0;i<this.tickerItems.length;i++){
    while(this.getItemHeight(this.tickerItems[i])>30){
      this.enlargeItemWidth(this.tickerItems[i]);
    }
  }
  var newContainerWidth = 0;
  for(var i=0;i<this.tickerItems.length;i++){
    newContainerWidth+=this.getItemWidth(this.tickerItems[i])+15;
  }
  this.tickerListWidth = newContainerWidth;
  this.tickerListPosition = 0;
  this.tickerList = this.tickerItems[0].parentNode;
  this.tickerList.style.width=this.tickerListWidth*2;
  this.tickerList.innerHTML = this.tickerItems[0].parentNode.innerHTML+this.tickerItems[0].parentNode.innerHTML;
  this.tickerElementsSetUp = true;
}
o.tick = function(){
  if(!this.tickerElementsSetUp){
    this.setUpTickerElements();
  }
  if(this.allowTick){
    this.tickerListPosition = this.tickerListPosition-2;
    if(this.tickerListPosition<(this.tickerListWidth*-1)){
      this.tickerListPosition = 0;
    }
    this.tickerList.style.marginLeft = this.tickerListPosition;
  }
  window.setTimeout(""+this.objName+".tick()",this.interval);
}
o.getItemHeight = function(tickerItem){
  return tickerItem.offsetHeight;
}
o.getItemWidth = function(tickerItem){
  return tickerItem.offsetWidth;
}
o.enlargeItemWidth = function(tickerItem){
  tickerItem.style.width = tickerItem.offsetWidth+5;
  return tickerItem.offsetWidth;
}
o.showOnlyItem = function(tickerItem){
  this.hideAllItems();
  this.showItem(this.tickerItems[tickerItem]);
}
o.showItem = function(tickerItem){
  tickerItem.style.display = "list-item";
}
o.hideItem = function(tickerItem){
  tickerItem.style.display = "none";
}
o.hideAllItems = function(){
  for(var i=0;i<this.tickerItems.length;i++){
    this.hideItem(this.tickerItems[i]);
  }
}