var the_one_portable_guider = null;
function portable_guider_callback(xml){
  the_one_portable_guider.setXML(xml);
}
function showWhatsThis_old(evt){
  if (!evt) evt = window.event;
  var target = (evt.target)?evt.target:(evt.srcElement)?evt.srcElement:null;
  var row = target.up(".portable-guider-answer");
  var textelem = row.down('.whats-this-text');
  textelem.toggle();
  if (evt.stopPropagation) evt.stopPropagation();
  evt.cancelBubble = true;
  return false;
}
function showWhatsThis(evt){
  if (!evt) evt = window.event;
  var target = (evt.target)?evt.target:(evt.srcElement)?evt.srcElement:null;
  //find the ancestor with class portable-guider-answer
  var row = target;
  while (row.parentNode){
        row = row.parentNode;
        if (row.className == "portable-guider-answer"){
           break;
        }
  }
  if (row.className != "portable-guider-answer"){
     //we can't find the what's this text
     return;
  }
  //now find the child with class name "portable-guider-whats-this-text"
  var textelem = null;
  for (var i=0; i<row.childNodes.length; i++){
      if (row.childNodes[i].className == "whats-this-text"){
         textelem = row.childNodes[i];
         break;
      }
  }
  if (textelem==null){
     //we can't find the what's this text
     return;     
  }
  textelem.style.display = (textelem.style.display != 'none' ? 'none' : '' );
  if (evt.stopPropagation) evt.stopPropagation();
  evt.cancelBubble = true;
  return false;
}
function showQuestionWhatsThis(){
  $('question-whats-this-text').toggle();
}
function PortableGuider(app,gid){

  var thexml        = null;
  var thediv        = null;
  var thedivid      = null;
  var guider        = null;
  var title         = null;
  var isPopup       = false;
  var popoutEnabled = false;
  var currentid     = "";
  
  var idstack = Array();
  var storage = new ClientSideStorage("portableguiderstorage");
  if (storage.contains("idstack")){
     idstack = storage.getArray("idstack");  
  }
  the_one_portable_guider = this;
  
  this.display = function(div_id){
    thediv = new Div();
    thediv.bind(div_id);
    thedivid = div_id;
    if (thexml!=null){
       render();
    }
  }
  
  this.redisplay = function(){
    $(thedivid).show();
    render();
  }
  
  this.isPopup = function(){
    isPopup = true;
  }
  
  this.setXML = function(xml){
    thexml = xml;
    if (thediv!=null){
       render();
    }
  }
  this.goToRoot = function(){
    this.resetHistory();
    question = guider.getRootQuestion();      
    currentid = question.getID();
    renderQuestion(question);
  }
  this.next = function(id){
    idstack.push(currentid);
    var node = guider.getNode(id);
    if (!node.isQuestion()){ alert("PortableGuider.renderQuestion received node which is not a question"); }
    currentid = id;
    renderQuestion(node);
    storage.put("currentid",currentid);
    storage.putArray("idstack",idstack);
    storage.save();
  }
  
  this.goBack = function(){
    currentid = idstack[idstack.length-1];
    idstack.length--;
    var node = guider.getNode(currentid);
    if (!node.isQuestion()){ alert("PortableGuider.renderQuestion received node which is not a question"); }
    renderQuestion(node);    
    storage.put("currentid",currentid);
    storage.putArray("idstack",idstack);
    storage.save();
  }
  
  this.popout = function(){
    guiderwin = window.open("popupguider.html", "Guider","width=400,height=500,scrollbars=no,status=no");
    $(thedivid).hide();
  }
  //----------------------------------------------------------------------------
  // Tells the portable guider to ignore any exisiting cookies and just start 
  // at the top of the guider tree.
  //----------------------------------------------------------------------------
  this.resetHistory = function(){
    idstack = new Array();
    currentid = "";
    storage.clear();
    storage.save();
  }

  function render(){
    //Initialize the guider XML parser
    guider = new Guider();
    guider.setXML(thexml);
    title = guider.getTitle();
    
    //Determine what the initial node should be.  There are three possiblilties
    //  1. if there's a node that leads to the current URL - use that as the starting node.  otherwise
    //  2. if there is a cookie with the previous location, use that.  Otherwise
    //  3. Use the root node.
    var destnode = guider.getNodeByDestination(""+window.location);
    var id = storage.getDefault("currentid","");
    var question = null;
    
    if (destnode!=null){
       question = guider.getParent(destnode);
    } else if (id!="") {
       question = guider.getNode(id);
    } else {
       question = guider.getRootQuestion();      
    }

    currentid = question.getID();
    renderQuestion(question);
  }

  function renderQuestion(node){
    var html = "";
    if (!isPopup && popoutEnabled){
       html += "<div id='popout-link'><a href='javascript:the_one_portable_guider.popout()' >^popout</a></div>";
    }
    if (idstack.length>0){
       html += "<a href='javascript:the_one_portable_guider.goBack();' title='Return to the previous question'><div id='enabled-back-Button'>&lt;Back</div></a>";
    } else {
       html += "<div id='disabled-back-Button'>&nbsp;</div>";
    }
    if (node.isRoot()){
       html += "<div id='disabled-root-Button'>&nbsp;</div>";      
    } else {
       html += "<a href='javascript:the_one_portable_guider.goToRoot();' title='Return to the root of this guider'><div id='enabled-root-Button'>^top</div></a>";
    }
    html += "<div id='portable-guider-canvas-content'>";
    html += "<div id='guider-title'>"+title+"</div>";
    html += "<h4 class='portable-guider-question'>"+node.getText()+"</h4>";
    if (node.hasExplanation()){
       html += "<a href='javascript:void(0)' class='whats-this-button' onClick='showQuestionWhatsThis();' >What's this</a>";
       html += "<div id='question-whats-this-text' class='whats-this-text' style='display: none;' >"+node.getExplanation()+"</div>";   
    }
    html += "<div id='portable-guider-answers'>";
    var answers = node.getAnswers(); 
    for (var i=0; i<answers.length; i++){
        if (answers[i].getDestination()==null){
           html += "<div class='portable-guider-answer' >"+answers[i].getText();
           if (answers[i].hasExplanation()){
              html += "<span class='whats-this-button'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>";
           }
           if (answers[i].hasExplanation()){
              html +=  "<div id='whats-this-text-"+i+"' class='whats-this-text' style='display: none;'>"+answers[i].getExplanation()+"</div>";
           }
           html += "</div>";
        } else {
          if (answers[i].getDestination().isQuestion()){
             html += "<div class='portable-guider-answer'>";
             html += "<a class='portable-guider-answer-link' href='javascript:the_one_portable_guider.next(\""+answers[i].getDestination().getID()+"\")' ><span class='destination-icon-narrow'>narrow</span>" + answers[i].getText();
             if (answers[i].hasExplanation()){
                html += "<span class='whats-this-button'>What's this</span>";
             }
             html +=  "</a>";
             if (answers[i].hasExplanation()){
                html +=  "<div id='whats-this-text-"+i+"' class='whats-this-text' style='display: none;'>"+answers[i].getExplanation()+"</div>";
             }
             html += "</div>";
             
          } else if (answers[i].getDestination().isExternalLink()){
             html += "<div class='portable-guider-answer'>";
             html += "<a class='portable-guider-answer-link' href='"+answers[i].getDestination().getURL()+"'>" + "<span class='destination-icon-link'>website</span>" + answers[i].getText();
             if (answers[i].hasExplanation()){
                html += "<span class='whats-this-button'>What's this</span>";
             }
             html += "</a>";
             if (answers[i].hasExplanation()){
                html +=  "<div id='whats-this-text-"+i+"' class='whats-this-text' style='display: none;'>"+answers[i].getExplanation()+"</div>";
             }
             html += "</div>";
          } else { //it's a google search
             html += "<div class='portable-guider-answer'>";
             html += "<a class='portable-guider-answer-link' href='javascript:void(0);' onclick='window.open(\""+answers[i].getDestination().getURL()+"\",\"Google\",\"width=1000,height=600,resizable,scrollbars=yes\");'><span class='destination-icon-google'>website</span>" + answers[i].getText();
             if (answers[i].hasExplanation()){
                html += "<span class='whats-this-button'>What's this</span>";
             }
             html += "</a>";   
             if (answers[i].hasExplanation()){
                html +=  "<div id='whats-this-text-"+i+"' class='whats-this-text' style='display: none;'>"+answers[i].getExplanation()+"</div>";
             }
             html += "</div>";
          }
        }
    }
    html += "</div>";
    html += "</div>";
    html += "<div id='pg-logo'><a href='http://iguiders.com' ><span id='pg-logo-text'>powered by</span><img id='home-link' src='http://iguiders.local/pg/0.01/img/portable.png' /></a></div>";
    thediv.setHTML(html);
    //attach the whats this handlers
    var icons = $$('#portable-guider-answers .whats-this-button');
    for (var i=0; i<icons.length; i++){
        icons[i].onclick = showWhatsThis;
    }
  }
  
  var script = document.createElement("script");
  script.setAttribute("type", "text/javascript");
  script.setAttribute("charset", "utf-8");
  script.setAttribute("src", app+"/api/0.01/"+gid+"?callback=portable_guider_callback&noCacheIE="+new Date().getTime());
  document.getElementsByTagName("head").item(0).appendChild(script);
}

function setOpener(newurl){
  opener.document.location = newurl;
}