﻿/*
*   导购UI
*   Jamber @ 2008-07-29
*   v0.1
*   jamber.peng@gmail.com
*   Think soft
*/



/*


var s1 = '<select name="s1" id="s1" onchange="Next(this,0)">'
           + '<option value="0" selected="selected">选择用途</option>'
           + '<option value="1">家用</option>'
           + '<option value="2">公司用</option>'
           + '<option value="3">商住两用或教育机</option>'
           + '<option value="4">会堂及大型场所使用</option>'
       + '</select>';

var s2 = '<select name="s2" id="s2" onchange="Next(this,1)">'
           + '<option value="0" selected="selected">选择使用面积</option>'
           + '<option value="1">20平方米之内</option>'
           + '<option value="2">20-40平方米</option>'
           + '<option value="3">40-60平方米</option>'
           + '<option value="4">60-100平方米</option>'
           + '<option value="5">100-200平方米</option>'
           + '<option value="6">200平方米以上</option>'
       + '</select>';

var s3 = '<select name="s3" id="s3" onchange="Next(this,2)">'
           + '<option value="0" selected="selected">选择环境光线</option>'
           + '<option value="1">室外全天使用</option>'
           + '<option value="2">明亮的室内光，不能关灯和拉上窗帘</option>'
           + '<option value="3">室内光线一般，可关灯或拉上窗帘</option>'
           + '<option value="4">暗室环境或夜晚</option>'
       + '</select>';
       
var s4 = '<select name="s4" id="s4" onchange="Next(this,3)">'
           + '<option value="0" selected="selected">选择播放内容</option>'
           + '<option value="1">以图片，影片，视频为主，重视图像色彩</option>'
           + '<option value="2">以文档，网页，演示为主，重视画面清晰度</option>'
           + '<option value="0">以上两者皆有</option>'//等同于不选择，所以value=0
       + '</select>';
       
var s5 = '<select name="s5" id="s5" onchange="Next(this,4)">'
           + '<option value="0" selected="selected">选择重量</option>'
           + '<option value="1">固定安装，无需移动</option>'
           + '<option value="2">偶尔外出使用</option>'
           + '<option value="3">经常外出使用</option>'
           + '<option value="4">重量轻，超便携</option>'
       + '</select>';

var s6 = '<select name="s6" id="s6" onchange="Next(this,5)">'
           + '<option value="0" selected="selected">选择品牌</option>'
           + '<option value="1">国产含台湾品牌</option>'
           + '<option value="2">日韩品牌</option>'
           + '<option value="3">欧美品牌</option>'
           + '<option value="0">品牌不限</option>'//等同于不选择，所以value=0
       + '</select>';

var s7 = '<select name="s7" id="s7" onchange="Next(this,6)">'
           + '<option value="0" selected="selected">选择产品性价比</option>'
           + '<option value="1">同档次价格最低</option>'
           + '<option value="2">同档次性价比最高</option>'
           + '<option value="3">同档次画质最好</option>'
           + '<option value="4">同档次功能最多</option>'
           + '<option value="5">不求最好，但求最贵</option>'
       + '</select>';
*/

window.onload = initDaoGou;                                                         
          
var s1 = ' <label for="Radio1"><input id="Radio1"  name="R1" type="radio" value="1" />1.	家用</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R1" type="radio" value="2" />2.	公司用</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R1" type="radio" value="3" />3.	商住两用或教育机</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R1" type="radio" value="4" />4.	会堂及大型场所使用</label><br />';
                       
var s2 = ' <label for="Radio1"><input id="Radio1"  name="R2" type="radio" value="1" />1.	20平方米之内</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R2" type="radio" value="2" />2.	20-40平方米</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R2" type="radio" value="3" />3.	40-60平方米</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R2" type="radio" value="4" />4.	60-100平方米</label><br />'
         +'<label for="Radio5"><input id="Radio5"  name="R2" type="radio" value="5" />5.	100-200平方米</label><br />'
         +'<label for="Radio6"><input id="Radio6"  name="R2" type="radio" value="6" />6.	200平方米以上</label><br />';
                       
var s3 = ' <label for="Radio1"><input id="Radio1"  name="R3" type="radio" value="1" />1.	室外全天使用</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R3" type="radio" value="2" />2.	明亮的室内光，不能关灯和拉上窗帘</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R3" type="radio" value="3" />3.	室内光线一般，可关灯或拉上窗帘</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R3" type="radio" value="4" />4.	暗室环境或夜晚</label><br />';
   

var s4 = ' <label for="Radio1"><input id="Radio1"  name="R4" type="radio" value="1" />1.	以图片，影片，视频为主，重视图像色彩</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R4" type="radio" value="2" />2.	以文档，网页，演示为主，重视画面清晰度</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R4" type="radio" value="3" />3.	以上两者皆有</label><br />';
          
