//usage: <div id="protogrid" style=""></div>
//       <script>var grid = new protoGrid(parentid,headers_array,data_array,width,offset,splitter);</script>
//       <script>var grid = new protoGrid("protogrid",headers_proto ,data_proto,900,0,7);</script>
//where: var headers_proto=[{caption:'NAME',cellwidth:'50',cellalign:'right',withtotal:false},{caption:'SURNAME',cellwidth:'200',cellalign:'center',withtotal:false},{caption:'PHONE',cellwidth:'100',cellalign:'center',withtotal:false},{caption:'EMAIL',cellwidth:'100',cellalign:'center',withtotal:false},{caption:'ADDRESS',cellwidth:'100',cellalign:'center',withtotal:false}];
//and:   var data_proto=[[['ΧΡΗΣΤΟΣ','ΧΡΗΣΤΟΣ'],['ΜΟΥΡΑΤΙΔΗΣ','ΜΟΥΡΑΤΙΔΗΣ'],['2310901497','2310901497'],['christos@pntonline.gr, info@pntonline.gr ','christos@pntonline.gr, info@pntonline.gr '],['ΛΑΖΑΡΟΥ ΤΣΑΜΗ 9','ΛΑΖΑΡΟΥ ΤΣΑΜΗ 9']]];

var protoGrid = Class.create({
  initialize: function(element,headers,data,width,offset,splitter,options) {
	this.element = element;
	this.headers = headers;
	this.data = data;
	this.container=$(element);
	this.curcol=0;
	this.lastcall=0;
	this.width=width;
	this.newExcelWindow=null;
	this.newPrintWindow=null;
	this.options = Object.extend({
		defaultheight:300,
		sortby:null,
		excelexport:false,
		excelexporturl:'',
		printexport:false,
		printexporturl:'',
		printexporttext:''
	}, options || {});
		
	var p=Math.floor(data.length/splitter);
	this.pages=((p*splitter)<data.length?(p+1):p);
	if(this.pages==0)this.pages=1;
	this.offset=offset;
	this.splitter=splitter;
    this.render();
    this.showtotals=false;
    this.headers.each(function(s,index){if(s.withtotal!=null)this.showtotals=true;}.bind(this));
    
    
  },
  render: function() {

      var totals=[];    
	  var g='<div id="protogrid_' + this.element + '_subcontainer" style="display:block;overflow-y:hidden;overflow-x:auto;'+(this.width!=null?('width:'+this.width+'px;'):'')+' '+(this.data.length==0?('height:'+this.options.defaultheight+'px;'):'')+'" >';
	  g+='<table id="protogrid_' + this.element + '" class="protogrid" border="0" cellpadding="0" cellspacing="0" >';
      g+='<tr><th id="protogrid_' + this.element + '-#" class="nosort" style="width:12px;"><img src="res/ac3/img/spacer.gif" width="12" height="22"></th>';
      this.headers.each(function(s,index){
	      if(s.withtotal)this.showtotals=true;
	      g+='<th id="protogrid_'+this.element+'-'+index+'" width="'+s.cellwidth+'" class="nosort"><img src="res/ac3/img/spacer.gif" width="'+s.cellwidth+'" height="1" ><br/>'+s.caption+'</th>';  
      }.bind(this));
      g+='</tr>';
      headers=this.headers;
      splitter=this.splitter;
      offset=this.offset;
      

	  if(this.options.sortby!=null)this.data=this.data.sortBy(function(s) { return s[parseInt(this.options.sortby)][0]; }.bind(this));
      this.data.each(function(s,index){
		if(index>=(splitter*(offset)) && index<(splitter*(offset+1))){
			g+='<tr '+(index%2==0?'class=\'rowodd\'':'class=\'roweven\'')+' id="protogrid_'+this.element+'_tr_'+(index+1)+'"';
			g+='onclick="';
			g+='if($(\'protogrid_'+this.element+'_lastrow\').value!=\'\'){var r=$(\'protogrid_'+this.element+'_lastrow\').value;var lastclass=r.substr(0,7);var lastrow=parseInt(r.replace(lastclass,\'\')); $(\'protogrid_'+this.element+'_tr_\'+lastrow).style.background=\'\'+lastclass;}';
  	        g+='$(\'protogrid_' + this.element + '_lastrow\').value=\'#'+(index%2==0?'ffffff':'ededed')+(index+1)+'\';this.style.background=\'#bdd3ff\';" >';
			g+='<td align="center" width="12">&nbsp;'+ (index+1) +'.&nbsp;</td>';
       		s.each(function(r,index2){g+='<td width="'+headers[index2].cellwidth+'"  align="'+headers[index2].cellalign+'">'+ s[index2][1] +'</td>';});
       		g+='</tr>';
   	    }	
      }.bind(this));


      if(this.showtotals && this.data.length>0){  
        g+='<tr><td class="total" style="width:12px;">SUM:</th>';
        this.headers.each(function(s,index){
	        g+='<td width="'+s.cellwidth+'"  class="total" align="'+s.cellalign+'">'+(s.withtotal!=null?s.withtotal:'&nbsp;')+'</td>';  
        }.bind(this));
        g+='</tr>';
      }
      if(!!(window.attachEvent && !window.opera) && this.data.length>0){
        g+='<tr><td style="width:8px;">&nbsp;</th>';
        this.headers.each(function(s,index){
	        g+='<td  style="width:8px;" width="'+s.cellwidth+'" >&nbsp;</td>';  
        }.bind(this));
        g+='</tr>';
      }
      g+='</table>';
      g+='</div>';
      
      
      g+='<div id="protogrid_' + this.element + '_footer" style="background:url(res/crm/prt/protogrid_footer.gif) repeat-x;height:30px;display:block;" ><table><tr>';
      g+='<td><img id="protogrid_' + this.element + '_start" src="res/crm/prt/protogrid_start.gif" width="16" height="16" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img id="protogrid_' + this.element + '_prev" src="res/crm/prt/protogrid_prev.gif" width="16" height="16" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img src="res/crm/prt/protogrid_sep.gif" ></td>';
      g+='<td><input type="text" id="protogrid_' + this.element + '_offset" value="'+(this.offset+1)+'" style="border:1px solid #82a4cd; color:#000000; font:11px/13px Trebuchet MS; width:25px;text-align:right;"></td>';
      g+='<td>/</td>';
      g+='<td><input type="text" value="'+this.pages+'" id="protogrid_' + this.element + '_pages" style="border:1px solid #82a4cd; color:#000000;font:11px/13px Trebuchet MS;background:#ededed; width:25px;text-align:right;"   readonly="readonly"></td>';
      g+='<td><img src="res/crm/prt/protogrid_sep.gif" ></td>';
      g+='<td><img id="protogrid_' + this.element + '_next" src="res/crm/prt/protogrid_next.gif" width="16" height="16" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img id="protogrid_' + this.element + '_end" src="res/crm/prt/protogrid_end.gif" width="16" height="16" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img src="res/crm/prt/protogrid_sep.gif" ></td>';
      g+='<td><img id="protogrid_' + this.element + '_refresh" src="res/crm/prt/protogrid_refresh.gif" width="18" height="18" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img src="res/crm/prt/protogrid_sep.gif" ></td>';
      if(this.options.excelexport)g+='<td><img id="protogrid_' + this.element + '_excel" src="res/crm/prt/protogrid_excel.gif" width="20" height="20" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img id="protogrid_' + this.element + '_print" src="res/crm/prt/protogrid_print.gif" width="18" height="18" align="absmiddle" style="cursor:pointer;"></td>';
      g+='<td><img src="res/ac3/img/spacer.gif" width="15" height="10"></td>';
      g+='<td><img src="res/crm/prt/spinner.gif" absalign="middle"  id="protogrid_' + this.element + '_img"  /><input type="hidden" id="protogrid_' + this.element + '_lastrow" value=""></td>';
      g+='</tr></table>';
      g+='</div>';
      g+='<div id="protogrid_' + this.element + '_wait" style="background:#cccccc;width:0px;height:0px;position:absolute;top:0;left:0;"><img src="res/ac3/img/spacer.gif" width="200" height="200"></div>';
      
      
      //set container roperties
	  if(this.width!=null)this.container.style.width=this.width+'px';
	  this.container.style.background='url("res/crm/prt/protogrid_header_inac.gif") repeat-x #ededed';
      this.container.style.border='1px solid #b5b5b5';
	  this.container.style.position='relative';		      
      this.container.style.overflow='hidden';		      
      this.container.update();
	  this.container.insert({ top: g });
	  this.subcontainer=$('protogrid_'+this.element+'_subcontainer');
	  if(this.width==null)this.subcontainer.style.width=this.container.getWidth();
	   
	  //footer
	  this.footer=$('protogrid_'+this.element+'_footer');
	  if(this.width!=null)this.footer.style.width=this.width+'px';
	  //this.footer.style.display='block';

	  
	  //set waiter properties
	  this.waiter = $('protogrid_'+this.element+'_wait');
	  
	  this.waiter.style.display='none';
	  this.waiter.style.width=this.subcontainer.getWidth();
	  this.waiter.style.height=this.subcontainer.getHeight();
	  this.waiter.setOpacity(0.4);
	  this.waiter.zIndex=10;
	  
	  this.spiner=$('protogrid_'+this.element+'_img');
	  this.spiner.style.display='none';
	  
	  
	  //set buttons
      this.btnstart=$('protogrid_'+this.element+'_start');
	  this.btnprev=$('protogrid_'+this.element+'_prev');
	  this.btnnext=$('protogrid_'+this.element+'_next');
	  this.btnend=$('protogrid_'+this.element+'_end');
	  this.btnrefresh=$('protogrid_'+this.element+'_refresh');
	  this.txtoffset=$('protogrid_'+this.element+'_offset');
	  this.btnexcel=$('protogrid_'+this.element+'_excel');
	  this.btnprint=$('protogrid_'+this.element+'_print');
	  this.table = $('protogrid_' + this.element + '');
	  this.addObserver();
	  this.subcontainer.relativize();
	  this.footer.relativize();
	  
	  
  },
  
  addObserver : function(){

	    this.lastcol=0;
		
		//$$('#'+this.table.id+' th').invoke('observe','click',this.thClick.bind(this));
		this.headers.each(function(s,index){ 
		    Event.observe('protogrid_'+this.element+'-'+index+'', 'click', this.thClick.bind(this));
		}.bind(this));
        //$$('#'+this.table.id+' tr').invoke('observe','click',this.trClick.bind(this));
		Event.observe(''+this.btnstart.id, 'click', this.btnstartClick.bind(this));
		Event.observe(''+this.btnprev.id, 'click', this.btnprevClick.bind(this));
		Event.observe(''+this.btnnext.id, 'click', this.btnnextClick.bind(this));
		Event.observe(''+this.btnend.id, 'click', this.btnendClick.bind(this));
		Event.observe(''+this.btnrefresh.id, 'click', this.btnrefreshClick.bind(this));
		Event.observe(''+this.btnprint.id, 'click', this.btnprintClick.bind(this));
		Event.observe(''+this.btnexcel.id, 'click', this.btnexcelClick.bind(this));
		Event.observe(''+this.txtoffset.id, 'blur', this.txtoffsetChange.bind(this));
  },
  //trClick : function(e){}, 
  txtoffsetChange : function(e){
	  
	  var curval=parseInt(this.txtoffset.value);
	  if(Object.isNumber(curval) && curval>=1 && curval<=this.pages){ 
	  	this.offset=parseInt(curval)-1;
	  	return;
  	  }	
  	  else{
	  	  this.txtoffset.value=this.offset+1;
	  	  return;
	  }
  	  
  }, 
  btnstartClick : function(e){
	  if(this.offset==0)return;
	  this.updateData(this.data,this.table,0,this.splitter);
	  this.waiter.style.height=this.container.getHeight();
  	  this.offset=0;
	  this.txtoffset.value=(this.offset+1);
			
  }, 
  btnprevClick : function(e){
	if(this.offset==0)return;
	this.updateData(this.data,this.table,(this.offset-1),this.splitter);
	this.waiter.style.height=this.container.getHeight();
	this.offset=this.offset-1;
	this.txtoffset.value=(this.offset+1);
			
  }, 
  btnnextClick : function(e){
    if(this.offset==(this.pages-1))return;
  	this.updateData(this.data,this.table,(this.offset+1),this.splitter);
  	this.waiter.style.height=this.container.getHeight();
  	  this.offset=this.offset+1;
	  this.txtoffset.value=(this.offset+1);
			
  }, 
  btnendClick : function(e){
	if(this.offset==(this.pages-1))return;
  	this.updateData(this.data,this.table,(this.pages-1),this.splitter);
  	this.waiter.style.height=this.container.getHeight();
	this.offset=this.pages;
	this.txtoffset.value=(this.offset);
			
  }, 
  btnrefreshClick : function(e){
	this.updateData(this.data,this.table,this.offset,this.splitter);
	this.waiter.style.height=this.container.getHeight();
			
  }, 
  updateData : function(udata,utable,uoffset,usplitter){

		this.subcontainer.style.overflow='hidden';
	  	this.waiter.style.height=this.container.getHeight();
	  	this.waiter.style.left='0px';
		this.waiter.style.display='block';
		this.spiner.style.display='block';
	  
	    $$('#'+utable.id+' tr').each(function(s,index){if(index>0)s.remove()});
	    var g='';
        g+='</tr>';
		udata.each(function(s,index){
  		 if(index>=(usplitter*(uoffset)) && index<(usplitter*(uoffset+1))){
			g+='<tr '+(index%2==0?'class=\'rowodd\'':'class=\'roweven\'')+' id="protogrid_'+this.element+'_tr_'+(index+1)+'"';
			g+='onclick="';
			g+='if($(\'protogrid_'+this.element+'_lastrow\').value!=\'\'){var r=$(\'protogrid_'+this.element+'_lastrow\').value;var lastclass=r.substr(0,7);var lastrow=parseInt(r.replace(lastclass,\'\')); $(\'protogrid_'+this.element+'_tr_\'+lastrow).style.background=\'\'+lastclass;}';
  	        g+='$(\'protogrid_' + this.element + '_lastrow\').value=\'#'+(index%2==0?'ffffff':'ededed')+(index+1)+'\';this.style.background=\'#bdd3ff\';" >';
			g+='<td align="center" width="12">&nbsp;'+ (index+1) +'.&nbsp;</td>';
       		s.each(function(r,index2){g+='<td width="'+headers[index2].cellwidth+'"  align="'+headers[index2].cellalign+'">'+ s[index2][1] +'</td>';});
       		g+='</tr>';
   	  	  }	
      	}.bind(this));
      	
        if(this.showtotals && this.data.length>0){  
            g+='<tr><td class="total" style="width:12px;">SUM:</th>';
            this.headers.each(function(s,index){
    	        g+='<td width="'+s.cellwidth+'"  class="total" align="'+s.cellalign+'">'+(s.withtotal!=null?s.withtotal:'&nbsp;')+'</td>';  
            }.bind(this));
            g+='</tr>';
        }
        if(!!(window.attachEvent && !window.opera) && this.data.length>0){
        g+='<tr><td style="width:8px;">&nbsp;</th>';
          this.headers.each(function(s,index){
	          g+='<td  style="width:8px;" width="'+s.cellwidth+'" >&nbsp;</td>';  
          }.bind(this));
          g+='</tr>';
        }
      	
      	//utable.update('');
		utable.insert({ bottom: g });	  
		$('protogrid_'+this.element+'_lastrow').value='';
		new PeriodicalExecuter(function(pe){this.waiter.style.display='none';this.spiner.style.display='none';this.subcontainer.style.overflow='auto';pe.stop();}.bind(this),2);
				
  },
  thClick : function(e){
	    this.curcol=Event.element(e).id.replace(this.table.id+'-','');
	    if(Event.element(e).id.search(this.table.id+'-')<0)return;
	    if(this.curcol=='#')return;
	    try{
			if(this.lastcol!=this.curcol){
				this.data=this.data.sortBy(function(s) { return s[this.curcol][0]; }.bind(this));
				$(this.table.id+'-'+this.lastcol).className='nosort'; 
				$(this.table.id+'-'+this.curcol).className='sort'; 
			}
			else {
				this.data=this.data.reverse(false);
			}
			this.updateData(this.data,this.table,0,this.splitter);
			this.waiter.style.height=this.container.getHeight();
        	this.offset=0;
	        this.txtoffset.value=1;
			
			this.lastcol=this.curcol;
		}catch(Ex){
		    this.waiter.style.display='none';
			this.spiner.style.display='none';
			$(this.table.id+'-'+this.lastcol).className='nosort'; 
			this.lastcol=0;
		}
		
  },
  btnexcelClick : function(e){
	this.makeExcelWindow();	
  }, 
  btnprintClick : function(e){
	this.makePrintWindow();	
  }, 
  makeExcelWindow: function()  {
            if(this.data.length==0){alert('No data found!');return;}
    		var g = "";
	  	    g+='<table width="700" border="0" cellpadding="0" cellspacing="0" style="border-left:1px solid #cccccc;border-top:1px solid #cccccc;">';
      		g+='<thead><tr>';
      		g+='<th style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;width:12px;background:#dad8d8;padding: 0.2em;font:11px/13px Tahoma, sans-serif;"><img src="res/ac3/img/spacer.gif" width="12" height="28"></th>';
      		this.headers.each(function(s,index){
	      		g+='<th width="'+s.cellwidth+'"  style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;background:#dad8d8;padding: 0.2em;font:11px/13px Tahoma, sans-serif; height:20px;"><img src="res/ac3/img/spacer.gif" width="'+s.cellwidth+'" height="1" ><br/>'+s.caption+'</th>';  
      		}.bind(this));
      		g+='</tr></thead>';
      		this.data.each(function(s,index){
					g+='<tr style="background:'+(index%2==0?'#ffffff':'#ededed')+'">';
       				g+='<td align="center" width="12" style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;font:11px/13px Tahoma, sans-serif;"">&nbsp;'+ (index+1) +'.&nbsp;</td>';
       				s.each(function(r,index2){g+='<td width="'+headers[index2].cellwidth+'"  align="'+headers[index2].cellalign+'" style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;padding: 0.2em;font:11px/13px Tahoma, sans-serif; height:20px;">'+ s[index2][1] +'</td>';});
       				g+='</tr>';
   	    		
      		}.bind(this));
      		g+='</table>';

            var frm='<form method="post" id="protogrid_excelform" action="'+this.options.excelexporturl+'">';
			frm+='<input type="hidden" id="protogrid_excelformvalue" name="protogrid_excelformvalue" value="" /></form>';

      		new Insertion.Bottom($(document.body),frm);
      		$('protogrid_excelformvalue').value=g;
      		$('protogrid_excelform').submit();
      		$('protogrid_excelform').remove();
      		    		
  },
  makePrintWindow: function()  {
            if(this.data.length==0){alert('No data found!');return;}
    		var windowUrl = 'about:blank';
            var uniqueName = new Date();
            var windowName = 'Print_preview_' + uniqueName.getTime();
            var printWindow = window.open(windowUrl, windowName, 'width=50,height=50');
            var g = '';
    		g+='<meta http-equiv="Content-Type" content="text\/html;charset=windows-1253" \/>';
    		if(this.options.printexporttext!='')g+=this.options.printexporttext;
    		g+='<div style=\"width:700px;\">';
	  	    g+='<table width="700" border="0" cellpadding="0" cellspacing="0" style="border-left:1px solid #cccccc;border-top:1px solid #cccccc;">';
      		g+='<tr>';
      		g+='<td style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;width:12px;background:#dad8d8;padding: 0.2em;font:11px/13px Tahoma, sans-serif;"><img src="res/ac3/img/spacer.gif" width="12" height="28"></td>';
      		this.headers.each(function(s,index){
	      		g+='<td width="'+s.cellwidth+'"  style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;background:#dad8d8;padding: 0.2em;font:11px/13px Tahoma, sans-serif; height:20px;" nowrap="nowrap"><img src="res/ac3/img/spacer.gif" width="'+s.cellwidth+'" height="1" ><br/>'+s.caption+'</td>';  
      		}.bind(this));
      		g+='</tr>';
      		this.data.each(function(s,index){
					g+='<tr style="background:'+(index%2==0?'#ffffff':'#ededed')+'">';
       				g+='<td align="center" width="12" style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;font:11px/13px Tahoma, sans-serif;"">&nbsp;'+ (index+1) +'.&nbsp;</td>';
       				s.each(function(r,index2){g+='<td width="'+headers[index2].cellwidth+'"  align="'+headers[index2].cellalign+'" style="border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;padding: 0.2em;font:11px/13px Tahoma, sans-serif; height:20px;">'+ s[index2][1] +'</td>';});
       				g+='</tr>';
      		}.bind(this));
      		g+='</table></div>';
            
            new PeriodicalExecuter(function(pe){
                printWindow.document.write(g);
                printWindow.document.close();
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            pe.stop();}.bind(this),0.05);
  }
  

  


 });



