﻿//////////////////////////////////////////////////////////////
//상품레이어 버튼(전역으로사용됨) 
//////////////////////////////////////////////////////////////
var goodsLayer_isbn = '';  
var goodsLayer_div = '';
var goodsLayer_div_created = false;
var goodsLayer_login = false;
var goodsLayer_debug = false; //디버깅할때 사용
var goodsLayer_aTag = '';

var goodsLayer_mouseover_flag = false; //마우스오버상태인지를 나타내는 플래그
var goodsLayer_timeObject  = ''; //마우스아웃시 사용되는 타이머 





//ie8미만 버전인가?
function goodsLayer_underIE8(){
    
    
   
    
    if(isIE){
        var rv = navigator.appVersion.match(/MSIE \d+.\d+/)[0].split(" ")[1];
        if(parseInt(rv)<8){
            return true;
        }
    }
    
    
    
    return false;
} 


function goodsLayer_show(aTag, paperId){
    var div = goodsLayer_div;
    var a = this;
    var url = a.href;
    
    //마우스오버 선택된것으로 설정 
    goodsLayer_mouseover_flag = true;
      
    //영화아이템(isbn 맨앞자리가 m 인경우)이 담긴경우는 장바구니 담기가 안되므로 레이어 표시 안함
    if(url.substring((url.indexOf('=') + 1), url.length-9).toLowerCase()=='m'){
       //아무것도 안한다.
       return;
    }
  
    //레이어보이기
    div.style.display = 'block';
      
    //마지막수행한 a태그와 같다면
    if(goodsLayer_aTag == a){
        //아무것도 안한다
        return; 
    }
   

    /////////////////////////////////////////////////////////////////////
    //1. 전역변수 새로 설정하고...
    /////////////////////////////////////////////////////////////////////
    goodsLayer_aTag = a;    //현재 수행되는 a 태그 설정 
    goodsLayer_isbn = url.substring((url.indexOf('=') + 1), url.length);  //현재 수행되는 ISBN 설정 


    /////////////////////////////////////////////////////////////////////
    //2. 각종 엘리먼트 설정 
    /////////////////////////////////////////////////////////////////////
    var goods_img = a.getElementsByTagName("img")[0];
    var p_div = $('div_goodsLayer_' + paperId);  //페이퍼 본문 상단에 위치한 div, 위치를 잡는 기준이 된다. 
    var p_article = $('article_' + paperId);  //페이퍼 본문 박스 
    var p_node = a.parentNode;   
    var p_table = goodsLayer_get_parent_table(p_node, p_article);
    var is_parent_table = (p_table != null);
   
   
   
    /////////////////////////////////////////////////////////////////////
    //3. 기존꺼삭제하고 새 a 태그 안으로 밀어넣기...
    /////////////////////////////////////////////////////////////////////
    div.parentNode.removeChild(div);
    p_div.appendChild(div);
    
   
    /////////////////////////////////////////////////////////////////////
    //4. div marginLeft 위치 지정 
    /////////////////////////////////////////////////////////////////////
    var img_center_w = ((goods_img.width-div.offsetWidth)/2);   //image 가운데 위치 값(상대)
    var pad_left = 0;   //왼쪽 loffsetLeft 
    
    if(goodsLayer_underIE8())
    {
        if(is_parent_table){
            pad_left = (p_node.offsetLeft + p_table.offsetLeft);
        }
        div.style.marginLeft = pad_left + goods_img.offsetLeft + img_center_w  + 'px';
        
    }else {
         //ff 일때로 절대좌표로 처리
         //table 이 사용되면 offsetLeft 값이 테이블을 기준으로 재계산됨
        if(is_parent_table){
            pad_left = (p_node.offsetLeft) ? p_node.offsetLeft:goods_img.offsetLeft  ;
        }else{
            //div 만 있는경우 왼쪽 메뉴 영역넓이를 추가한다. 이경우 css에서 image 에 padding 값을 주기 때문에 패딩값 5를 더한다.   
            pad_left = goods_img.offsetLeft - p_article.offsetLeft + 5;     
        }
        
        div.style.marginLeft = pad_left + img_center_w + 'px';
    }
     
    /////////////////////////////////////////////////////////////////////
    //5. div marginTop 위치 지정 
    /////////////////////////////////////////////////////////////////////
    var img_center_h = ((goods_img.height-div.offsetHeight)/2);   //image 가운데 위치 값(상대)
    var pad_top = 0 ;
    
    if(goodsLayer_underIE8())
    {
         //테이블로 감싸여있는 경우 
         if(is_parent_table){
            pad_top = (p_table.offsetTop - p_div.offsetTop);          //테이블에서 div시작위치를 뺀다.  
         }else{
            pad_top = -(p_div.offsetTop);
         }
         
         //alert(p_div.offsetTop + '' + p_div.innerHTML);
         
         div.style.marginTop = pad_top + goods_img.offsetTop + img_center_h +'px';
    }else{ 
        if(is_parent_table){
            pad_top = goods_img.offsetTop + p_table.offsetTop - p_div.offsetTop;
        }else{
            //div 만 있는경우 상위 메뉴 영역넓이를 추가한다. 이경우 css에서 image 에 padding 값을 주기 때문에 패딩값 5를 뺀다.   
            pad_top = goods_img.offsetTop - p_article.offsetTop - 5;     
        }
         div.style.marginTop = pad_top + img_center_h  +'px';
    }
}

