/* WBI SCROLLER
 * (c) Western Beauty Institute
 * written by Jim Tompkins
 * started February 19, 2008
 * current version July 7, 2008
 */

// Setup
var waitSecs   = 3;        // set number of seconds to hold on story (3 is good)
var animSpeed  = 30;       // set speed of animation (30 is a good start)
var fastSpeed  = 10;       // set speed of speed animation (10 is a good start)
var contentHgt = 125;      // set height of content area, i.e. 125
var waitMSecs  = waitSecs * 1000;
var n = 0;
var readMore   = ( language == "es" ) ? "Leer más..." : "Read more...";
var linkTitle  = ( language == "es" ) ? "Obtén la historia completa y más fotografías" 
                                      : "Get full story and more photos";
// allow language setting to use supplemental style class
var newsTitleLang = 'newsTitleLang_' + language;
var newsDescLang  = 'newsDescLang_' + language;
var ticker = 0

// wbiScroller function
function wbiScroller(language) {
  
  newsItem.language = language ? language : 'en-us' ;

  contentDiv1Elmt = document.getElementById("contentDiv1")
  contentDiv2Elmt = document.getElementById("contentDiv2")
  contentDiv3Elmt = document.getElementById("contentDiv3")
  
  contentDiv1Elmt.innerHTML = loadStory()
  contentDiv1Elmt.style.top = "0px"
  contentDiv1Elmt.onmouseover = function() { contentDiv1Elmt.mouseHold = 1 }
  contentDiv1Elmt.onmouseout = function() { contentDiv1Elmt.mouseHold = 0 }
  
  contentDiv2Elmt.innerHTML = loadStory()
  contentDiv2Elmt.style.top = contentHgt + "px"
  contentDiv2Elmt.onmouseover = function() { contentDiv2Elmt.mouseHold = 1 }
  contentDiv2Elmt.onmouseout = function() { contentDiv2Elmt.mouseHold = 0 }
  
  contentDiv3Elmt.innerHTML = loadStory()
  contentDiv3Elmt.style.top = contentHgt*2 + "px"
  contentDiv3Elmt.onmouseover = function() { contentDiv3Elmt.mouseHold = 1 }
  contentDiv3Elmt.onmouseout = function() { contentDiv3Elmt.mouseHold = 0 }
  
  contentDivElmt1 = contentDiv1Elmt;  // buckets to move in conveyor belt fashion
  contentDivElmt2 = contentDiv2Elmt;
  contentDivElmt3 = contentDiv3Elmt;
  
  waitTime()
}

