var browse = window.navigator.appName.toLowerCase();
    var MyMar;
    var speed = 145; //速度，越大越慢
    var spec = 145; //每次滚动的间距, 越大滚动越快
    var minOpa = 50; //滤镜最小值
    var maxOpa = 100; //滤镜最大值
    var spa = 2; //缩略图区域补充数值
    var w = 0;
    spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec * 10 : spec * 20);
    function $$(e) { return document.getElementById(e); }
    function goleft() { $$('photos').scrollLeft -= spec; }
    function goright() { $$('photos').scrollLeft += spec; }
    function setOpacity(e, n) {
        if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')';
        else e.style.opacity = n / 100;
    }
    $$('goleft').style.cursor = 'pointer';
    $$('goright').style.cursor = 'pointer';
//    $$('mainphoto').onclick = function() { location = this.getAttribute('name'); }
//    $$('goleft').onmouseover = function() { this.src = '../public/images/right.png'; MyMar = setInterval(goleft, speed); }
//    $$('goleft').onmouseout = function() { this.src = '../public/images/right.png'; clearInterval(MyMar); }
//   // $$('goright').onmouseover = function() { this.src = '../public/images/left.png'; MyMar = setInterval(goright, speed); }
 //    //$$('goright').onmouseout = function() { this.src = ''; clearInterval(MyMar); }
    $$('mainphoto').onclick = function() { location = this.getAttribute('name'); }
    $$('goleft').onmouseover = function() { this.style.display="block";this.src = '../public/images/right.png'; MyMar = setInterval(goleft, speed); }
    $$('goleft').onmouseout = function() { this.src = '../public/images/right.png'; clearInterval(MyMar); }
    $$('goright').onmouseover = function() { this.style.display="block";this.src = '../public/images/left.png'; MyMar = setInterval(goright, speed); }
    $$('goright').onmouseout = function() { this.src = '../public/images/left.png'; clearInterval(MyMar); }
    window.onload = function() {
        var rHtml = '';
        var p = $$('showArea').getElementsByTagName('div');
        var x = $$('showArea').getElementsByTagName('img');
        for (var i = 0; i < x.length; i++) {
            w += parseInt(x[i].getAttribute('width')) + spa;
            setOpacity(p[i], minOpa);
           x[i].onclick = function() {
                 $("#mainphoto").attr("src", $(this).attr("rel"));
                location = this.getAttribute('name');
            }
            p[i].onmouseover = function() {
                setOpacity(this, maxOpa);
                $$('mainphoto').src =this.getElementsByTagName('img')[0].getAttribute('rel');
                $$('mainphoto').setAttribute('name', this.getAttribute('name'));
                setOpacity($$('mainphoto'), maxOpa);
            }
            p[i].onmouseout = function() {
                setOpacity(this, minOpa);
                setOpacity($$('mainphoto'), maxOpa);
            }
            rHtml += '<img src="' + x[i].getAttribute('rel') + '" width="0" height="0" alt="" />';
        }
        $$('showArea').style.width = parseInt(w) + 'px';
        var rLoad = document.createElement("div");
        $$('photos').appendChild(rLoad);
        rLoad.style.width = "1px";
        rLoad.style.height = "1px";
        rLoad.style.overflow = "hidden";
        rLoad.innerHTML = rHtml;
    }