//usage: <div id="protostar"></div>
//       <script>var star = new protoStarRate("protostar",name,max,step,rate);</script>
//       <script>var star = new protoStarRate("protostar",protostar,100,5,40);</script>
var protoStarRate = Class.create({
  initialize: function(element,hiddenname,max,step,rate,editable) {
	this.hiddenname = hiddenname;
	this.element = element;	
	this.container=$(element);
    this.max = max;
	this.step = step;
	this.rate = rate;
	if(rate>100)this.rate=100;
	if(rate<0)this.rate=0;
	this.currate = this.rate;
	this.curwidth = ((this.rate)/100*this.max*2);
    this.container.style.width=(this.max*2)+'px';
    this.container.style.height='22px';
    this.container.style.border='none';
    this.container.style.background='none';
    this.editable=editable;
    this.render();
    
    this.ulwidth=max;
  },
  render: function() {
	  
	  var g='<ul id="protostar_' + this.element + '" class="star"  >';
  	  g+='<li id="protostar_rate_' + this.element + '" class="curr"  style="width:'+((this.rate)/100*this.max*2)+'px;"></li>';
 	  g+='</ul>';
 	  g+='<input type="hidden" id="' + this.hiddenname + '" name="' + this.hiddenname + '" value="'+this.rate+'"  >';
 	  this.container.className="protoratestar";
	  this.container.update();
	  this.container.insert({ top: g });
	  $('protostar_' + this.element + '').style.width=((this.max * 2)+1)+'px';
	  
	  if(this.editable==true){
	  this.addObserver();}
	  
  },
  
  addObserver : function(){
		Event.observe('protostar_' + this.element + '', 'mouseout', this.setDefaultRate.bind(this))
		Event.observe('protostar_' + this.element + '', 'mouseover', this.getRate.bind(this))
		Event.observe('protostar_' + this.element + '', 'mousemove', this.getRate.bind(this))
		Event.observe('protostar_' + this.element + '', 'click', this.setRate.bind(this))
  },
  getRate : function(e){
	var rate=Event.pointerX(e)- $('protostar_rate_' + this.element + '').cumulativeOffset()[0];
	if(rate==0){
		$('protostar_rate_' + this.element + '').style.width='0px';
		$('' + this.hiddenname + '').value='0';
		this.currate=0;
	}
	else if(rate>=(this.max*2)){return;}
	else {
		var rest=(this.max*2)-(Math.floor((this.max*2)/rate)*rate)
		var percent=(rate/(this.max*2)*100);
		for(var i=1;i<(this.step+1);i++){
			if((percent+i)%this.step==0){
				this.curwidth=((percent+i)/100*this.max*2);
				this.currate=(percent+i);
				$('protostar_rate_' + this.element + '').style.width=((percent+i)/100*this.max*2)+'px';
				$('' + this.hiddenname + '').value=(percent+i);
				break;
			}	
		}
	}
  },
  setRate : function(){
	  this.rate=this.currate;
	  $('protostar_rate_' + this.element + '').style.width=((this.rate)/100*this.max*2)+'px';
	  $('' + this.hiddenname + '').value=(this.rate);
  },
  setDefaultRate : function(){
		$('protostar_rate_' + this.element + '').style.width=((this.rate)/100*this.max*2)+'px';
		$('' + this.hiddenname + '').value=(this.rate);
  }
  

 });
 
 
 
 