// Animate the content
function animation() {
  var ready1,ready2,ready3;
  if (parseInt(contentDivElmt2.style.top) > 0) { // if the conveyor is above focus
    if (contentDivElmt1.mouseHold) { // focus on 1st story
      if (parseInt(contentDivElmt1.style.top) < 0) { // move 1st story back down to focus
        contentDivElmt1.style.top = parseInt(contentDivElmt1.style.top) + 2 + "px"
      } else {
        contentDivElmt1.style.top = "0px"
        ready1 = true
      }
      if (parseInt(contentDivElmt2.style.top) < parseInt(contentDivElmt1.style.top) + (contentHgt*2)) { // move 2nd story into place
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) + 6 + "px" 
      } else if (parseInt(contentDivElmt2.style.top) > parseInt(contentDivElmt1.style.top) + (contentHgt*2)) {
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 1 + "px"
      } else {
        ready2 = true
      }
      contentDivElmt1.firstChild.style.height = (parseInt(contentDivElmt2.style.top) - parseInt(contentDivElmt1.style.top)) + "px" // resize mouseover div
      contentDivElmt2.firstChild.style.height = (parseInt(contentDivElmt3.style.top) - parseInt(contentDivElmt2.style.top)) + "px" // resize mouseover div
      contentDivElmt3.firstChild.style.height = contentHgt + "px"                                                                  // resize mouseover div
      if (parseInt(contentDivElmt3.style.top) < parseInt(contentDivElmt2.style.top) + contentHgt) { // move 3rd story into place
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) + 6 + "px"
      } else if (parseInt(contentDivElmt3.style.top) < parseInt(contentDivElmt2.style.top) + contentHgt) {
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) - 1 + "px"
      } else {
        ready3 = true
      }
      if (ready1 && ready2 && ready3) { // hold animation on mouseover after focus on 1st story
        contentDivElmt1.firstChild.style.height = contentHgt*2 + "px"
        contentDivElmt1.firstChild.childNodes[3].style.position = 'relative'
        contentDivElmt1.firstChild.childNodes[3].style.visibility = 'visible'
        setTimeout(animation, 200)
      } else setTimeout(animation, animSpeed)
    } else if (contentDivElmt2.mouseHold) { // focus on 2nd story
      if (parseInt(contentDivElmt2.style.top) > 1) { // move 2nd story toward focus
        contentDivElmt1.style.top = parseInt(contentDivElmt1.style.top) - 3 + "px" // move 1st story up out of the way
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 3 + "px" // move 2nd story up toward focus
      } else {
        contentDivElmt1.style.top = -contentHgt + "px"
        contentDivElmt2.style.top = "0px"
      }
      if (parseInt(contentDivElmt3.style.top) < parseInt(contentDivElmt2.style.top) + (contentHgt*2)) { // move 3rd story into place
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) + 4 + "px"
      } else if (parseInt(contentDivElmt3.style.top) > parseInt(contentDivElmt2.style.top) + (contentHgt*2)) {
				contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) - 3 + "px"
			}
      contentDivElmt1.firstChild.style.height = (parseInt(contentDivElmt2.style.top) - parseInt(contentDivElmt1.style.top)) + "px" // resize mouseover div
      contentDivElmt2.firstChild.style.height = (parseInt(contentDivElmt3.style.top) - parseInt(contentDivElmt2.style.top)) + "px" // resize mouseover div
      contentDivElmt3.firstChild.style.height = contentHgt + "px"                                                                  // resize mouseover div
      setTimeout(animation, animSpeed)
    } else if (contentDivElmt3.mouseHold) { // move 3rd story toward focus
      if (parseInt(contentDivElmt2.style.top) > 1) { 
        contentDivElmt1.style.top = parseInt(contentDivElmt1.style.top) - 4 + "px" // move 1st story out of the way
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 4 + "px" // move 2nd story up toward focus
      } else {
        contentDivElmt1.style.top = -contentHgt + "px"
        contentDivElmt2.style.top = "0px"
      }
      if (parseInt(contentDivElmt3.style.top) > parseInt(contentDivElmt2.style.top) + contentHgt) { // move 3rd story into place
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) - 4 + "px"
      } else if (parseInt(contentDivElmt3.style.top) < parseInt(contentDivElmt2.style.top) + contentHgt) { 
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) + 1 + "px"
      }
      contentDivElmt1.firstChild.style.height = (parseInt(contentDivElmt2.style.top) - parseInt(contentDivElmt1.style.top)) + "px" // resize mouseover div
      contentDivElmt2.firstChild.style.height = (parseInt(contentDivElmt3.style.top) - parseInt(contentDivElmt2.style.top)) + "px" // resize mouseover div
      contentDivElmt3.firstChild.style.height = (contentHgt*2) + "px"                                                              // resize mouseover div
      setTimeout(animation, animSpeed)
    } else { // no mouseHold
      if (parseInt(contentDivElmt1.style.top) < 0 && contentDivElmt1.firstChild.style.height != (contentHgt + "px")) { // shrink the story when it moves up
        contentDivElmt1.firstChild.style.height = contentHgt + "px"
        contentDivElmt1.firstChild.childNodes[3].style.position = 'absolute'
        contentDivElmt1.firstChild.childNodes[3].style.visibility = 'hidden'
      }
      contentDivElmt1.style.top = parseInt(contentDivElmt1.style.top) - 1 + "px" // move the story up
      contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 1 + "px"
      contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) - 1 + "px"
      if (parseInt(contentDivElmt2.style.top) > (parseInt(contentDivElmt1.style.top) + contentHgt)) { // move 2nd story into place
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 4 + "px"
      } else if (parseInt(contentDivElmt2.style.top) < (parseInt(contentDivElmt1.style.top) + contentHgt)) {
        contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) + 1 + "px"
      }
      if (parseInt(contentDivElmt3.style.top) > (parseInt(contentDivElmt2.style.top) + contentHgt)) { // move 3rd story into place
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) - 4 + "px"
      } else if (parseInt(contentDivElmt3.style.top) < (parseInt(contentDivElmt2.style.top) + contentHgt)) {
        contentDivElmt3.style.top = parseInt(contentDivElmt3.style.top) + 1 + "px"
      }
      contentDivElmt1.firstChild.style.height = (parseInt(contentDivElmt2.style.top) - parseInt(contentDivElmt1.style.top)) + "px" // resize mouseover div
      contentDivElmt2.firstChild.style.height = (parseInt(contentDivElmt3.style.top) - parseInt(contentDivElmt2.style.top)) + "px" // resize mouseover div
      contentDivElmt3.firstChild.style.height = contentHgt + "px"                                                                  // resize mouseover div
      setTimeout(animation, animSpeed)
    }
  } else { // Swap divs and reset positions
    switch (contentDivElmt1) {
      case contentDiv1Elmt:
        contentDivElmt1 = contentDiv2Elmt;
        contentDiv1Elmt.innerHTML = loadStory();
        contentDivElmt2 = contentDiv3Elmt;
        contentDivElmt3 = contentDiv1Elmt;
        break;
      case contentDiv2Elmt:
        contentDivElmt1 = contentDiv3Elmt;
        contentDiv2Elmt.innerHTML = loadStory();
        contentDivElmt2 = contentDiv1Elmt;
        contentDivElmt3 = contentDiv2Elmt;
        break;
      default:
        contentDivElmt1 = contentDiv1Elmt;
        contentDiv3Elmt.innerHTML = loadStory();
        contentDivElmt2 = contentDiv2Elmt;
        contentDivElmt3 = contentDiv3Elmt;
    }
    contentDivElmt1.style.top = "0px"
    contentDivElmt3.style.top = parseInt(contentDivElmt2.style.top) + contentHgt + "px"
    waitTime()
  }
}

