/*
Explorer, FireFox에서 동일한 Select Box 구현하기
HTML 객체인 Select Box 정보를 얻어와서 SelectBox 구현
*/

/*
// SelectBox 생성
function fctSelectStyle(obj, position) {
    var dropDown = $(obj);
    dropDown.style.display = "none";
    var width = dropDown.style.width;
    
    // SelectBox 생성 및 Event 함수 적용
    var layer = ""
        + "<div class=\"dropdown\" style=\"height:12px; width: " + width + ";\" id=\"" + obj + "_sel\" onBlur=\"return fctHideItems('" + obj + "');\">"
        + "<ul id=\"" + obj + "_sel_label\" onclick=\"return fctShowItems('" + obj + "');\">" + dropDown.options[0].text + "</ul>"
        
        if (position == "down")
        {
            layer += "<ul id=\"" + obj + "_items\" class=\"items\" style=\"width: " + width + "; top: 23px; left: -1px;\">";
        }
        else if (position == "up")
        {
            layer += "<ul id=\"" + obj + "_items\" class=\"items\" style=\"width: " + width + "; bottom: 23px; right: -1px;\">";
        }
        
        for (var i = 0; i < dropDown.options.length; i++) 
        {
            if (dropDown.options[i].value == 0)
            {
                layer += "<li id=\"" + obj + "_item" + i + "\"><span style=\"font-weight:bold; color:Gray;\">" + dropDown.options[i].text + "</span></li>";
            }
            else
            {
                layer += "<li id=\"" + obj + "_item" + i + "\" class=\"item\" onclick=\"javascript:fctSelectItems('" + obj + "', " + i + ");\">&nbsp;&nbsp;" + dropDown.options[i].text + "</li>";
            }            
        }
        
        layer += ""
        + "</ul>"
        + "</div>";
            
    document.write(layer);
}
*/


function fctSelectStyle(obj, position) {
    var dropDown = $(obj);
    dropDown.style.display = "none";
    var width = dropDown.style.width;
    
    // SelectBox 생성 및 Event 함수 적용
    var layer = ""
        
        if (navigator.appVersion.indexOf("MSIE 6") > -1) {
            // IE 6
            layer += "<div class=\"dropdown\" style=\"height:12px; width: " + width + ";\" id=\"" + obj + "_sel\" onmouseover=\"javascript:fctdivOver('" + obj + "_sel');\" onmouseout=\"javascript:fctdivOut('" + obj + "_sel');\" onBlur=\"return fctHideItems('" + obj + "');\">"
        } else {
            // IE 7, Mozilla, Safari, Opera 9
            layer += "<div class=\"dropdown\" style=\"height:12px; width: " + width + ";\" id=\"" + obj + "_sel\" onBlur=\"return fctHideItems('" + obj + "');\">"
        }
        
        layer += "<ul id=\"" + obj + "_sel_label\" onclick=\"return fctShowItems('" + obj + "');\">" + dropDown.options[0].text + "</ul>"
        
        if (position == "down")
        {
            layer += "<ul id=\"" + obj + "_items\" class=\"items\" style=\"width: " + width + "; top: 23px; left: -1px;\">";
        }
        else if (position == "up")
        {
            layer += "<ul id=\"" + obj + "_items\" class=\"items\" style=\"width: " + width + "; bottom: 23px; right: -1px;\">";
        }
        
        for (var i = 0; i < dropDown.options.length; i++) 
        {
            if (dropDown.options[i].value == 0)
            {
                layer += "<li id=\"" + obj + "_item" + i + "\"><span style=\"font-weight:bold; color:Gray;\">" + dropDown.options[i].text + "</span></li>";
            }
            else
            {
                if (navigator.appVersion.indexOf("MSIE 6") > -1) {
                    // IE 6
                    layer += "<li id=\"" + obj + "_item" + i + "\" class=\"item\"  onmouseover=\"javascript:fctOver('" + obj + "_item" + i + "');\" onmouseout=\"javascript:fctOut('" + obj + "_item" + i + "');\" onclick=\"javascript:fctSelectItems('" + obj + "', " + i + ", '" + position + "');\">&nbsp;&nbsp;" + dropDown.options[i].text + "</li>";
                } else {
                    // IE 7, Mozilla, Safari, Opera 9
                layer += "<li id=\"" + obj + "_item" + i + "\" class=\"item\" onclick=\"javascript:fctSelectItems('" + obj + "', " + i + ", '" + position + "');\">&nbsp;&nbsp;" + dropDown.options[i].text + "</li>";
                }
            }            
        }
        
        layer += ""
        + "</ul>"
        + "</div>";
            
    document.write(layer);
}

