/*JN*/
/* This javascript moves an element with a "slide" effect*/

/*The folowing is a css/html combination to build the "viewer* element or frame that slides
<style type="text/css">
  #mainTest{
    position:relative;
    height:14px;
    border:1px solid red; 
    overflow:hidden;
  }
  #single_test {
    color: blue;
    position:absolute;
    height:14px; 
    }
</style>


  <div id="mainTest">
    <div id="single_test">
      <div class="child">TEST 1</div>
      <div class="child">TEST 2</div>
      <div class="child">TEST 3</div>
      <div class="child"><br></div>
    </div>
  </div>
*/

/*Inline call example to start the slide effect

The parameters to set the new object are "PARENT NODE ID" and "CHILD NODES CLASS"
  in this case, "single_test" and "child".


    
    <script language="javascript" TYPE="text/javascript">
    
      var mySlidingBox = new box('single_test','child');
      mySlidingBox.startSlideUp();
    </script>

*/

function box(boxIdName,boxChildClassName){
  this.slideDuration = 6000;
  this.slideSpeed = 10;
  this.boxId = boxIdName;
  this.initTopPos = setInitTopPos(boxIdName,boxChildClassName);
  this.boxChild = getChildren(boxIdName,boxChildClassName);
  this.boxChildHeight = getChildHeight(boxIdName,boxChildClassName);
  
}

/*calculates first child's height and sets it as the initial position*/
function setInitTopPos(eParent,childClass){
  
  var topPos = getChildHeight(eParent,childClass);
  if(topPos[0]){
    return topPos[0];
  }else {
    return 0;
  }
}



function getChildren(eParent,childClass){  
  var parentObj = document.getElementById(eParent);
  if(parentObj){
    var eChildrenArr = parentObj.childNodes;
      var eChildren = [];
      var cnt = 0;
      for (var i=0; i < eChildrenArr.length; i++){
        if (eChildrenArr[i].className == childClass){
          eChildren [cnt] = eChildrenArr[i];
          cnt++;
        }
      }
        if(eChildren.length < 1){
        log("children could not be found");
        }
      return eChildren;
   }else {
    log("children could not be found");
    return [];
  }
}



function getChildHeight(eParent,childClass){
  var childrenArr = getChildren(eParent,childClass);
  var childHeight = [];
  if(childrenArr.length > 0){ 
    for (var i=0; i < childrenArr.length; i++){     
      childHeight[i]=parseInt(getStyle(childrenArr[i], "height"));
    }
    return childHeight;
  } else {
    log("children height could not be found");
    return [];
  }
}


/*prototype*/

box.prototype.startSlideUp = function (){       
      this.slideBoxUp();
}

box.prototype.slideBoxUp = function(){
    
    log('sliding box....');
    var totalHeight = 0;
    var delaySlide =  0;
    var self = this;
    
    /*copy array of element sizes*/
      var eBoxSizes = this.boxChildHeight;    

      /*move the element and set delays for each move*/
      for (var j=0; j < eBoxSizes.length; j++){               
         var eHeight = eBoxSizes[j];                                                      
         log("child " +j+" "+ eHeight + "moving in " +delaySlide); 
              
         /*bind movePixel call to pass parameters while using setTimeout*/ 
         var _func = bind(partial(this.movePixel,eHeight),this);
         setTimeout(_func,delaySlide);   
               
         delaySlide += this.slideDuration;         
         totalHeight += eBoxSizes[j];
      }


    
      var slideAgain = this.resetPos();   
      if (slideAgain){
        setTimeout(function(){self.slideBoxUp();},delaySlide);
      }
}

/*moves element for as many pix as it is tall*/
box.prototype.movePixel = function(eHeight){
    
    var currentTopPos = this.getTopPos(this.boxId);
    log('current item top pos ' +currentTopPos);
    var slideElement = document.getElementById(this.boxId);
    if (slideElement){
      currentTopPos -= 1; /*move element by 1 pix*/
      slideElement.style.top =  currentTopPos + 'px';
      
      var pixToMove = eHeight - 1;
      if (pixToMove == 0){  
        log('exit movingPixel');    
        return;      
      } else{  
        var self = this;
        setTimeout(function(){self.movePixel(pixToMove);},this.slideSpeed); 
      }
    }
}

box.prototype.getTopPos = function(element){
    
    var itemPos = 0;
    var boxToRotate = document.getElementById(element);
    if(boxToRotate){      
      itemPos = parseInt(getStyle(boxToRotate, "top"));        
    } else {
      itemPos = 0;
      log("element top position could not be found");
    }
    return itemPos;
}



box.prototype.resetPos = function(){
  var resetElement = document.getElementById(this.boxId);
  if(resetElement){  
    resetElement.style.top = this.initTopPos + 'px';
    return true;
  } else {
    return false;
  }
  
  
}