function goodsLayer_hide(){
    //(div가 a태그 안에 없기때문에 mouserover/mouseout 이 계속발생하여 mouseout 이벤트를 timer 처리)
    //마우스오버 비활성화 설정
    goodsLayer_mouseover_flag = false;
   
    //기존 설정된 타이머 제거 
   if(goodsLayer_timeObject && goodsLayer_timeObject!='') 
        clearTimeout(goodsLayer_timeObject);

   //타이머 재설정 다시설정     
   goodsLayer_timeObject = setTimeout('goodsLayer_hideHandler()', 100);
}

function goodsLayer_hideHandler(){
    if(!goodsLayer_mouseover_flag){
        var div = goodsLayer_div;
        div.style.display = 'none';
    }
}


//상위에 테이블을 리턴한다. 
//o 현재 엘리먼트, top: 검사할 최상위 엘리먼트
function goodsLayer_get_parent_table(o, top){
    var el = o;
    var tbl = null;
    while(el != top){
        if(el.tagName == 'TABLE'){
            tbl = el;
            break;
        }
        el = el.parentNode;
    }
    return tbl;
}
  
            


function goodsLayer_bakset(){  
      var url  = "/blog/popup/ItemPushSimple.aspx?Target=basket&ISBN=" + goodsLayer_isbn;
      window.open(url, 'listWin','width=420,height=240,resizable=0,scrollbars=0');
}
function goodsLayer_savelist(){
      if(goodsLayer_login){
          var url  = "/blog/popup/ItemPushSimple.aspx?Target=savelist&ISBN=" + goodsLayer_isbn;
          window.open(url, 'listWin','width=420,height=240,resizable=0,scrollbars=0');
      }else{
          LoginPopUp();
      }
}
function goodsLayer_product(){
    location.href='http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=' + goodsLayer_isbn; 
}

//페이퍼에 상품 레이어 이벤트 매핑 
function goodsLayer_paper(paperId, login){
    goodsLayer_login = login;
    var paperEntry = $('entry_' + paperId);
    var a_list = paperEntry.getElementsByClassName('c_layer_good');
    for(var i =0;i<a_list.length;i++){
        var a =a_list[i];
        Event.observe(a, 'mouseover', goodsLayer_show.bindAsEventListener(a, paperId));
        Event.observe(a, 'mouseout', goodsLayer_hide);
    }
}

function goodsLayer_mouseover(){
    //div가 마우스오버상태임을 설정 
    goodsLayer_mouseover_flag = true;
}

function goodsLayer_makediv(){
    if(goodsLayer_div_created)
        return;
        
    goodsLayer_debugformset();
    
    //var div = "<div id='goodsLayer_div' style='position:absolute'>"
    var div = "<div id='goodsLayer_div' style='display:none; position:absolute' onmouseover='goodsLayer_mouseover();'>"
            + "<table width='75' border='0' cellspacing='0' cellpadding='0'  >"
            +   "<tr><td><img src='http://image.aladin.co.kr/img/blog2/g_layer01.gif' width='75' height='10' /></td></tr>"
            +   "<tr><td align='center' background='http://image.aladin.co.kr/img/blog2/g_layer02.gif'>"
            +       "<table border='0' cellspacing='0' cellpadding='0' ><tr>"
            +           "<td><img onclick='goodsLayer_bakset(); return false;' src='http://image.aladin.co.kr/img/blog2/gbu01_off.gif' alt='장바구니 담기' width='22' height='22' border='0' onmouseover='this.src=\"http://image.aladin.co.kr/img/blog2/gbu01_on.gif\";' onmouseout='this.src=\"http://image.aladin.co.kr/img/blog2/gbu01_off.gif\";' style='cursor:pointer;' /></td>"
            +           "<td><img onclick='goodsLayer_savelist();  return false;' src='http://image.aladin.co.kr/img/blog2/gbu02_off.gif' alt='보관함 담기' width='22' height='22' border='0' onmouseover='this.src=\"http://image.aladin.co.kr/img/blog2/gbu02_on.gif\";' onmouseout='this.src=\"http://image.aladin.co.kr/img/blog2/gbu02_off.gif\";' style='cursor:pointer;' /></td>"
            +           "<td><img onclick='goodsLayer_product();' src='http://image.aladin.co.kr/img/blog2/gbu03_off.gif' alt='책정보 보기' width='22' height='22' border='0' onmouseover='this.src=\"http://image.aladin.co.kr/img/blog2/gbu03_on.gif\";' onmouseout='this.src=\"http://image.aladin.co.kr/img/blog2/gbu03_off.gif\";' style='cursor:pointer;' /></td>"
            +           "<td></td>"
            +       "</tr></table></td></tr>"
            +    "<tr><td><img src='http://image.aladin.co.kr/img/blog2/g_layer03.gif' width='75' height='9' /></td></tr>"
            +  "</table></div>";
    document.write(div);
    
    goodsLayer_div = $('goodsLayer_div');
    goodsLayer_div_created= true;
}

function goodsLayer_debugwrite(s){
    if(goodsLayer_debug){
        $('goodsLayer_debug').value = s;
    }
}

function goodsLayer_debugformset(){
    if(goodsLayer_debug){
        document.write('<input type="text" id="goodsLayer_debug" size="200" >');
    }
}

goodsLayer_makediv();

//페이퍼마다 실행되는 fn
//goodsLayer_paper($('entry_<%=Paper.PaperId%>'), login);  
