/**
 * 通过一个按钮切换一个区域
 *
 * @param string type 一个类型区域的标识符
 * @param string id 各个"按钮/区域"对的组标识符
 * @param string url 如果提供,第一次展开详情时会到url指定的地点获取数据
 * @param object params 远程获取数据时需传递的参数.只有当指定url时才有效.
 *                      如: {param1:value1,param2:value2,...}
 * @note 如果同时传递 type,id, 内容区域元素id命名规则为"id_type"
 * 
 * @code
<script language="JavaScript" type="text/javascript" src="/js/toggleArea.js"></script>
<h5>以下示例演示了表格单元切换区域的用法</h5>
<table border="1">
    <tr>
        <td><button onclick="toggleArea('aaa',1)">1-aaaa</button></td>
        <td><button onclick="toggleArea('bbb',1)">1-bbbb</button></td>
    </tr>
    <tr style="display:none" id="1_details">
        <td colspan="2">
            <div id="1_aaa">1-aaaa</div>
            <div id="1_bbb">1-bbbb</div>
        </td>
    </tr>
    <tr>
        <td><button onclick="toggleArea('aaa',2)">2-aaaa</button></td>
        <td><button onclick="toggleArea('bbb',2)">2-bbbb</button></td>
    </tr>
    <tr style="display:none" id="2_details">
        <td colspan="2">
            <div id="2_aaa">2-aaaa</div>
            <div id="2_bbb">2-bbbb</div>
        </td>
    </tr>
</table>
<h5>以下示例演示了切换单独区域的用法</h5>
<button onclick="toggleArea('detail_div')">单独切换一个区域</button>
<div id="detail_div" style="display:none;border:1px solid red">这是一个单独的隐藏区域</div>
 * @endcode
 * @author wanhua 20080818
 */
function toggleArea(type,id,url,params){
    var content_id;
    if(id&&id!==''&&id!==undefined) content_id = id+'_'+type;
    else content_id = type;
    var content_area = document.getElementById(content_id);
    if(!content_area.requested&&url){
        new Ajax.Request(url,{//content_id
            parameters:params,
            onSuccess:function(req){
                $(content_id).update(req.responseText);
            },
            onComplete:function(){
                content_area.requested = true;
            }});
    }
    toggleAreaHandle(type,id);
}
function toggleAreaHandle(type,id){
    var detail_area,content_id;
    if(id&&id!==''&&id!==undefined){
        content_id = id+'_'+type;
        detail_area = document.getElementById(id+'_details');
    }else{
        content_id = type;
        detail_area = document.getElementById(type);
    }
    var content_area = document.getElementById(content_id);
    var visible = detail_area.style.display!='none';
    var types;
    var tagname = detail_area.tagName.toLowerCase();
    if(content_id!=type){    
        if(tagname=='tr'||tagname=='tbody'||tagname=='thead')
            types = detail_area.getElementsByTagName('td')[0].childNodes;
        else types = detail_area.childNodes;
    }else types = [detail_area];
    
    if(!visible||(visible&&type!=detail_area.curr)) visible = 1;
    else visible = 0;
    
    if(visible){
        for(var i=0;i<types.length;++i){
            var ele = types[i];
            try{
                if(ele.id&&ele.id==content_id) ele.style.display = 'block';
                else ele.style.display = 'none';
            }catch(e){}
        }
        var display;
        if(tagname=='tr'||tagname=='tbody'||tagname=='thead'){
            var isIE = !!(window.attachEvent && !window.opera);
            if(isIE) display = 'block';
            else display = '';
        }else display = 'block';
        detail_area.style.display = display;
        detail_area.curr = type;
    }else detail_area.style.display = 'none';
}