//usage: <div id="protostar"></div>
//var box;
//var images=[];
//document.observe("dom:loaded", function() { 
//images[0]={src:'skn/scirocco/scirocco1_B.jpg',description:'Scirocco',name:'Scirocco 1.6 140ps'};
//images[1]={src:'skn/obt_v2_05.jpg',description:'obt asdasd asd asd sad sad sa dsadg ajhsd jhgj sahd<br/>sadsad sada ssad',name:'Obt logo'};
//images[2]={src:'skn/scirocco/scirocco3.jpg',description:'image3',name:'Im3'};
//images[3]={src:'skn/map_greece.gif',description:'Map of Greece',name:'Map'};
//images[4]={src:'skn/scirocco/scirocco2_B.jpg',description:'image2',name:'Im2'};
//images[5]={src:'skn/scirocco/scirocco3_B.jpg',description:'image4',name:'Im4'};
//images[6]={src:'skn/scirocco/scirocco4_B.jpg',description:'image5',name:'Im5'};
//images[7]={src:'skn/scirocco/scirocco5.jpg',description:'image6',name:'Im6'};
//images[8]={src:'skn/scirocco/scirocco5_B.jpg',description:'image7',name:'Im7'};
//box = new protoLightBox("test",images,0,{opacity:0.9});
//box.show();