// Interruptable wait time
function waitTime() {
  if (contentDivElmt1.mouseHold || contentDivElmt2.mouseHold) { 
    ticker = 0
    animation()
  } else { 
    if (parseInt(contentDivElmt2.style.top) > (parseInt(contentDivElmt1.style.top) + contentHgt)) { // move 2nd and 3rd stories up to fill gap
      contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) - 4 + "px"
      contentDivElmt3.style.top = parseInt(contentDivElmt2.style.top) + contentHgt
    } else if (parseInt(contentDivElmt2.style.top) < (parseInt(contentDivElmt1.style.top) + contentHgt)) { // move 2nd and 3rd stories down in place
      contentDivElmt2.style.top = parseInt(contentDivElmt2.style.top) + 1 + "px"
      contentDivElmt3.style.top = parseInt(contentDivElmt2.style.top) + contentHgt
    }
    ticker += animSpeed
    if (ticker < waitMSecs) setTimeout(waitTime, animSpeed)
    else {
      ticker = 0
      animation()
    }
  }
}

// Load and format the next story
function loadStory() {
  var content = '' +
      '<div id="innerDiv' + n + '" style="height:' + contentHgt + 'px;">' + 
      '<a href="' + newsItem[n].link + '" title="' + linkTitle + '"><img src="' + newsItem[n].image + '" width="240" height="115" border="0" alt="' + linkTitle + '" title="' + linkTitle + '" class="newsImgR" /></a>' +
      '<span class="newsTitleSpan ' + newsTitleLang + '">' + newsItem[n].title + '</span><br />' +
      '<span class="descSpan" id="descSpan' + n +'">' +
      '<span class="newsDescSpan ' + newsDescLang + '">' + newsItem[n].description + '  </span></span>' +
      '<a href="' + newsItem[n].link + '" title="' + linkTitle + '">&raquo; <span class="readMoreSpan">' + readMore + '</span></a></div>';
  n++;
  if (n > newsItemLength-1) n = 0;
  return content
}