// when the live transfer doesn't initialed yet. seller will ask to init chat
(function($) { 
$.planSelector = function(options) {
     this.options = $.extend({}, {}, options || {});  
	 this.win = false;

     if(!this.options.callback)
        alert('Error, No callback');

     var content = '<div><h4 style="text-align: center;">Click on the plan you want to take to start the live transfer:</h4>';
     content += '<div class="plans"></div></div>';            

     var self = this;
    this.win = new Boxy(content, { title: 'Please select a plan',beforeUnload:function(){  	       
       self.options.close.apply(this);
    }});

	this.renderPlans();
 };
 
$.planSelector.prototype={
	renderPlans:function(){
	   var content = $('<table class="plans" cellspacing="0" border="0" style="border-collapse: collapse;"><tbody /></table>');
	   var self = this;
	 
	   var tr = $('<tr />');
	   $(this.options.plans).each(function(j){
	     var plan = $(this).get(0);
	      if(typeof(plan) == 'undefined')return;
	       if(j%2==0){
	        tr  =$('<tr />');
	        content.find("tbody:nth(0)").append(tr);
	       }
	          	   
	       tr.append($("<td />").append(self.buildPlan(plan)));
	   });
 
	    this.win.getContent().find("div.plans").append(content);
	},
	
	buildPlan:function(p){
	   var content = '<table border="0"  class="plan featuredBGNormal1" style="width: 209px; height: 175px; text-align: center;">';
	   content +='<tbody><tr><td align="center" style="font-size: 8pt;">'
       content +='<table cellspacing="0" cellpadding="0" border="0" style="height: 160px; width: 190px; text-align: center;">';
       content +='  <tbody><tr><td valign="top"> <table cellspacing="0" cellpadding="0" style="height: 160px;">';
       content +=' <tbody><tr><td valign="top">';
       content +='<img style="border-width: 0px;" src="'+p.ImageFileSmall+'" class="carrier"/></td></tr>';
       content +='<tr> <td class="SmallFont">'+p.ProductName+'</td></tr>';
       content +='</tbody></table></td>';
       content +='<td><table height="160" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"></td></tr>'
       content += '<tr valign="bottom"><td><span class="SmallFont">'+p.ContractTerm+' months</span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>';
       var pe = $(content);
       var self = this;
       pe.click(function(){
          self.options.callback.apply(this,[p.ID]);
          self.win.unload();
       }).mouseout(function(){
          $(this).removeClass().addClass("plan featuredBGNormal1");
       }).mouseover(function(){
          $(this).removeClass().addClass("plan featuredBGOver1");
       });
       
       return pe;
    }
}

})(jQuery);