// JavaScript Document
var t = 0;

function swapImage(which, imageNote) {
    document.getElementById("productImage").src = which;
    if (imageNote == true) {        
        document.getElementById("imageNote").style.visibility = "visible";
    }
    else if(imageNote) {
        document.getElementById("imageNote").style.visibility = "hidden";
    }
}

function setupTab(previousTab, selectedTab){    
    document.getElementById(previousTab +"-layer").style.display="none";
    $("#"+ previousTab).removeClass().addClass("inactive");    
    $("#"+ previousTab).bind('mouseover', function(evt){
        $(this).mouseover(function(){
            $(this).removeClass().addClass("active");
        }).mouseout(function(){
            $(this).removeClass().addClass("inactive");            
        });
    });

    document.getElementById(selectedTab +"-layer").style.display="block";    
    $("#"+ selectedTab).removeClass().addClass("active");
    $("#"+ selectedTab).unbind('mouseover').unbind('mouseout');    
    $("#tabSelected").html(selectedTab);
}

$(document).ready(function(){
    //start product tabs click events
    $("#product-read-more").click(function(){
        setupTab($("#tabSelected").html(), 'tab-descriptions');        
    });
    
    //tab options
    $("#tab-options").click(function(){
        setupTab($("#tabSelected").html(), 'tab-options');
    });
    $("#tab-options.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab specifications
    $("#tab-specifications").click(function(){
        setupTab($("#tabSelected").html(), 'tab-specifications');        
    });
    $("#tab-specifications.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab descriptions
    $("#tab-descriptions").click(function(){
        setupTab($("#tabSelected").html(), 'tab-descriptions');        
    });
    $("#tab-descriptions.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab reviews
    $("#tab-reviews").bind('click', function(evt){
        setupTab($("#tabSelected").html(), 'tab-reviews');        
    });
    $("#tab-reviews.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab accessories
    $("#tab-accessories").bind('click', function(evt){
        setupTab($("#tabSelected").html(), 'tab-accessories');        
    });
    $("#tab-accessories.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab overviews
    $("#tab-overviews").bind('click', function(evt){
        setupTab($("#tabSelected").html(), 'tab-overviews');        
    });
    $("#tab-overviews.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });

    //tab simular items
    $("#tab-simular-items").bind('click', function(evt){
        setupTab($("#tabSelected").html(), 'tab-simular-items');        
    });
    $("#tab-simular-items.inactive").mouseover(function(){
        $(this).removeClass().addClass("active");
    }).mouseout(function(){
       $(this).removeClass().addClass("inactive");
    });    
    //end product tabs click events


    //RIGHT IMAGE ARROW
    //onmouseup="moveThis('stop', '0'); moveThis('left', '1')"
    //onmousedown="moveThis('stop', '0'); moveThis('left', '5')"
    //onmouseover="moveThis('left', '3')"
    //onmouseout="moveThis('stop', '0')"

    //$("#right-arrow").mouseup(function() { moveThis('stop', '0'); moveThis('left', '1'); });
    //$("#right-arrow").mousedown(function() { moveThis('stop', '0'); moveThis('left', '5'); });
    //$("#right-arrow").mouseover(function() { moveThis('left', '3'); });
    //$("#right-arrow").mouseout(function() { moveThis('stop', '0'); });

    //$("#right-arrow").bind('mouseup', function(evt){
    //    moveThis('stop', '0'); moveThis('right', '1');
    //});
    //$("#right-arrow").bind('mousedown', function(evt){
    //    moveThis('stop', '0'); moveThis('right', '5');
    //});

    $("#right-arrow").mouseover(function() { moveThis('right', '5'); });
    $("#right-arrow").mouseout(function() { moveThis('stop', '0'); });

    //LEFT IMAGE ARROW
    //onmouseup="moveThis('stop', '0'); moveThis('right', '1')"
    //onmousedown="moveThis('stop', '0'); moveThis('right', '5')"
    //onmouseover="moveThis('right', '3')"
    //onmouseout="moveThis('stop', '0')

    //$("#left-arrow").mouseup(function() { moveThis('stop', '0'); moveThis('right', '1'); });
    //$("#left-arrow").mousedown(function() { moveThis('stop', '0'); moveThis('right', '5'); });
    //$("#left-arrow").mouseover(function() { moveThis('right', '3'); });
    //$("#left-arrow").mouseout(function() { moveThis('stop', '0'); });

    //$("#left-arrow").bind('mouseup', function(evt){
    //    moveThis('stop', '0'); moveThis('left', '1');
    //});
    //$("#left-arrow").bind('mousedown', function(evt){
    //    moveThis('stop', '0'); moveThis('left', '5');
    //});
    
    $("#left-arrow").mouseover(function() { moveThis('left', '5'); });
    $("#left-arrow").mouseout(function() { moveThis('stop', '0'); });
});


function moveThis (where, speed) {

    layerWidth = document.getElementById('maskedLayer').offsetWidth;
    stopPoint = parseInt(layerWidth - layerMaskWidth);
    speed = parseInt(speed)

    //if stopping
    if(where == "stop") {
        clearInterval(t);
    }

    // if moving right
    if (where == "right" && parseInt(document.getElementById("maskedLayer").style.left) <= -26) {
        document.getElementById("maskedLayer").style.left = (parseInt(document.getElementById("maskedLayer").style.left) + speed) + "px";
        t = setTimeout("moveThis('right', '"+speed+"')",1)
        //document.getElementById("rightarrowholder").style.display = "block";
    }
    else if (where == "right" && parseInt(document.getElementById("maskedLayer").style.left) >= 0) {
        clearTimeout(t);
        //document.getElementById("leftarrowholder").style.display = "block";
        document.getElementById("maskedLayer").style.left = "0px"
        //alert('clear right')
    }
    
    //if moving left
    if (where == "left" && parseInt(document.getElementById("maskedLayer").style.left) > (-1 * stopPoint)) {
        document.getElementById("maskedLayer").style.left = (parseInt(document.getElementById("maskedLayer").style.left) - speed) + "px";
        t = setTimeout("moveThis('left', '"+speed+"')",1)
        //document.getElementById("leftarrowholder").style.display = "block";
    }
    else if (where == "left" && parseInt(document.getElementById("maskedLayer").style.left) <= (-1 * stopPoint)) {
        clearTimeout(t);
        //document.getElementById("rightarrowholder").style.display = "block";
        document.getElementById("maskedLayer").style.left = (-1 * stopPoint) + "px"
    }
}

function getReady() {
    // this function aligns the thumbnail layer and displays arrows if nessasary
     layerMaskWidth = parseInt(document.getElementById('layerMask').style.width);
     layerWidth = document.getElementById('maskedLayer').offsetWidth;
     layerMaskwidth = document.getElementById('layerMask').offsetWidth;
     wheretostart = parseInt((layerMaskwidth - layerWidth) /2)

     if (layerWidth > layerMaskWidth) {
        //document.getElementById("leftarrowholder").style.display = "block";
        //document.getElementById("rightarrowholder").style.display = "block";
        document.getElementById("maskedLayer").style.left ="-25px";
        document.getElementById("maskedLayer").style.visibility = "visible";
     }
     else {
        //document.getElementById("leftarrowholder").style.display = "none";
        //document.getElementById("rightarrowholder").style.display = "none";
        document.getElementById("maskedLayer").style.left = wheretostart+"px";
        document.getElementById("maskedLayer").style.visibility = "visible";
     }

}