if(typeof Pierre != 'undefined') {
//console.info("mixer v0.53");

Pierre.widgets.Mixer = function() {

 this.el = null; // the wrapper element; typically a DIV
 this.els = {}; // all of the elements of this Div

 this.user = null; // a user object returned from the getRequest
 this.els.mixer = null; // the wrapper div for all of the comment divs

 this.init = function(el) {
  this.el = (typeof el === 'string') ? plib.Dom.get(el) : el;
  if(this.el == null) {return false;}

  this.formWasBuilt = 0;
  this.els.mixerfaq = plib.Dom.createElement('div',{className:"mixerfaq"},this.el);
  this.els.mixerapp = plib.Dom.createElement('div', {id:'mixerapp'}, this.el);
  this.fetchRandomQuestion();
  this.buildMixHeader();
  this.buildHeader1();
  this.fetchQuestions();
 }

 this.fetchQuestions = function() {
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleQuestionsResponse}
   }
  var url = 'http://decision08.newsvine.com/_labs/politics/getQuestions?tags=issues&count=20';
  plib.Ajax.getRequest(url, config);
 }

 this.handleQuestionsResponse = function(resp) {
  var resp = resp.response;
  if(!resp || !resp.user || !resp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = resp.user;
  this.question = resp.question;
  this.buildQ1Form();

  var sel_q = document.getElementById('opt1');
  var sel_qIndex = sel_q.selectedIndex;
  var q_var = sel_q.options[sel_qIndex].value;

  this.fetchResults(q_var);
 }

 this.fetchRandomQuestion = function() {
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleRandomQuestionResponse}
   }
  var url = 'http://decision08.newsvine.com/_labs/politics/getQuestions?tags=issues&count=20';
  plib.Ajax.getRequest(url, config);
 }

 this.handleRandomQuestionResponse = function(resp) {
  var resp = resp.response;
  if(!resp || !resp.user || !resp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = resp.user;
  this.question = resp.question;

  this.randomquestion1qi=Math.floor(Math.random()*this.question.length);
  this.randomquestion1qo=Math.floor(Math.random()*5);
  
  this.randomquestion2qi=Math.floor(Math.random()*this.question.length);
  do { this.randomquestion2qi=Math.floor(Math.random()*this.question.length); } while (this.randomquestion1qi==this.randomquestion2qi);

  this.randomquestion1 = this.question[this.randomquestion1qi];
  this.randomquestion1Title = this.randomquestion1.title.substr(19);
  this.randomquestion1Url = this.randomquestion1.url;
  this.randomquestion1ID = this.randomquestion1.questionId;
  this.randomquestion1Option = this.randomquestion1.options[this.randomquestion1qo].name;
  this.randomquestion1OptionID = this.randomquestion1.options[this.randomquestion1qo].id;

  this.randomquestion2 = this.question[this.randomquestion2qi];
  this.randomquestion2ID = this.randomquestion2.questionId;

  this.fetchFilteredRandomResult();
 }

 this.fetchFilteredQuestions = function(qID,oID) {
  this.formWasBuilt = 1;
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleFilteredQuestionsResponse}
   }
  this.question2BFiltered = qID;
  this.option2BFiltered = oID;
  var url = 'http://decision08.newsvine.com/_labs/politics/getQuestions?tags=issues&count=20';
  plib.Ajax.getRequest(url, config);
 }

 this.handleFilteredQuestionsResponse = function(resp) {
  var resp = resp.response;
  if(!resp || !resp.user || !resp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = resp.user;
  this.question = resp.question;
  this.buildQ2Container();
  this.buildHeader3();
  this.buildQ2Form();

  var sel_q = document.getElementById('opt1');
  var sel_qIndex = sel_q.selectedIndex;
  var q_var = sel_q.options[sel_qIndex].value;

  this.fetchFilteredResults(this.option2BFiltered);
 }

 this.fetchResults = function() {
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleResults}
   }
 var sel_q = document.getElementById('opt1');
 var sel_qIndex = sel_q.selectedIndex;
 this.qID = sel_q.options[sel_qIndex].value;
 var url = 'http://decision08.newsvine.com/_labs/politics/getQuestion?contentId='+this.qID;
 plib.Ajax.getRequest(url, config);
 }

 this.handleResults = function(fresp) {
  var fresp = fresp.response;
  if(!fresp || !fresp.user || !fresp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = fresp.user;
  this.question = fresp.question;
  this.buildQ1Results();
  stackedChart('mixergraph1');
  if($.browser.msie){ // force IE to render tabbox
   $("#msnbcTabs .tbx").hide(); 
   $("#msnbcTabs .tbx").show(); 
  }
 }

 this.fetchFilteredResults = function(oID) {
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleFilteredResults}
   }
 var sel_q = document.getElementById('opt1');
 var sel_qIndex = sel_q.selectedIndex;
 this.qID = sel_q.options[sel_qIndex].value;
 var sel_f = document.getElementById('opt2');
 var sel_fIndex = sel_f.selectedIndex;
 this.fID = sel_f.options[sel_fIndex].value;
 this.oID = oID || "";
 var url = 'http://decision08.newsvine.com/_labs/politics/getQuestion?contentId='+this.fID+'&filterQId='+this.qID+'&filterOId='+this.oID;
 plib.Ajax.getRequest(url, config);
 }

 this.handleFilteredResults = function(fresp) {
  var fresp = fresp.response;
  if(!fresp || !fresp.user || !fresp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = fresp.user;
  this.question = fresp.question;
  this.buildQ2Results();
  stackedChart('mixergraph2');
  this.buildExplainer();
  if($.browser.msie){ // force IE to render tabbox
   $("#msnbcTabs .tbx").hide(); 
   $("#msnbcTabs .tbx").show(); 
  }
 }

 this.fetchFilteredRandomResult = function() {
  var config = {
   success: {name:'jsoncallback', scope:this, callback:this.handleFilteredRandomResult}
   }
 var url = 'http://decision08.newsvine.com/_labs/politics/getQuestion?contentId='+this.randomquestion2ID+'&filterQId='+this.randomquestion1ID+'&filterOId='+this.randomquestion1OptionID;
 plib.Ajax.getRequest(url, config);
 }

 this.handleFilteredRandomResult = function(fresp) {
  var fresp = fresp.response;
  if(!fresp || !fresp.user || !fresp.question) {
   this.el.innerHTML = 'The initialization failed.';
   return false;
  }
  this.user = fresp.user;
  this.question = fresp.question;

  this.buildFAQ();
 }

 this.buildMixHeader = function() {
    var mixerHeader = plib.Dom.createElement('h3', {innerHTML:'Mix your own results'}, this.els.mixerapp);
 }
 
 this.buildHeader1 = function() {
  var mixerHeaderContainer = plib.Dom.createElement('div', {className:'filterHeaderContainer', id:'filterHeaderContainer'}, this.els.mixerapp);
    var mixerHeader1 = plib.Dom.createElement('div', {className:'filterHeader', id:'filterHeader1', innerHTML:'<p>1. Select a live vote</p>'}, mixerHeaderContainer);
    var mixerHeader2 = plib.Dom.createElement('div', {className:'filterHeader', id:'filterHeader2', innerHTML:'<p>2. Click a response</p>'}, mixerHeaderContainer);
 }
 
 this.buildHeader3 = function() {
    var mixerHeader3 = plib.Dom.createElement('div', {className:'filterHeader', id:'filterHeader3', innerHTML:'<p>3. Select a question to compare</p>'}, this.els.mixerQ2Body);
 }
 
 this.buildQ1Form = function() {
 
    this.els.mixerDiv = plib.Dom.createElement('div', {className:'menus'}, this.els.mixerapp);
    this.els.mixerForm = plib.Dom.createElement('form', {name: 'mixerform'}, this.els.mixerDiv);
 this.els.menu1Select = plib.Dom.createElement('select', {id:'opt1'}, this.els.mixerForm);
   for(var i=0; i < this.question.length; i++) {
      var question = this.question[i];
      var questionId = question.questionId;
      var questionTitle = question.title;
   questionTitle = questionTitle.substr(19);
      plib.Dom.createElement('option', {value:questionId, innerHTML:questionTitle}, this.els.menu1Select);
   }
 plib.Event.on(this.els.menu1Select, 'change', this.refreshQ1, this, true);
    //this.els.submitButton = plib.Dom.createInput('button', 'mixerSubmit', {value:'Go'}, this.els.mixerForm);
 //plib.Event.on(this.els.submitButton, 'click', this.refreshQ1, this, true);
  }
 
this.buildQ2Container = function() {
 this.els.mixerQ2Container = plib.Dom.createElement('div', {id: 'filterform', className:'filterContainer'}, this.els.mixerapp);
 this.els.mixerQ2Top = plib.Dom.createElement('div', {className:'btop'}, this.els.mixerQ2Container);
 this.els.mixerQ2Body = plib.Dom.createElement('div', {className:'bmid',id:'bmid'}, this.els.mixerQ2Container);
 this.els.mixerQ2Bottom = plib.Dom.createElement('div', {className:'bbot'}, this.els.mixerQ2Container);
}

this.buildQ2Form = function() {

    this.els.mixerDiv2 = plib.Dom.createElement('div', {className:'menus'}, this.els.mixerQ2Body);
    this.els.mixerForm2 = plib.Dom.createElement('form', {name: 'mixerform2'}, this.els.mixerDiv2);
 this.els.menu2Select = plib.Dom.createElement('select', {id:'opt2'}, this.els.mixerForm2);
   for(var i=0; i < this.question.length; i++) {
      var question = this.question[i];
      var questionId = question.questionId;
      var questionTitle = question.title;
   questionTitle = questionTitle.substr(19);
   if(questionId != this.question2BFiltered){
       plib.Dom.createElement('option', {value:questionId, innerHTML:questionTitle}, this.els.menu2Select);
   }
   }
 plib.Event.on(this.els.menu2Select, 'change', this.refreshQ2, this, true);
    //this.els.submitButton = plib.Dom.createInput('button', 'mixerSubmit', {value:'Go'}, this.els.mixerForm2);
 //plib.Event.on(this.els.submitButton, 'click', this.refreshQ2, this, true);

 }
 
 this.fetchQ2Form = function(qID,oID,oName,oOpt) {
 this.winner1o = oName;
 this.winner1i = oOpt;
 var delete0 = plib.Dom.get('mixerapp');
 var delete1 = plib.Dom.get('bmid');
 if(this.formWasBuilt==0) {
  var delete8 = plib.Dom.get('filterform');
  if(delete8.parentNode==delete0){delete0.removeChild(delete8);}
 }
 var delete4 = plib.Dom.get('clearexp');
 var delete5 = plib.Dom.get('clearexp2');
 var delete6 = plib.Dom.get('mixervotes2');
 var delete7 = plib.Dom.get('mixergraph2');
 var delete9 = plib.Dom.get('explainer');
 if(delete4.parentNode==delete1){delete1.removeChild(delete4);}
 if(delete5.parentNode==delete1){delete1.removeChild(delete5);}
 if(delete6.parentNode==delete1){delete1.removeChild(delete6);}
 if(delete7.parentNode==delete1){delete1.removeChild(delete7);}
 if(delete9.parentNode==delete1){delete1.removeChild(delete9);}
 if(this.formWasBuilt==1) {
  this.fetchFilteredResults(oID);
 } else {
  this.fetchFilteredQuestions(qID,oID);
 }
 }
 
 this.refreshQ1 = function() {
 var delete0 = plib.Dom.get('mixerapp');
 var delete1 = plib.Dom.get('mixergraph1');
 var delete2 = plib.Dom.get('mixervotes1');
 var delete8 = plib.Dom.get('filterform');
 if(delete1.parentNode==delete0){delete0.removeChild(delete1);}
 if(delete2.parentNode==delete0){delete0.removeChild(delete2);}
 if(delete8.parentNode==delete0){delete0.removeChild(delete8);}
 this.fetchResults();
 this.formWasBuilt = 0;
 }
 
this.refreshQ2 = function() {
 var delete0 = plib.Dom.get('bmid');
 var delete4 = plib.Dom.get('clearexp');
 var delete5 = plib.Dom.get('clearexp2');
 var delete6 = plib.Dom.get('mixervotes2');
 var delete7 = plib.Dom.get('mixergraph2');
 var delete9 = plib.Dom.get('explainer');
 if(delete4.parentNode==delete0){delete0.removeChild(delete4);}
 if(delete5.parentNode==delete0){delete0.removeChild(delete5);}
 if(delete6.parentNode==delete0){delete0.removeChild(delete6);}
 if(delete7.parentNode==delete0){delete0.removeChild(delete7);}
 if(delete9.parentNode==delete0){delete0.removeChild(delete9);}
    this.fetchFilteredResults(this.option2BFiltered);
 }
 
this.buildQ1Results = function() {

    var graphDiv = plib.Dom.createElement('div', {id:'mixergraph1',className:'multi_answers'}, this.els.mixerapp);
    this.winner1o = null;
    this.winner1v = 0;

    for(var i=0; i < this.question.length; i++) {

        var question = this.question[i];
        var questionId = question.questionId;
        var questionTitle = question.title;
        var questionUrl = question.url;
        var questionOptions = question.options;
        var questionVotes = question.totalVotes || 0;
        var graphHTML = "";
        var questionPct = "";
        this.winner1q = question.title.substr(19);
        this.winner1u = question.url;

        if(questionVotes>0){
            graphHTML += "<div id=\"mix"+questionId+"\" class=\"chart-stacked label-winner\">";
            graphHTML += "<table>";
            graphHTML += "<caption>Responses from the live vote question: "+questionTitle+"</caption>";
            graphHTML += "<colgroup></colgroup><colgroup></colgroup>";
            graphHTML += "<thead><tr><th scope=\"colgroup\">Stance</th><th scope=\"colgroup\">Percentage</th></tr></thead>";
            graphHTML += "<tbody>";

            for(j=0;j<questionOptions.length;j++){
                if(questionOptions[j].votes>0){
                    questionPct = Math.round((questionOptions[j].votes/questionVotes)*100);
                    graphHTML += "<tr class=\"answer"+j+"\">";
                    graphHTML += "<th scope=\"row\">"+questionOptions[j].name+"</th>";
                    graphHTML += "<td><a class=\"questionPct\" href=\"#live-vote\">"+questionPct+"</a></td>";
                    graphHTML += "</tr>";
                    if(parseInt(questionOptions[j].votes)>parseInt(this.winner2v)){ 
                        this.winner1v = questionOptions[j].votes;
                        this.winner1o = questionOptions[j].name;
                        this.winner1i = j;
                        this.winner1p = questionPct;
                    }
                }
            }

            graphHTML += "</tbody>";
            graphHTML += "</table>";
            graphHTML += "</div>";

            var rowGraphDiv = plib.Dom.createElement('div', {innerHTML: graphHTML}, graphDiv);

            var rowCounter = 0;
            var links = plib.Dom.getByClass('questionPct', 'a', rowGraphDiv);
            var answerRows = rowGraphDiv.getElementsByTagName('tr');
            
            for(j=0;j<questionOptions.length;j++){
                if(questionOptions[j].votes>0 && links.length > rowCounter && answerRows.length > rowCounter){
                    var rowGraphDivTDA = links[rowCounter];
                    var rowGraphDivTRow = answerRows[rowCounter+1];
                    rowCounter++;
                    plib.Event.on(rowGraphDivTDA, 'click', function(e, data){data.obj.fetchQ2Form(data.questionId,data.optionId,data.optionName,data.optionArray);data.obj.hideOthers(data.rowGraphDivTRow);}, {obj:this, questionId:questionId, optionId:questionOptions[j].id, optionName:questionOptions[j].name, optionArray:j, rowGraphDivTRow:rowGraphDivTRow});
                }
            }

        } else {
            graphHTML = "<p>No votes yet.</p>";
            var rowGraphDiv = plib.Dom.createElement('div', {innerHTML: graphHTML}, graphDiv);
        }
        

    }

}

 this.buildQ2Results = function() {
 
 var graphDiv = plib.Dom.createElement('div', {id:'mixergraph2',className:'multi_answers'}, this.els.mixerQ2Body);
 this.winner2o = null;
 this.winner2v = 0;

  for(var i=0; i < this.question.length; i++) {
   
   var question = this.question[i];
   var questionId = question.questionId;
   var questionTitle = question.title;
   var questionUrl = question.url;
   var questionOptions = question.options;
   var questionVotes = question.totalVotes || 0;
   var graphHTML = "";
   var questionPct = "";
   this.winner2q = question.title.substr(19);
   this.winner2u = question.url;
   
  if(questionVotes>0){
   graphHTML += "<div id=\"mix"+questionId+"\" class=\"chart-stacked label-winner\">";
   graphHTML += "<table>";
   graphHTML += "<caption>Responses from the live vote question: "+questionTitle+"</caption>";
   graphHTML += "<colgroup></colgroup><colgroup></colgroup>";
   graphHTML += "<thead><tr><th scope=\"colgroup\">Stance</th><th scope=\"colgroup\">Percentage</th></tr></thead>";
   graphHTML += "<tbody>";
   
    for(j=0;j<questionOptions.length;j++){
     if(questionOptions[j].votes>0){
     questionPct = Math.round((questionOptions[j].votes/questionVotes)*100);
     graphHTML += "<tr class=\"answer"+j+"\">";
     graphHTML += "<th scope=\"row\">"+questionOptions[j].name+"</th>";
     graphHTML += "<td><a>"+questionPct+"</a></td>";
     graphHTML += "</tr>";
   if(parseInt(questionOptions[j].votes)>parseInt(this.winner2v)){ 
     this.winner2v = questionOptions[j].votes;
     this.winner2o = questionOptions[j].name;
     this.winner2i = j;
     this.winner2p = questionPct;
   }
     }
    }
   
   graphHTML += "</tbody>";
   graphHTML += "</table>";
   graphHTML += "</div>";
  } else {
   graphHTML = "<p>No votes yet.</p>";
  }
 var rowGraphDiv = plib.Dom.createElement('div', {innerHTML: graphHTML}, graphDiv);
 var clearExp2 = plib.Dom.createElement('div', {className:'clearer', id:'clearexp2'}, this.els.mixerQ2Body);
 }
}

 this.buildExplainer = function() {
    var mixerExpTxt = plib.Dom.createElement('div', {className:'menus', id:'explainer'}, this.els.mixerQ2Body);
 if(this.winner1o=="Neutral"){this.winner1o="are neutral";}
 if(this.winner2o=="Neutral"){this.winner2o="are neutral";}
 if(this.winner2o){
  mixerExpTxt.innerHTML = "<hr size=\"1\" /><p>Of the people who <span class=\"color"+this.winner1i+"\">"+this.winner1o.toLowerCase()+"</span> that <a href=\""+this.winner1u+"\">\""+this.winner1q+"\"</a>, "+this.winner2p+"% also <span class=\"color"+this.winner2i+"\">"+this.winner2o.toLowerCase()+"</span> that <a href=\""+this.winner2u+"\">\""+this.winner2q+"\"</a>.</p>";
 }
 var clearExp = plib.Dom.createElement('div', {className:'clearer', id:'clearexp'}, this.els.mixerQ2Body);
 }

 this.hideOthers = function(tRow) {
  for(i=0;i<tRow.parentNode.childNodes.length;i++){
  if(tRow.parentNode.childNodes[i]!=tRow){
    plib.Dom.addClass(tRow.parentNode.childNodes[i],"clickdisabled");
  } else {
    plib.Dom.removeClass(tRow.parentNode.childNodes[i],"clickdisabled");
  }
 }
 }
 
 this.addCommas = function(nStr) {
 nStr += '';
 x = nStr.split('.');
 x1 = x[0];
 x2 = x.length > 1 ? '.' + x[1] : '';
 var rgx = /(\d+)(\d{3})/;
 while (rgx.test(x1)) {
  x1 = x1.replace(rgx, '$1' + ',' + '$2');
 }
 return x1 + x2;
 }

 this.buildFAQ = function() {
 
 this.winnerr2o = null;
 this.winnerr2v = 0;
 for(var i=0; i < this.question.length; i++) {
    
 this.randomquestion2 = this.question[i];
 	if(this.randomquestion2){
	 this.randomquestion2Title = this.randomquestion2.title.substr(19);
	 this.randomquestion2Url = this.randomquestion2.url;
	 this.randomquestion2Options = this.randomquestion2.options;
	
	  for(j=0;j<this.randomquestion2Options.length;j++){
	   if(this.randomquestion2Options[j].votes>0){
	    if(parseInt(this.randomquestion2Options[j].votes)>parseInt(this.winnerr2v)){ 
	    this.winnerr2v = this.randomquestion2Options[j].votes;
	    this.winnerr2o = this.randomquestion2Options[j].name;
	    this.winnerr2i = j;
	    }
	   }
	  }
	 }
	
	 if(this.randomquestion1Option=="Neutral"){this.randomquestion1Option="are neutral";}
	 if(this.winnerr2o=="Neutral"){this.winnerr2o="are neutral";}
	 plib.Dom.createElement('h3',{innerHTML:"Did you know?"},this.els.mixerfaq);
	 plib.Dom.createElement('p',{innerHTML:"People who <span class=\"color"+this.randomquestion1qo+"\">"+this.randomquestion1Option.toLowerCase()+"</span> that <a href=\""+this.randomquestion1Url+"\">\""+this.randomquestion1Title+"\"</a>...<br /><br />also <span class=\"color"+this.winnerr2i+"\">"+this.winnerr2o.toLowerCase()+"</span> that <a href=\""+this.randomquestion2Url+"\">\""+this.randomquestion2Title+"\"</a>.<br /><br />"},this.els.mixerfaq);
	 }
 	}
}
//if defined
}