/* var protoLightBox = Class.create({
  initialize: function(name,images,index,options) {
	this.name = name;
	this.images=images;
	this.index=index;
	if(this.index==null)this.index=0;
		this.options = Object.extend({
		opacity : 0.6
	}, options || {});
	
	
	 
  },
  show : function(){
	this.show(0);
  },
  show: function(imgindex) {
	if(this.images.length==0)return;
	if(imgindex==null)this.index=0;
	else {
	    if(imgindex>=this.images.length)this.index=0;
	    else this.index=imgindex;
    }

	var newImg=new Element('img');
	newImg.src=this.images[this.index].src;
	

	var imgsrc=newImg.src;
	var newHeight=0;
	var newWidth=0;
	var newLeft=0;
	var newTop=0;
	var Dwidth=(window.innerWidth?window.innerWidth:document.body.clientWidth);
    var Dheight=(window.innerHeight?window.innerHeight:document.body.clientHeight);
    
    
	
	var footer='<div id="protoLightBoxFooter'+this.name+'" style="overlow:hidden;"><table cellpadding="0" id="protoLightBoxFooterTable'+this.name+'" cellspacing="0"  border="0" ><tr>';  
	footer+='<td width="100%" align="left" valign="top" style="padding:5px;">';
	footer+=(this.images[this.index].name!=null?('<b style="font:bold 12px/14px Tahoma;" id="protoLightBoxName'+this.name+'">'+this.images[this.index].name+'</b><br/>'):'');
	footer+=(this.images[this.index].description!=null?('<b style="font:normal 12px/14px Tahoma;" id="protoLightBoxDescription'+this.name+'">'+this.images[this.index].description+'</b>'):'');
	footer+='</td>';
	footer+='<td valign="bottom" ><img src="res/ac3/img/spacer.gif" width="2" height="1"/></td>';
	footer+='<td valign="bottom" nowrap="nowrap" style="font:normal 12px/14px Tahoma;padding:3px;"><img  src="prototools/proto/protolightbox_previus.gif" id="protoLightBoxPrevius'+this.name+'" style="cursor:pointer" /></td>';
	footer+='<td valign="bottom" nowrap="nowrap" style="font:normal 12px/14px Tahoma;padding:3px;" id="protoLightBoxLegent'+this.name+'"><b id="protoLightBoxIndex'+this.name+'">'+(this.index+1)+'</b> / <b>'+this.images.length+'</b></td>';
	footer+='<td valign="bottom" nowrap="nowrap" style="font:normal 12px/14px Tahoma;padding:3px;"><img src="prototools/proto/protolightbox_next.gif"  id="protoLightBoxNext'+this.name+'" style="cursor:pointer;" /></td>';
	footer+='</tr></table></div>';
		
	new Insertion.Bottom($(document.body),'<div id="protoLightBoxLayer'+this.name+'" style="position:absolute;top:0px;left:0px;background:#1A1A1A;" ><div>');
    $('protoLightBoxLayer'+this.name+'').style.width=Dwidth+'px';
	$('protoLightBoxLayer'+this.name+'').style.height=Dheight+'px';
	
	new Insertion.Bottom($(document.body),'<div id="protoLightBox'+this.name+'" style="display:none;position:absolute;top:0px;left:0px;background:#ffffff;">'
										 +'<table bgcolor="#ffffff" cellspacing="0" border="0" ><tr>'
										 +'<td valign="middle" style="position:relative;"><img id="protoLightBoxClose'+this.name+'" src="res/crm/prt/protolightbox_close.gif" style="cursor:pointer;position:absolute;right:0;border-top:1px solid #ffffff;border-right:1px solid #ffffff;">'
										 +'<img id="protoLightBoxWait'+this.name+'" src="res/crm/prt/protolightbox_wait.gif" style="cursor:pointer;position:absolute;display:none;">'
										 +'<div id="protoLightBoxContainer'+this.name+'"><img src="'+imgsrc+'" ></div>'+footer+''
										 +'</td></tr>'
										 +'</table></div>');
	    										 
	$('protoLightBoxLayer'+this.name+'').setOpacity(this.options.opacity);
    $('protoLightBoxLayer'+this.name+'').style.zIndex=200;
    $('protoLightBox'+this.name+'').style.zIndex=201;
    
	if(newImg.width==0 || newImg.height==0){
    	newImg.onload = function(){
			newWidth=newImg.width;
			newHeight=newImg.height; 
			$('protoLightBoxClose'+this.name+'').style.left=(newWidth-20)+'px';
    
			newLeft=parseInt(((Dwidth-newWidth)/2)+document.body.scrollLeft);
 			newTop=parseInt(((Dheight-newHeight)/2)+document.body.scrollTop);
 			$('protoLightBoxWait'+this.name+'').style.left=parseInt((newWidth-32)/2)+'px';
			$('protoLightBoxWait'+this.name+'').style.top=parseInt((newHeight-32)/2)+'px';
 			$('protoLightBoxNext'+this.name+'').style.display=((this.index==(this.images.length-1)||(this.images.length==1))?'none':'block');
			$('protoLightBoxPrevius'+this.name+'').style.display=((this.index==0)||(this.images.length==1)?'none':'block');
			if(this.images.length==1)$('protoLightBoxLegent'+this.name+'').style.display='none';
			$('protoLightBox'+this.name+'').morph('height:'+newHeight+'px;width:'+newWidth+'px;top:'+newTop+'px;left:'+newLeft+'px;');
			$('protoLightBox'+this.name+'').style.top=newTop+'px';
			$('protoLightBox'+this.name+'').style.left=newLeft+'px';
			
			
			new PeriodicalExecuter(function(pe) {Effect.Appear('protoLightBox'+this.name+'', { duration: 1 });pe.stop();}.bind(this), 0.5);	
		}.bind(this);
	}
	else{
			newWidth=newImg.width;
			newHeight=newImg.height; 
			$('protoLightBoxClose'+this.name+'').style.left=(newWidth-20)+'px';
            newLeft=parseInt(((Dwidth-newWidth)/2)+document.body.scrollLeft);
 			newTop=parseInt(((Dheight-newHeight)/2)+document.body.scrollTop);
 			$('protoLightBoxWait'+this.name+'').style.left=parseInt((newWidth-32)/2)+'px';
			$('protoLightBoxWait'+this.name+'').style.top=parseInt((newHeight-32)/2)+'px';
			$('protoLightBoxNext'+this.name+'').style.display=((this.index==(this.images.length-1)||(this.images.length==1))?'none':'block');
			$('protoLightBoxPrevius'+this.name+'').style.display=((this.index==0)||(this.images.length==1)?'none':'block');
			if(this.images.length==1)$('protoLightBoxLegent'+this.name+'').style.display='none';
			$('protoLightBox'+this.name+'').morph('height:'+newHeight+'px;width:'+newWidth+'px;top:'+newTop+'px;left:'+newLeft+'px;');
			$('protoLightBox'+this.name+'').style.top=newTop+'px';
			$('protoLightBox'+this.name+'').style.left=newLeft+'px';
			new PeriodicalExecuter(function(pe) {Effect.Appear('protoLightBox'+this.name+'', { duration: 1 });pe.stop();}.bind(this), 0.5);	
	}
    
	this.addObserver();

  },
  addObserver : function(){
		Event.observe('protoLightBoxLayer' + this.name + '', 'click', this.hide.bind(this))
		Event.observe('protoLightBoxClose' + this.name + '', 'click', this.hide.bind(this))
		Event.observe('protoLightBoxNext' + this.name + '', 'click', this.gonext.bind(this))
		Event.observe('protoLightBoxPrevius' + this.name + '', 'click', this.goprevius.bind(this))
  },
  hide : function(){
	Effect.Fade('protoLightBox'+this.name+'', { duration: 1.0 });
	new PeriodicalExecuter(function(pe) {
		$('protoLightBox'+this.name+'').remove();
		$('protoLightBoxLayer'+this.name+'').remove();
	pe.stop();}.bind(this), 1);
  },
  gonext : function(){
	  if(this.index==this.images.length-1)return;
	  var imgindex=this.index+1;
	  this.goto(imgindex);
  },
  goprevius : function(){
	if(this.index==0)return;
	var imgindex=this.index-1;
	this.goto(imgindex);
  },
  goto : function(imgindex){
	if(this.images[imgindex]==null)return;
	var newImg=new Element('img');
	newImg.src=this.images[imgindex].src;  
	
	var newHeight=0;
	var newWidth=0;
	var newLeft=0;
	var newTop=0;

	if(newImg.width==0 || newImg.height==0){
		newImg.onload = function(){
			
			
			Effect.BlindUp('protoLightBoxFooter'+this.name+'', { duration:0.3 });
			Effect.Fade('protoLightBoxFooter'+this.name+'', { duration:0.2 });
			$('protoLightBoxClose'+this.name+'').style.display='none';
			newWidth=newImg.width;
			newHeight=newImg.height; 
			$('protoLightBoxClose'+this.name+'').style.left=(newWidth-20)+'px';
			new PeriodicalExecuter(function(pe) { $('protoLightBoxContainer'+this.name+'').style.display='none';$('protoLightBoxWait'+this.name+'').style.display='block';pe.stop();}.bind(this), 0.5);
			newLeft=parseInt(((document.body.clientWidth-newWidth)/2));
 			newTop=parseInt(((document.body.clientHeight-newHeight)/2)+document.body.scrollTop);
			//--------------------------- Dont touch---------------------------------------------------------
 			new PeriodicalExecuter(function(pe) { $('protoLightBox'+this.name+'').morph('height:'+newHeight+'px;width:'+newWidth+'px;top:'+newTop+'px;left:'+newLeft+'px;');pe.stop();}.bind(this), 1.2);
			new PeriodicalExecuter(function(pe) { $('protoLightBoxWait'+this.name+'').morph('display:block;top:'+parseInt((newHeight-32)/2)+'px;left:'+parseInt((newWidth-32)/2)+'px;');pe.stop();}.bind(this), 1.2);
			new PeriodicalExecuter(function(pe) { 
				$('protoLightBoxContainer'+this.name+'').update('<img src="'+this.images[imgindex].src+'">');  
				$('protoLightBoxWait'+this.name+'').style.display='none';
				Effect.Appear('protoLightBoxContainer'+this.name+'', { duration: 0.3 });
				new PeriodicalExecuter(function(pe) { 
					$('protoLightBoxNext'+this.name+'').style.display=((imgindex==(this.images.length-1)||(this.images.length==1))?'none':'block');
					$('protoLightBoxPrevius'+this.name+'').style.display=((imgindex==0)||(this.images.length==1)?'none':'block');
					if(this.images.length==1)$('protoLightBoxLegent'+this.name+'').style.display='none';
					$('protoLightBoxIndex'+this.name+'').update(''+(imgindex+1));
					$('protoLightBoxName'+this.name+'').update(''+this.images[imgindex].name);
					$('protoLightBoxDescription'+this.name+'').update(''+this.images[imgindex].description);
					Effect.toggle('protoLightBoxFooter'+this.name+'', 'slide', { delay: 0.1,duration: 0.3 });
					new PeriodicalExecuter(function(pe) { $('protoLightBoxClose'+this.name+'').style.display='block';pe.stop();}.bind(this), 0.4);	
				pe.stop();}.bind(this), 0.6);	
			pe.stop();}.bind(this), 2.2);	
			
			
			this.index =imgindex;
			newImg.remove();
		}.bind(this);
	}
	else{
			Effect.BlindUp('protoLightBoxFooter'+this.name+'', { duration:0.3 });
			Effect.Fade('protoLightBoxFooter'+this.name+'', { duration:0.2 });
			$('protoLightBoxClose'+this.name+'').style.display='none';
			newWidth=newImg.width;
			newHeight=newImg.height; 
			$('protoLightBoxClose'+this.name+'').style.left=(newWidth-20)+'px';
			new PeriodicalExecuter(function(pe) { $('protoLightBoxContainer'+this.name+'').style.display='none';$('protoLightBoxWait'+this.name+'').style.display='block';pe.stop();}.bind(this), 0.5);	
			newLeft=parseInt(((document.body.clientWidth-newWidth)/2));
 			newTop=parseInt(((document.body.clientHeight-newHeight)/2)+document.body.scrollTop);
			//--------------------------- Dont touch---------------------------------------------------------
 			new PeriodicalExecuter(function(pe) { $('protoLightBox'+this.name+'').morph('height:'+newHeight+'px;width:'+newWidth+'px;top:'+newTop+'px;left:'+newLeft+'px;');pe.stop();}.bind(this), 1.2);
			new PeriodicalExecuter(function(pe) { $('protoLightBoxWait'+this.name+'').morph('top:'+parseInt((newHeight-32)/2)+'px;left:'+parseInt((newWidth-32)/2)+'px;');pe.stop();}.bind(this), 1.2);
 			new PeriodicalExecuter(function(pe) { 
				$('protoLightBoxContainer'+this.name+'').update('<img src="'+this.images[imgindex].src+'">');  
				$('protoLightBoxWait'+this.name+'').style.display='none';
				Effect.Appear('protoLightBoxContainer'+this.name+'', { duration: 0.3 });
				new PeriodicalExecuter(function(pe) { 
					$('protoLightBoxNext'+this.name+'').style.display=((imgindex==(this.images.length-1)||(this.images.length==1))?'none':'block');
					$('protoLightBoxPrevius'+this.name+'').style.display=((imgindex==0)||(this.images.length==1)?'none':'block');
					if(this.images.length==1)$('protoLightBoxLegent'+this.name+'').style.display='none';
					$('protoLightBoxIndex'+this.name+'').update(''+(imgindex+1));
					$('protoLightBoxName'+this.name+'').update(''+this.images[imgindex].name);
					$('protoLightBoxDescription'+this.name+'').update(''+this.images[imgindex].description);
					Effect.toggle('protoLightBoxFooter'+this.name+'', 'slide', { delay: 0.1,duration: 0.3 });
					new PeriodicalExecuter(function(pe) { $('protoLightBoxClose'+this.name+'').style.display='block';pe.stop();}.bind(this), 0.4);	
				pe.stop();}.bind(this), 0.6);	
			pe.stop();}.bind(this), 2.2);	
			this.index =imgindex;
			newImg.remove();
	}
  }
 });

*/

