//Home page scroller

var scrollerY = {};
scrollerY.holding = false;
scrollerY.yPos = 0;
scrollerY.fingerPos;
scrollerY.prodHeight;
scrollerY.numProds = 0;

var isIE = navigator.userAgent.indexOf('MSIE') > -1;

scrollerY.hold = function(e){
    this.listen(e)
    this.holding = true;
    scrollerY.fingerPos = e.clientY - parseInt(document.getElementById('scrollerY_slider').style.top + 0);
    scrollerY.getProdHeight();
    return false;
}
scrollerY.move = function(e){
    scrollerY.yPos = e.clientY;
    //prevent scroll beyond LHS
    var posFromTop = scrollerY.yPos - scrollerY.fingerPos;
    if(posFromTop < 0)posFromTop = 0;
    //prevent scroll beyond RHS
    var availableTrack = 290; // parseInt(document.getElementById('scrollerY_track').offsetHeight) - parseInt(document.getElementById('scrollerY_slider').offsetHeight);
    var posFromRight = availableTrack - posFromTop;
    if(posFromRight < 0) posFromTop = availableTrack;
    //set slider position
    if(scrollerY.holding)document.getElementById('scrollerY_slider').style.top = posFromTop + 'px';
    //set gallery position
    scrollerY.moveGallery(posFromTop, availableTrack);
    return false;
}
scrollerY.moveGallery = function(top, height){
    var gallery = document.getElementById('scrollerY_gallery');
    var galleryHeight = 0 //gallery.offsetHeight;
    //calculate height of gallery based on the number of products
    if(scrollerY.numProds==0)
        scrollerY.numProds = scrollerY.getNumProds();
    if(this.numProds>0){
        galleryHeight = this.prodHeight * this.numProds;
    }
    maskHeight = document.getElementById('scrollerY_gallerymask').offsetHeight;
    scrollableHeight = galleryHeight - maskHeight;
    
    if(scrollableHeight > 0){
        gallery.style.top = -((scrollableHeight / height) * top) + 'px';
    }
}
scrollerY.getNumProds = function(){
    var numProds = 0;
    var prods = document.getElementsByTagName('div', document.getElementById('scrollerY_gallery'))
    for(var i=0;i<prods.length;i++){
        if(prods[i].className == 'prod'){
            numProds++;
        }
    }
    return numProds;
}

scrollerY.getProdHeight = function(){
    var prods = document.getElementsByTagName('div', document.getElementById('scrollerY_gallery'))
    for(var i=0;i<prods.length;i++){
        if(prods[i].className == 'prod'){
            scrollerY.prodHeight = 43; //prods[i].offsetHeight;
            break;
        }
    }
}
scrollerY.jump = function(step){
    var availableTrack = this.getAvailableTrack();
    var topPos;
    scrollerY.getProdHeight()    
    scrollerY.scrollBy((scrollerY.prodHeight * -step))
    this.matchScrollBar();
}
scrollerY.jumpTrack = function(e){
    //user clicked on the track, so work out which direction to jump
    var step = 1;
    if(e.clientY-(parseInt(this.getElementsByClassName(document.body, 'main')[0].offsetTop)+document.getElementById('scrollerY_track').offsetTop+14)<parseInt(document.getElementById('scrollerY_slider').style.top))step = -1;
    this.jump(step);
}
scrollerY.getElementsByClassName = function(node, className) {
  var children = node.getElementsByTagName('*');
  var elements = new Array();

  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
      if (classNames[j] == className) {
        elements.push(child);
        break;
      }
    }
  }
  return elements;
}
scrollerY.clickBar = function(e){
    e.cancelBubble = true;    
}
scrollerY.scrollBy = function(distance){
    var gallery = document.getElementById('scrollerY_gallery');
    var currPos = this.getCurrentGalleryPosition();
    var galleryHeight = this.getGalleryHeight();

    if(currPos<0 && distance>0){
        if(-currPos<distance)currPos = distance = 0;
        gallery.style.top = (currPos + distance) + 'px';
    }
    else{
        if(currPos>((5*this.prodHeight)-galleryHeight) && distance<0){
            if((currPos + distance)<((5*this.prodHeight)-galleryHeight)){
                currPos = (5*this.prodHeight)-galleryHeight;
                distance = 0;
            }
            gallery.style.top = (currPos + distance) + 'px';
        }
    }
}
scrollerY.getCurrentGalleryPosition = function(){
    var gallery = document.getElementById('scrollerY_gallery');
    var currPos = gallery.style.top;
    if(currPos=='')currPos = gallery.scrollTop;
    return parseInt(currPos);
}
scrollerY.getGalleryHeight = function(){
    var galleryHeight = 0;
    if(this.numProds==0)this.numProds = this.getNumProds();
    if(this.numProds>0)
        galleryHeight = this.prodHeight * this.numProds;
    return galleryHeight;
}
scrollerY.getAvailableTrack = function(){
    return parseInt(document.getElementById('scrollerY_track').offsetHeight) - parseInt(document.getElementById('scrollerY_slider').offsetHeight);
}
scrollerY.matchScrollBar = function(){
    //position scrollbar to match the position of the gallery
    var galleryPos = this.getCurrentGalleryPosition()
    var maxScrollAmount = this.getGalleryHeight() - (5*this.prodHeight);
    var percentageScrolled = -galleryPos * 100 / maxScrollAmount;
    var scrollbarMaxScrollAmount = this.getAvailableTrack();
    document.getElementById('scrollerY_slider').style.top = (scrollbarMaxScrollAmount * percentageScrolled / 100) + 'px';
}
scrollerY.release = function(e){
    scrollerY.stopListening(e);
    scrollerY.holding = false;
    return false;
}
scrollerY.listen = function(e){
    if(isIE) {
        document.attachEvent("onmousemove", scrollerY.move);
        document.attachEvent("onmouseup", scrollerY.release);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    else{
        document.addEventListener("mousemove", scrollerYMove, true);
        document.addEventListener("mouseup", scrollerYRelease, true);
        e.preventDefault();
    }        
}
scrollerY.stopListening = function(e){
    if(isIE) {
        document.detachEvent("onmousemove", scrollerY.move);
        document.detachEvent("onmouseup",   scrollerY.release);
    }
    else{
        document.removeEventListener("mousemove", scrollerYMove,   true);
        document.removeEventListener("mouseup",   scrollerYRelease, true);
    }
}
scrollerYMove = function(e){scrollerY.move(e)}
scrollerYRelease = function(e){scrollerY.release(e)}