var s5 = ' <label for="Radio1"><input id="Radio1"  name="R5" type="radio" value="1" />1.	固定安装，无需移动</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R5" type="radio" value="2" />2.	偶尔外出使用</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R5" type="radio" value="3" />3.	经常外出使用</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R5" type="radio" value="4" />4.	重量轻超便携</label><br />'; 
                       
var s6 = ' <label for="Radio1"><input id="Radio1"  name="R6" type="radio" value="1" />1.	国产含台湾品牌</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R6" type="radio" value="2" />2.	日韩品牌</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R6" type="radio" value="3" />3.	欧美品牌</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R6" type="radio" value="4" />4.	品牌不限</label><br />'; 
                       
var s7 = ' <label for="Radio1"><input id="Radio1"  name="R7" type="radio" value="1" />1.	同档次价格最低</label><br />'
         +'<label for="Radio2"><input id="Radio2"  name="R7" type="radio" value="2" />2.	同档次性价比最高</label><br />'
         +'<label for="Radio3"><input id="Radio3"  name="R7" type="radio" value="3" />3.	同档次画质最好</label><br />'
         +'<label for="Radio4"><input id="Radio4"  name="R7" type="radio" value="4" />4.	同档次功能最多</label><br />'
         +'<label for="Radio5"><input id="Radio5"  name="R7" type="radio" value="5" />5.	不求最好，但求最贵</label><br />'; 
         
         
         
         
         
//记录用户所选择过的select value
//用途 面积 光线强度 放映内容 重量 品牌 性能价格
var condition = [ 
                    ["1yt","","<div class='question'>1.您购买投影机的用途是？</div><div class='option'>"+s1+"</div>"],
                    ["2mj","","<div class='question'>2.您的使用环境面积多大？</div><div class='option'>"+s2+"</div>"],
                    ["3gx","","<div class='question'>3.您的使用环境光线强度如何？</div><div class='option'>"+s3+"</div>"],
                    ["4fy","","<div class='question'>4.您的投影机放映内容是？</div><div class='option'>"+s4+"</div>"],
                    ["5zl","","<div class='question'>5.您对投影机重量有何要求？</div><div class='option'>"+s5+"</div>"],
                    ["6pp","","<div class='question'>6.您对投影机品牌有何要求？</div><div class='option'>"+s6+"</div>"],
                    ["7xj","","<div class='question'>7.您对投影机性能价格有何要求？</div><div class='option'>"+s7+"</div>"]
                ];

//========获取HTML中的对象=================================
//UI容器
var ddiv = null;
//跳过按钮
var jBtn = null;
//下一步按钮
var nBtn = null;
//==========================================================

//当前index
var cIndex = 0;

//下一步按钮 事件调用
function Next(rName,index)
{
    //debugger
    condition[index][1] = getValue(rName);
    if( index<=5 )
    {
        ddiv.innerHTML = condition[index+1][2];
        nBtn.onclick = function(){ Next("R"+(index+2),index+1); }
    }
        
    
    if( index==5 )
    {
        jBtn.disabled = true;
        nBtn.innerText = "查看为你选好的投影仪";
        nBtn.onclick = function(){ Next("R"+(index+2),index+1);search(); }
    }
    
//    if( index==6 )//选好最后一个，开始搜索
//    {
//        nBtn.onclick = function(){ test(); }
//    }
    
    if( index<6 )
        cIndex = index+1;
}

//点击跳过
function Jump()
{//debugger
    if( cIndex<6 )
    {
        ddiv.innerHTML = condition[cIndex+1][2];
        nBtn.onclick = function(){ Next("R"+(cIndex+1),cIndex); }
        
    }
        
    
    if( cIndex==5 )
    {
        jBtn.disabled = true;
        nBtn.onclick = function(){ Next("R"+(cIndex+1),cIndex);search(); }
        nBtn.innerText = "查看我们为你选好的投影仪";
    }
    cIndex++;
}

//初始化导购
function initDaoGou()
{
    ddiv = document.getElementById("daogouContent");
    jBtn = document.getElementById("jBtn");
    nBtn = document.getElementById("nBtn");
    document.getElementById("nBtn").click
    ddiv.innerHTML = condition[0][2];
    jBtn.onclick = Jump;
    nBtn.onclick = function(){ Next("R1",0); }
    if(jBtn.disabled==true)//用户可以重新开始，不用刷新页面
    {
        jBtn.disabled = false;
        nBtn.innerText = "确定并进入下一步";       
        
    }
    for(var i = 0; i<condition.length; i++)
    {
        condition[i][1] = "";
    }
    cIndex = 0;
}

function search()
{
   
    var s = "";
    for(var i = 0; i<condition.length; i++)
    {
        s += condition[i][0] + ":" + condition[i][1]+";" ;
    }
            
   document.location.href="./Product/ProductMatch.aspx?conds=" + s;
}

