//Îı¾¿òͼƬ¼°FLASHÔ¤ÀÀ
$(function(){
   var p = document.getElementById("cls_panel");   
   if (!p) {
       p = document.createElement("div");
       p.id = "cls_panel";
       document.body.appendChild(p);
   }
   
   var btns = $("#protype ul > li");
   var tabs = $("#procls ul");
   
   var t;
   
   $("#procls ul > li").each(function(){
        $(this).html("" + $(this).html());
   });
 
   btns.bind('mouseover',function(){   
       
        var o = $(this).offset();
        var i = btns.index($(this));
        
        btns.not($(this)).removeClass('selected');
        $(this).addClass('selected');
        
        clearTimeout(t);        
        
        if (tabs.eq(i).html() != null && tabs.eq(i).html() != '')
        {
            showPanel(o.left,o.top);            
            $("#cls_panel").html('<ul>' + tabs.eq(i).html() + '</ul>');
        }
        else
        {
            closePanel();
        }
   });
   btns.bind('mouseout',function(){
        $(this).removeClass('selected');
        t = setTimeout(closePanel,2000);
   });
   
   $("#cls_panel").mouseover(function(){
        clearTimeout(t);
   });
   $("#cls_panel").mouseout(function(){
        t = setTimeout(closePanel,1000);
   });
   
});

function closePanel()
{    
    $("#cls_panel").hide('slow');
}

function showPanel(left0, top0)
{
    $("#cls_panel").css({left:(left0+220)+"px",top:top0+"px",display:'none'}).show('slow');
}