var xmlCompare;
    
    function getCompareList( mobilesn, mode){
     
        var url = './xml/xml_compare_list.jsp?mobilesn=' + mobilesn + '&mode=' + mode;

        if( window.XMLHttpRequest) xmlCompare = new XMLHttpRequest();
        else if( window.ActiveXObject) xmlCompare = new ActiveXObject('Microsoft.XMLHTTP');
          
        // xmlCompare = GetXmlHttpObject();
        xmlCompare.open( 'GET', url, false);
        xmlCompare.onreadystatechange = setCompareList;
        xmlCompare.send( null);

    }
    
    function setCompareList(){
        
        var i, j;
        var htmlText;
        var serialno, name, paste, status, total;
        
        htmlText = '';
        
        if( xmlCompare.readyState == 4 && xmlCompare.status == 200){ 

            status = xmlCompare.responseXML.getElementsByTagName('status')[0].firstChild.nodeValue;
            total = parseInt( xmlCompare.responseXML.getElementsByTagName('total')[0].firstChild.nodeValue);

            if( total > 0){

                htmlText = '  <table width="485" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">\n';
                htmlText += '   <tr><td width="485" height="25" colspan="3"><img src="./confront/images/confront_area_title.gif" width="125" height="25"></td></tr>\n';
                htmlText += '   <tr><td width="15" height="15" background="./confront/images/confront_area_01.gif"></td>\n';
                htmlText += '       <td width="455" height="15" background="./confront/images/confront_area_02.gif"></td>\n';
                htmlText += '       <td width="15" height="15" background="./confront/images/confront_area_03.gif"></td></tr>\n';
                htmlText += '   <tr><td width="15" height="70" background="./confront/images/confront_area_04.gif"></td>\n';
                htmlText += '       <td width="455" height="70" align="center">\n';
                htmlText += '        <table width="440" border="0" cellspacing="0" cellpadding="0"><form name="compForm" action="./confront_report.jsp" method="post" onsubmit="javascript: return countCompareTotal();">\n';
                htmlText += '         <tr>\n';
                
                for( i = 0; i < xmlCompare.responseXML.getElementsByTagName('name').length; i ++){
                    
                    serialno = xmlCompare.responseXML.getElementsByTagName('serialno')[i].firstChild.nodeValue;
                    name = xmlCompare.responseXML.getElementsByTagName('name')[i].firstChild.nodeValue;
                    paste = xmlCompare.responseXML.getElementsByTagName('image')[i].firstChild.nodeValue;

                    htmlText += '          <td width="110" align="center" valign="top">\n';
                    htmlText += '           <table width="110" border="0" cellspacing="0" cellpadding="0">\n';
                    htmlText += '            <tr><td width="20" height="50" align="right" valign="top" rowspan="2"><a href="javascript: getCompareList( \'' + serialno + '\', 2);"><img src="./confront/images/confront_area_delete.gif" width="12" height="11" border="0" alt="移除此款手機"></a></td>\n';
                    htmlText += '                <td width="90" height="50" align="center"><input type="hidden" name="mobiles" value="' + serialno + '" /><a href="./mobile_view.jsp?sn=' + serialno + '"><img src="' + paste + '" width="50" height="50" border="0"></a></td></tr>\n';
                    htmlText += '            <tr><td width="110" height="20" align="center"><a href="./mobile_view.jsp?sn=' + serialno + '" class="comparelist">' + name + '</a></td></tr>\n';
                    htmlText += '           </table>\n';
                    htmlText += '          </td>\n';
               
                }
                
                if( total != 4){
                
                    for( j = 0; j < 4 - total; j ++){
                    
                    
                        htmlText += '          <td width="110"></td>\n';                        
                        
                    }                    
                    
                }

                htmlText += '         </tr>\n';
                htmlText += '        </table>\n';
                htmlText += '       </td>\n';
                htmlText += '       <td width="15" height="70" background="./confront/images/confront_area_05.gif"></td></tr>\n';
                htmlText += '   <tr><td width="15" height="28" background="./confront/images/confront_area_06.gif"></td>\n';
                htmlText += '       <td width="455" height="28" align="right" valign="bottom" background="./confront/images/confront_area_07.gif">\n';
                htmlText += '        <a href="javascript: getCompareList( \'\', 3);"><img src="./confront/images/confront_area_reset.gif" width="51" height="18" border="0" alt="清除比較清單"></a> <input type="image" src="./confront/images/confront_area_submit.gif" width="51" height="18" border="0" alt="觀看比較結果">\n';
                htmlText += '       </td>\n';
                htmlText += '       <td width="15" height="28" background="./confront/images/confront_area_08.gif"></td></tr></form>\n';
                htmlText += '  </table>\n';    
           
            }

            if( status == '2'){
            
                alert( '手機型號已經存在！');
            
            }
        
            else if( status == '3'){
        
                alert( '最多只能選擇四款手機進行比較！');
        
            }

            comparelist.innerHTML = htmlText; 
            resizeCompareList();
                
        } 

    }

    function countCompareTotal(){

        if( document.compForm.mobiles.length < 2 || document.compForm.mobiles.length == undefined){
        
            alert('請挑選2-4款手機進行比較！');
            return false;
        
        }        
        
    }

    function moveCompareList(){
        
        getCompareList( '', 0);
        setInterval( 'resizeCompareList()', 10);
    }

    function resizeCompareList(){
        
        // comparelist.style.top = document.body.scrollTop + document.body.clientHeight - comparelist.offsetHeight - 150;
        comparelist.style.top = document.body.scrollTop + 100;
        comparelist.style.left = 206;
        
    }