var $ = function(id) { return document.getElementById(id); }
//鼠标经过事件
function addEventOn(labelID, switchID, maxNum) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onmouseover = JSsetSwitch(labelID, switchID, i, maxNum);
    }
    JSshowSwitch(labelID, switchID, 1, maxNum);
}
//单击事件
function addEventOnclick(labelID, switchID, maxNum) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onclick = JSsetSwitch(labelID, switchID, i, maxNum);
    }
    JSshowSwitch(labelID, switchID, 1, maxNum);
}

var JSsetSwitch = function(labelID, switchID, num, maxNum) {
    return function() { JSshowSwitch(labelID, switchID, num, maxNum); }
}
function JSshowSwitch(labelID, switchID, num, maxNum) {
    var obj;
    for (i = 1; i <= maxNum; i++) {
        obj = $(labelID + i);
        if (obj) { obj.className = null; }
        obj = $(switchID + i);
        if (obj) { obj.style.display = "none"; }
    }
    obj = $(labelID + num);
    if (obj) { obj.className = "selected"; }
    obj = $(switchID + num);
    if (obj) { obj.style.display = ""; }
}

/********样式二（改变背景位置）****************/

//鼠标经过事件
function addEventOn_bg(labelID, switchID, maxNum) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onmouseover = JSsetSwitch_bg(labelID, switchID, i, maxNum);
    }
    JSshowSwitch_bg(labelID, switchID, 1, maxNum);
}
//单击事件
function addEventOnclick_bg(labelID, switchID, maxNum) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onclick = JSsetSwitch_bg(labelID, switchID, i, maxNum);
    }
    JSshowSwitch_bg(labelID, switchID, 1, maxNum);
}

var JSsetSwitch_bg = function(labelID, switchID, num, maxNum) {
    return function() { JSshowSwitch_bg(labelID, switchID, num, maxNum); }
}
function JSshowSwitch_bg(labelID, switchID, num, maxNum) {
    var obj;
    for (i = 1; i <= maxNum; i++) {
        obj = $(labelID + i);
        if (obj) {
            obj.className = null;
            obj.style.backgroundPosition = (obj.offsetWidth * (maxNum - i + 1)) + "px 0px";
        }
        obj = $(switchID + i);
        if (obj) { obj.style.display = "none"; }
    }
    obj = $(labelID + num);
    if (obj) {
        obj.className = "selected";
        obj.style.backgroundPosition = (obj.offsetWidth * (maxNum - num + 1)) + "px " + obj.offsetHeight + "px";
    }
    obj = $(switchID + num);
    if (obj) { obj.style.display = ""; }
}

/********样式三（改变样式）****************/

//鼠标经过事件
function addEventOn_Class(labelID, switchID, maxNum, selectclass, noselectclass) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj) {
            obj.onmouseover = JSsetSwitch_Class(labelID, switchID, i, maxNum, selectclass, noselectclass);
        }
    }
}
var JSsetSwitch_Class = function(labelID, switchID, num, maxNum, selectclass, noselectclass) {
    return function() { JSshowSwitch_Class(labelID, switchID, num, maxNum, selectclass, noselectclass); }
}
//单击事件
function addEventOnclick_Class(labelID, switchID, maxNum, selectclass, noselectclass) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onclick = JSsetSwitch_bg(labelID, switchID, i, maxNum, selectclass, noselectclass);
    }
    JSshowSwitch_Class(labelID, switchID, 1, maxNum, selectclass, noselectclass);
}
function JSshowSwitch_Class(labelID, switchID, num, maxNum, selectclass, noselectclass) {
    var obj;
    for (i = 1; i <= maxNum; i++) {
        obj = $(labelID + i);
        if (obj) {
            obj.className = noselectclass;
        }
        obj = $(switchID + i);
        if (obj) { obj.style.display = "none"; }
    }
    obj = $(labelID + num);
    if (obj) {
        obj.className = selectclass;
    }
    obj = $(switchID + num);
    if (obj) { obj.style.display = ""; }
}

/********样式三（改变样式）****************/

//鼠标经过事件
function addEventOn_Class(labelID, switchID, maxNum, selectclass, noselectclass) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj) {
            obj.onmouseover = JSsetSwitch_Class(labelID, switchID, i, maxNum, selectclass, noselectclass);
        }
    }
    JSshowSwitch_Class(labelID, switchID, 1, maxNum, selectclass, noselectclass);
}
var JSsetSwitch_Class = function(labelID, switchID, num, maxNum, selectclass, noselectclass) {
    return function() { JSshowSwitch_Class(labelID, switchID, num, maxNum, selectclass, noselectclass); }
}
//单击事件
function addEventOnclick_Class(labelID, switchID, maxNum, selectclass, noselectclass) {
    for (i = 1; i <= maxNum; i++) {
        var obj = $(labelID + i);
        if (obj)
            obj.onclick = JSsetSwitch_bg(labelID, switchID, i, maxNum, selectclass, noselectclass);
    }
    JSshowSwitch_Class(labelID, switchID, 1, maxNum, selectclass, noselectclass);
}
function JSshowSwitch_Class(labelID, switchID, num, maxNum, selectclass, noselectclass) {
    var obj;
    for (i = 1; i <= maxNum; i++) {
        obj = $(labelID + i);
        if (obj) {
            obj.className = noselectclass;
        }
        obj = $(switchID + i);
        if (obj) { obj.style.display = "none"; }
    }
    obj = $(labelID + num);
    if (obj) {
        if (num == 1)
            obj.className = selectclass + " line";
        else
            obj.className = selectclass + " leftline";
    }
    obj = $(switchID + num);
    if (obj) { obj.style.display = ""; }
}