var defaultFeaturedPlayer='\
<div class="FP-ImageDiv"><img src="/images/featuredplayerimg.jpg" class="FP-Image"></div>\
<div class="FP-SideBar">\
  <div class="FP-Title"></div>\
  <div class="FP-Abstract"></div>\
</div>\
<div class="FP-Thumbs">\
  <div class="FP-ThumbHolder">\
    <div class="FP-Slide"></div>\
  </div>\
  <div class="FP-Prev"><img src="/images/featuredprev.gif"></div>\
  <div class="FP-Next"><img src="/images/featurednext.gif" width="37" height="17"></div>\
</div>\
';

storyObj = function(url,title,abstract,largeimg,thumb)
{
  this.url = url;
  this.title = title;
  this.abstract = abstract;
  this.largeimg = largeimg;
  this.thumb = thumb;
}

function createMethodReference(obj, methodName){
  return function(){obj[methodName]();}
};

featuredPlayerObj = function(fpdiv)
{
  this.div = document.getElementById(fpdiv);
  this.stories = new Array();
  this.thumbs = new Array();

  this.direction = 1; //forward=1 or reverse=-1
  this.state = 0; // 0 = stop, 1 = forward
  this.timer = 0; // holds pointer to timer 
  this.delay = 5000; // time between story flips
  this.index = -1; //current story being displayed
  this.fadeeffect = createMethodReference(this, 'fader');
  this.fadepercent = 0; // tracks how far it has faded
  this.fadestate = 0; //fading in or out
  this.nodes = new Array();
  this.scanfornodes(this.div); //check if the viewer is supplied
  if (!this.nodes['FP-ImageDiv']) {
    this.div.innerHTML = defaultFeaturedPlayer;
    this.scanfornodes(this.div);
  }

  //set these to the dom objects
  this.featuredImageDiv = this.nodes['FP-ImageDiv'];
  this.featuredImageDiv.onclick = this.linkclicked;
  this.featuredImageDiv.fp = this;
  this.title = this.nodes['FP-Title'];
  this.title.onclick = this.linkclicked;
  this.title.fp = this;
  this.image = this.nodes['FP-Image']; // display image obj
  this.slide = this.nodes['FP-Slide'];
  this.thumbholder = this.nodes['FP-ThumbHolder'];
  this.next = this.nodes['FP-Next'];
  this.prev = this.nodes['FP-Prev'];

  if (this.next != null) {
    this.next.onclick = this.nextClick;
    this.next.fp = this;
  }
  if (this.prev != null) {
    this.prev.onclick = this.prevClick;
    this.prev.fp = this;
  }
}

featuredPlayerObj.prototype.addStory=function(url,title,abstract,largeimg,thumb)
{
  this.stories[this.stories.length] = new storyObj(url,title,abstract,largeimg,thumb);
  var imgobj = document.createElement('img');
  imgobj.className = "imgthumb";
  imgobj.onmouseover = this.mouseOver;
  imgobj.onmouseout = this.mouseOut;
  imgobj.onclick = this.mouseClick;
  imgobj.index = this.thumbs.length;
  imgobj.width = 40;
  imgobj.height = 40;
  imgobj.fp = this;
  imgobj.title = title;
  imgobj.src = thumb; 

  this.thumbs[this.thumbs.length] = imgobj;
  this.slide.appendChild(imgobj);
  this.slide.style.display = "block"; //ie sucks, wont draw unless you do this
}

featuredPlayerObj.prototype.mouseOver=function()
{
    this.className = 'imgthumbon';
    this.fp.direction = 0;
}

featuredPlayerObj.prototype.mouseOut = function() {
    if (this.index != this.fp.index) {
        this.className = 'imgthumb';
    }
    this.fp.direction = 1;
}

featuredPlayerObj.prototype.mouseClick=function()
{

  if (this.fp.index != -1) {
    this.fp.thumbs[this.fp.index].className='imgthumb';
  }
  this.fp.direction = 1;
  this.fp.state = 0;
  this.fp.index = this.index - 1;
  clearTimeout(this.fp.timer);
  this.fp.startTransition();
}

featuredPlayerObj.prototype.linkclicked = function() {
    if (this.fp.index != -1) {
        document.location.href = this.fp.stories[this.fp.index].url;
    }
}

featuredPlayerObj.prototype.nextClick=function()
{
  this.fp.direction = 1;
  this.fp.state = 0;
  clearTimeout(this.fp.timer);
  this.fp.startTransition();
}
featuredPlayerObj.prototype.prevClick=function()
{
  this.fp.direction = -1;
  this.fp.state = 0;
  clearTimeout(this.fp.timer);
  this.fp.startTransition();
}

featuredPlayerObj.prototype.startTransition=function()
{
  if (this.index != -1) {
    this.thumbs[this.index].className='imgthumb';
  }
  this.index = this.index + this.direction;
  if (this.index >= this.stories.length) {
    this.index = 0;
  }
  if (this.index < 0) {
    this.index = this.stories.length - 1;
  }
  this.fade(0);
}

featuredPlayerObj.prototype.endTransition=function()
{
  this.fade(1);
  this.title.innerHTML = this.stories[this.index].title;
  this.nodes['FP-Abstract'].innerHTML = this.stories[this.index].abstract;
  this.thumbs[this.index].className='imgthumbon';
  //set slidebar position
  var pos = Math.floor(this.index / 4);
  if (this.thumbholder != null) {
    var offset = (this.thumbholder.clientWidth + 1) * pos;
    if (offset + this.thumbholder.clientWidth > this.slide.clientWidth) {
      offset = (this.thumbholder.clientWidth + 1) * (pos - 1) + (this.slide.clientWidth % this.thumbholder.clientWidth) - 2;
    }
    this.slide.style.left = -offset + "px";
  }
}

featuredPlayerObj.prototype.fade = function(state)
{
  this.fadepercent = (state) ? 0:100;
  this.fadestate = state;
  this.fader();
}

featuredPlayerObj.prototype.fader = function()
{
  if (this.fadepercent >= 100) {
    //set background image to next one 
    this.featuredImageDiv.style.backgroundImage = "url(" + this.stories[this.index].largeimg + ")";
  }
  if (this.fadestate) {
    if (this.fadepercent >= 100) {
      this.fadeInComplete();
      return;
    } else {
      this.fadepercent += 10;
    }
  } else {
    if (this.fadepercent <= 0) {
      this.fadeOutComplete();
      this.endTransition();
      return;
    } else {
      this.fadepercent -= 10;
    }
  }

  this.image.style.opacity = this.fadepercent/100;
  this.image.style.MozOpacity = this.fadepercent/100;
  this.image.style.KhtmlOpacity = this.fadepercent/100;
  this.image.style.filter = "alpha(opacity=" + this.fadepercent + ")";

  setTimeout(this.fadeeffect, 100);
}

featuredPlayerObj.prototype.scanfornodes=function(node)
{
  for (var i=0;i<node.childNodes.length;i++) {
    this.scanfornodes(node.childNodes[i]);
    if (node.childNodes[i].className && node.childNodes[i].className.indexOf("FP-") != -1) {
      this.nodes[node.childNodes[i].className] = node.childNodes[i];
    }
  }
}

featuredPlayerObj.prototype.fadeInComplete = function()
{
  if (this.state) { //start timer for next image switch
    this.timer = setTimeout(createMethodReference(this,'run'), this.delay);
  }
}

featuredPlayerObj.prototype.fadeOutComplete = function()
{
  this.image.src = this.stories[this.index].largeimg;
}

featuredPlayerObj.prototype.run=function()
{
  this.startTransition();
}