/**
* Created by Administrator on 2015/11/27.
*/
//封装className 兼容IE
function className(clsName,parent){//每一个参数为class名，第二个参数为该class名的父元素的ID
   var oParent = parent?document.getElementById(parent):document;
   var item=[];
   var cName=oParent.getElementsByTagName('*');

   for(var i=0; i<cName.length; i++){
       if(cName[i].className==clsName){
           item.push(cName[i]);
       }
   }
   return item;
}
//封装一个div始终居中
function boCenter(id){
   var oWidth = id.offsetWidth;
   var oHeight = id.offsetHeight;
   var scrWidth = document.documentElement.offsetWidth || document.body.offsetWidth ;
   var scrHiehght = document.documentElement.clientHeight || window.innerHeight;
   id.style.top = scrHiehght/2 - oHeight/2 + 'px';
   id.style.left = scrWidth/2 - oWidth/2 + 'px';
}

window.onload = oready;//加载完后（入口）

function oready(){
   var box = document.getElementById('loginPanel');//得到盒子
   boCenter(box);//让盒子始终居中
   var region = className('login_logo_webqq','loginPanel')[0];//调用封装函数得到第一个class的盒子
   var close = document.getElementById('ui_boxyClose');//关闭按钮
   var login = document.getElementById('loginState');
   var selectBox = document.getElementById('loginStatePanel');
   var listClass = className('statePanel_li','loginStatePanel');//得到所有的列表项
   var icon = document.getElementById('loginStateShow');//需要改变class的id
   var content = document.getElementById('login2qq_state_txt');//得到显示栏对象
   //鼠标按下
   region.onmousedown = fnDown;
   //鼠标松开
   region.onmouseup = function(){

       document.onmouseup =null;//清空鼠标松开事件
       document.onmousemove=null;//清空移动事件应用DOM 0级
   }
   //关闭窗口
   close.onclick = function(){
       box.style.display = 'none';
   }
   //点击下拉菜单
   login.onclick = function(event){
       event = event || window.event;//以下操作阻止事件冒泡
       if(event.stopPropagation){//DOM下
           event.stopPropagation();
       }else if(event.cancelBubble){//IE下
           event.cancelBubble = true;
       }
       selectBox.style.display = 'block';
   }
   //点击页面的任何一个位置
   document.onclick =  function(){
       selectBox.style.display = 'none';//将选项列表隐藏
   }
   //遍历所有的下拉列表项
   for(var j = 0; j < listClass.length; j++){
       listClass[j].onmouseover = function() {//鼠标获得焦点
           this.style.background = '#eee';//改变当前list的背景色
       }
       listClass[j].onmouseout = function(){//鼠标失去焦点
           this.style.background = '#fff';
       }
       listClass[j].onclick = function(event){//鼠标点击时
           event = event || window.event;//以下操作阻止事件冒泡
           if(event.stopPropagation){//DOM下
               event.stopPropagation();
           }else if(event.cancelBubble){//IE下
               event.cancelBubble = true;
           }
           var id = this.id;
           icon.className = '';
           icon.className = 'login-state-show ' + id;
           content.innerHTML = className('stateSelect_text',id)[0].innerHTML;//改变显示栏中的文本
           selectBox.style.display = 'none';//将选项列表隐藏
       }

   }
}

function fnDown(event){//鼠标按下
   event = event || window.event; //为了兼容IE
   var box = document.getElementById('loginPanel');//得到盒子
   var widX = event.clientX - box.offsetLeft;//得到鼠标离盒子左边缘的距离
   var widY = event.clientY - box.offsetTop;//得到鼠标离盒子右边缘的距离
   document.onmousemove=function(event){//鼠标托拽
       event = event || window.event;//兼容IE
       fnmove(event,widX,widY);//调用fnmove函数
   }
}
function fnmove(event,widX,widY){//鼠标移动
   var box = document.getElementById('loginPanel');//得到盒子
   var elementHeight = document.documentElement.clientHeight || window.innerHeight;//网页的高
   var elementWidth = document.documentElement.scrollWidth || document.body.scrollWidth;//网页的宽
   var availheight = elementHeight - box.offsetHeight - 5;//得到最大的移动高
   var availwidth =  elementWidth - box.offsetWidth - 10;//得到最大的移动宽

   var l = event.clientX - widX;//得到盒子到边缘的距离
   var t = event.clientY - widY;//得到盒子到顶端的距离
   if(l<5){
       l = 5;
   }else if(l>availwidth){
       l = availwidth;
   }
   if(t<10){
       t = 10;
   }else if(t>availheight){
       t = availheight;
   }
   box.style.left=l+'px';//设置移动后的横坐标
   box.style.top=t+'px';//设置移动后的纵坐标
}