/*
By Aysun
例子：
    <div id="homepage_technical" class="column">
    <div id="techtab" class="tab">
     <ul>
        <li id="tech2">
        <h2>
        <a href="http://www.ednchina.com/TechClass/Power/Default.aspx" target="_blank" title="电源技术">
        电源技术</a></h2>
        </li>
        <li id="tech1">
        <h2>
        <a href="http://www.ednchina.com/TechClass/analog/default.aspx" target="_blank" title="模拟设计">
        模拟设计</a></h2>
        </li>
        <li id="tech3">
        <h2>
        <a href="http://www.ednchina.com/TechClass/Power/Default.aspx" target="_blank" title="微处理器与DSP">
        微处理器</a></h2>
        </li>
        <li id="tech4">
        <h2>
        <a href="http://www.ednchina.com/TechClass/Power/Default.aspx" target="_blank" title="嵌入式系统">
        嵌入式系统</a></h2>
        </li>
    </ul>
    </div>
    <div id="techbody">
    <div class="content clear">
    1
    </div>
    <div class="content clear">
    2
    </div>
    <div class="content clear">
    3
    </div>
    <div class="content clear">
    内容4
    </div>
    </div>
    </div>
*/

(function($) {
    $.fn.JChangeLayer = function(o) {
        o = $.extend({
            tabdiv: null,
            bodydiv: null,
            changecss: null,
            displaycss: null,
            circular: false,
            start: 0

        }, o || {});
        return this.each(function() {
            var div = $(this), jtab = $("#" + o.tabdiv, div), jdiv = $("#" + o.bodydiv, div), jtli = $("li", jtab),

            jdlayer = jdiv.children("div");
            
            var jtlisize = jtli.size(), jdlsize = jdlayer.size();
            jdlayer.hide();
            jtli.each(function(i) {
                if (o.start == i) {
                    $(this).removeClass(o.displaycss);
                    $(this).addClass(o.changecss);
                    jdlayer.eq(i).show();
                } else {
                    $(this).removeClass(o.changecss);
                    $(this).addClass(o.displaycss);
                }
                var divid = $(this).attr("id") + "layer";
                jdlayer.eq(i).attr("id", divid);

                $(this).mouseover(function() {
                    jtli.removeClass(o.changecss);
                    if (o.displaycss) {
                        $(this).removeClass(o.displaycss);
                    }
                    $(this).addClass(o.changecss);
                    jdlayer.hide();
                    jdlayer.eq(i).show();
                });
            });

        });
    };
})(jQuery);