// SelectBox Option Show
function fctShowItems(obj) {
    var dropDownItems = $(obj + "_items");
    dropDownItems.style.display = "block";    
}

// SelectBox Option Hide
function fctHideItems(obj) {
    var dropDownItems = $(obj + "_items");
    dropDownItems.style.display = "none";    
}

// SelectBox Option 선택 후 Action 정의 함수
// SelectBox Option 선택 후 관련 Action들은 아래 함수에 추가 구현 요망
function fctSelectItems(obj, selNum, position) {
    var dropDown = $(obj);  
    var dropDownLayer = $(obj + "_sel");
    var dropDownLabel = $(obj + "_sel_label");
    var dropDownItems = $(obj + "_items");

    dropDown.options[selNum].selected = true;   // 실제 SelectBox Option 선택
    dropDownLabel.innerHTML = dropDown.options[selNum].text; // 선택한 Option의 text 표시

    if (position == "up") {
        window.open(dropDown.options[selNum].value, "realation");
    }
    else {
        window.location.href = dropDown.options[selNum].value;
    }
    //alert(dropDown.options[selNum].value);
    //fctHideItems(obj);
}

// SelectBox 크기 설정
function fctSelectWidth(obj){
    var dropDown = $(obj);
    var dropDownItems = $(obj + "_items");
    
    var cnt = dropDown.options.length;
    alert(cnt);
    if (cnt > 10)
    {
        dropDownItems.style.height = 220;
    }
}

// FireFox에서 onBlur 구현을 위해
function mouseDown(e) {
    var ffEvent = e ? e : window.event;
    var beforeID = tempID;
    var findID;
    
    // FireFox에서 MouseClick Event가 발생한 객체체크
    if (ffEvent.target) {
        tempID = ffEvent.target.id; // 이벤트발생 객체ID 얻어오기
        
        // Event가 발생한 객체 중 SelectBox에 관련된 객체일 경우
        if(beforeID.indexOf("_sel") > 0) {
            findID = beforeID.substr(0, beforeID.indexOf("_sel"));
        }
        
        // 현Event발생 객체ID가 SelectBox ID와 일치하지 않을 경우 
        // onBlur로 인식 fctHideItems 호출   
        if (findID != tempID.substr(0, findID.length)) {
            fctHideItems(findID);
        }
    }
}


// FireFox 일 경우만 적용
if (firefox) document.onmousedown = mouseDown;


/* ================================================== */
/* IE 6에서만 사용 되는 함수 - 시작 -                 */
/* ================================================== */

function fctdivOver(obj)
{
    var objLi = $(obj);
    objLi.style.border = "1px solid #999999";
    objLi.style.cursor = "pointer";
}

function fctdivOut(obj)
{
    var objLi = $(obj);
    objLi.style.border = "1px solid #D4D4D4";
    objLi.style.cursor = "";
}


function fctOver(obj)
{
    var objLi = $(obj);
    objLi.style.background = "#D4D4D4";
    objLi.style.cursor = "pointer";
}

function fctOut(obj)
{
    var objLi = $(obj);
    objLi.style.background = "";
    objLi.style.cursor = "";
}

/* ================================================== */
/* IE 6, older browsers에서만 사용 되는 함수 - 끝 - */
/* ================================================== */