//usage: <div id="protostar"></div>
//<img src="proto/Crystal_Clear_action_bookmark.png" id="refl">
//<script>document.observe("dom:loaded", function() { new protoReflector("refl",{opacity:1,amount:0.4});});</script>

var protoReflector = Class.create({
  initialize: function(element,options) {
	this.element = $(element);	
	this.options = Object.extend({
		opacity : 1/3,
		amount : 1/3,
		background:'#cccccc'
	}, options || {});
	this.reflect();
  },
  reflect: function() {
	  
    var div = new Element('div',{'id':'parentof'+this.element.id});
    this.element.wrap(div);
	var p = this.element.parentNode, n = this.element.nextSibling;
    var d = 1.0/(this.element.height*(this.options.amount));
    var l=0;
    (this.element.height*this.options.amount).times( function(line) {
      l++;
      new Insertion.Bottom(p,'<div style="height:1px;overflow:hidden;background:'+this.options.background+';width:'+this.element.getWidth()+'px;" id="refl'+l+'_'+this.element.id+'" ><img src="'+this.element.src+'" style="width:'+this.element.getWidth()+'px;margin-top:-'+(this.element.height-line-1)+'px;"></div>');
      $('refl'+l+'_'+this.element.id+'').setOpacity((1-d*line)*(this.options.opacity));
    }.bind(this));
  }
 });