// JavaScript Document
var Speed = 20;
//Product Pictures Marguee
var ProdPicsLayer = document.getElementById("ProdPicsLayer");




var ProdPicsContener1 = document.getElementById("ProdPicsContener1");
var ProdPicsContener2 = document.getElementById("ProdPicsContener2");
var ShuiChuLi = document.getElementById("ShuiChuLi")
ProdPicsContener1.innerHTML = ShuiChuLi.innerHTML;
ProdPicsContener2.innerHTML = ShuiChuLi.innerHTML;
var ProductMarqueeTimer = setInterval(ProductMarqueeRight, Speed);
ProdPicsLayer.onmouseover = function() {
    clearInterval(ProductMarqueeTimer)
};
ProdPicsLayer.onmouseout = function() {
    ProductMarqueeTimer = setInterval(ProductMarqueeRight, Speed)
};
function ProductMarqueeLeft() {
    if (ProdPicsContener2.offsetWidth - ProdPicsLayer.scrollLeft <= 0) {
        ProdPicsLayer.scrollLeft -= ProdPicsContener2.offsetWidth;
    } else {
        ProdPicsLayer.scrollLeft++;
    }
}
function ProductMarqueeRight() {
    if (ProdPicsLayer.scrollLeft <= 0) {
        ProdPicsLayer.scrollLeft += ProdPicsContener2.offsetWidth;
    } else {
        ProdPicsLayer.scrollLeft--;
    }
}
//Project Pictures Marguee

var ProjPicsLayer = document.getElementById("ProjPicsLayer");
var ProjPicsContener1 = document.getElementById("ProjPicsContener1");
var ProjPicsContener2 = document.getElementById("ProjPicsContener2");
var ProjectPic = document.getElementById("ProjectPic");
ProjPicsContener1.innerHTML = ProjectPic.innerHTML;
ProjPicsContener2.innerHTML = ProjectPic.innerHTML;
var ProjectMarqueeTimer = setInterval(ProjectMarqueeLeft, Speed);
ProjPicsLayer.onmouseover = function() {
    clearInterval(ProjectMarqueeTimer)
};
ProjPicsLayer.onmouseout = function() {
    ProjectMarqueeTimer = setInterval(ProjectMarqueeLeft, Speed)
};
function ProjectMarqueeLeft() {
    if (ProjPicsContener2.offsetWidth - ProjPicsLayer.scrollLeft <= 0) {
        ProjPicsLayer.scrollLeft -= ProjPicsContener2.offsetWidth;
    } else {
        ProjPicsLayer.scrollLeft++;
    }
}
function ProjectMarqueeRight() {
    if (ProjPicsLayer.scrollLeft <= 0) {
        ProjPicsLayer.scrollLeft += ProjPicsContener2.offsetWidth;
    } else {
        ProjPicsLayer.scrollLeft--;
    }
}

//Product Change Pictures
var ProductTypes = document.getElementsByName("ProductType");
for (i = 0; i < 4; i++) {
    ProductTypes[i].index = i;
    ProductTypes[i].onmouseover = function() {
        ChangeProductPic(this)
    };
}

function ChangeProductPic(obj) {
    var ProdPicsContener1 = document.getElementById("ProdPicsContener1");
    var ProdPicsContener2 = document.getElementById("ProdPicsContener2");
    var ChouYang = document.getElementById("ChouYang");
    var ShuiChuLi = document.getElementById("ShuiChuLi");
    var ZiWaiXian = document.getElementById("ZiWaiXian");
    var GeLeiPeiJian = document.getElementById("GeLeiPeiJian");
    switch (obj.index) {
        case 0 :
            ProdPicsContener1.innerHTML = ShuiChuLi.innerHTML;
            ProdPicsContener2.innerHTML = ShuiChuLi.innerHTML;
            break;
        case 1 :
            ProdPicsContener1.innerHTML = ChouYang.innerHTML;
            ProdPicsContener2.innerHTML = ChouYang.innerHTML;
            break;
        case 2 :
            ProdPicsContener1.innerHTML = ZiWaiXian.innerHTML;
            ProdPicsContener2.innerHTML = ZiWaiXian.innerHTML;
            break;
        case 3 :
            ProdPicsContener1.innerHTML = GeLeiPeiJian.innerHTML;
            ProdPicsContener2.innerHTML = GeLeiPeiJian.innerHTML;
    }
}