// Pop Up

$(document).ready(function() {
   $("#scroller_gallery .prod a").mouseover(function() {
		
		//var divid = $(this).attr('id');
		//var arr = divid.split('_');
		//var popupID = "#popup-"+arr[1];
        popupID = "#popup-"+$('img',this).attr("id");
		
        $(popupID).fadeIn("slow");
        //$(popupID).show();
   });
   $("#scroller_gallery .prod a.pop-up").mouseout(function() {
		$("#scroller_gallery .prod a.pop-up").fadeOut("slow");
       // $("#scroller_gallery .prod a.pop-up").hide();
   });
   
 });



//Home page scroller

var scroller = {};
scroller.holding = false;
scroller.xPos = 0;
scroller.fingerPos;
scroller.prodWidth;
scroller.numProds = 0;

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

scroller.hold = function(e){
    this.listen(e)
    this.holding = true;
    scroller.fingerPos = e.clientX - parseInt(document.getElementById('scroller_slider').style.left + 0);
    scroller.getProdWidth();
    return false;
}
scroller.move = function(e){
    scroller.xPos = e.clientX;
    //prevent scroll beyond LHS
    var posFromLeft = scroller.xPos - scroller.fingerPos;
    if(posFromLeft < 0)posFromLeft = 0;
    //prevent scroll beyond RHS
    var availableTrack = parseInt(document.getElementById('scroller_track').offsetWidth) - parseInt(document.getElementById('scroller_slider').offsetWidth);
    var posFromRight = availableTrack - posFromLeft;
    if(posFromRight < 0) posFromLeft = availableTrack;
    //set slider position
    if(scroller.holding)document.getElementById('scroller_slider').style.left = posFromLeft  + 'px';
    //set gallery position
    scroller.moveGallery(posFromLeft, availableTrack);
    return false;
}
scroller.moveGallery = function(left, width){
    var gallery = document.getElementById('scroller_gallery');
    var galleryWidth = 0 //gallery.offsetWidth;
    //calculate width of gallery based on the number of products
    if(scroller.numProds==0)
        scroller.numProds = scroller.getNumProds();
    if(this.numProds>0){
        galleryWidth = this.prodWidth * this.numProds;
    }
    maskWidth = document.getElementById('scroller_gallerymask').offsetWidth + 5;
    scrollableWidth = galleryWidth - maskWidth;
    
    if(scrollableWidth > 0){
        gallery.style.left = -((scrollableWidth / width) * left) + 'px';
    }
}
scroller.getNumProds = function(){
    var numProds = 0;
    var prods = document.getElementsByTagName('div', document.getElementById('scroller_gallery'))
    for(var i=0;i<prods.length;i++){
        if(prods[i].className == 'prod'){
            numProds++;
        }
    }
    return numProds;
}

scroller.getProdWidth = function(){
    var prods = document.getElementsByTagName('div', document.getElementById('scroller_gallery'))
    for(var i=0;i<prods.length;i++){
        if(prods[i].className == 'prod'){
            scroller.prodWidth = prods[i].offsetWidth;
            break;
        }
    }
}
scroller.jump = function(step){
    var availableTrack = this.getAvailableTrack();
    var leftPos;
    scroller.getProdWidth()    
    scroller.scrollBy((scroller.prodWidth * -step))
    this.matchScrollBar();
}
scroller.jumpTrack = function(e){
    //user clicked on the track, so work out which direction to jump
    var step = 1;
    if(e.clientX-(parseInt(this.getElementsByClassName(document.body, 'main')[0].offsetLeft)+document.getElementById('scroller_track').offsetLeft+14)<parseInt(document.getElementById('scroller_slider').style.left))step = -1;
    this.jump(step);
}
scroller.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;
}
scroller.clickBar = function(e){
    e.cancelBubble = true;    
}
scroller.scrollBy = function(distance){
    var gallery = document.getElementById('scroller_gallery');
    var currPos = this.getCurrentGalleryPosition();
    var galleryWidth = this.getGalleryWidth();

    if(currPos<0 && distance>0){
        if(-currPos<distance)currPos = distance = 0;
        gallery.style.left = (currPos + distance)+ 'px';
    }
    else{
        if(currPos>((3*this.prodWidth)-galleryWidth) && distance<0){
            if((currPos + distance)<((3*this.prodWidth)-galleryWidth)){
                currPos = (3*this.prodWidth)-galleryWidth;
                distance = 0;
            }
            gallery.style.left = (currPos + distance) + 'px';
        }
    }
}
scroller.getCurrentGalleryPosition = function(){
    var gallery = document.getElementById('scroller_gallery');
    var currPos = gallery.style.left;
    if(currPos=='')currPos = gallery.scrollLeft;
    return parseInt(currPos);
}
scroller.getGalleryWidth = function(){
    var galleryWidth = 0;
    if(this.numProds==0)this.numProds = this.getNumProds();
    if(this.numProds>0)
        galleryWidth = this.prodWidth * this.numProds;
    return galleryWidth;
}
scroller.getAvailableTrack = function(){
    return parseInt(document.getElementById('scroller_track').offsetWidth) - parseInt(document.getElementById('scroller_slider').offsetWidth);
}
scroller.matchScrollBar = function(){
    //position scrollbar to match the position of the gallery
    var galleryPos = this.getCurrentGalleryPosition()
    var maxScrollAmount = this.getGalleryWidth() - (3*this.prodWidth);
    var percentageScrolled = -galleryPos * 100 / maxScrollAmount;
    var scrollbarMaxScrollAmount = this.getAvailableTrack();
    document.getElementById('scroller_slider').style.left = (scrollbarMaxScrollAmount * percentageScrolled / 100) + 'px';
}
scroller.release = function(e){
    scroller.stopListening(e);
    scroller.holding = false;
    return false;
}
scroller.listen = function(e){
    if(isIE) {
        document.attachEvent("onmousemove", scroller.move);
        document.attachEvent("onmouseup", scroller.release);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    else{
        document.addEventListener("mousemove", scrollerMove, true);
        document.addEventListener("mouseup", scrollerRelease, true);
        e.preventDefault();
    }        
}
scroller.stopListening = function(e){
    if(isIE) {
        document.detachEvent("onmousemove", scroller.move);
        document.detachEvent("onmouseup",   scroller.release);
    }
    else{
        document.removeEventListener("mousemove", scrollerMove,   true);
        document.removeEventListener("mouseup",   scrollerRelease, true);
    }
}
scrollerMove = function(e){scroller.move(e)}
scrollerRelease = function(e){scroller.release(e)}