



/*

Interaktiver Paketpreisrechner
Autor: Carsten Meyer
HMMH AG 2010

JS-Framework: Mootools
*/

var Puzzleteil = new Class({

		initialize: function(){
		
		    this.position = 'left';

		    this.leftchecked = false;
			this.rightchecked = false;
			this.isSelected = false;
			this.movable = true;
		    this.preis = 1.95;
			this.paketpreis = 0.00;
			this.rechnemit = 0.00;
			this.productname = '';
			this.productid = '';
			this.description = '';
			this.preisanzeige = null;
		    this.dropzone = [200,140,600,370];
			this.eff1 = null;
			this.eff2 = null;
			this.footnote = '';
			
			
			this.targetid = 'wunschpakete';
			
			isInside = function(obj){
			
					x = obj.getStyle('left').toInt();
					y = obj.getStyle('top').toInt();
					
					if(x > this.dropzone[0] &&  x < this.dropzone[2] && y > this.dropzone[1] && y < this.dropzone[3]) return true;
					else return false;
					
			
			}.bind(this)
			
            toGer = function(w){wert = w.toString();return (wert.replace(/\./,','));} 
			
		},
		
		setDescription: function(d){this.description = d;},
		setProductID: function(pid){this.productid = pid;},
		getProductID: function(pid){return this.productid;},
		setProductName: function(n){this.productname = n;},
		getProductName: function(n){return this.productname;},
        setPosition: function(p){this.position = p;},
		setPrice: function(p){this.preis = p;this.rechnemit = p;},
		setPackagePrice: function(p){this.paketpreis = p;},
		setFootnote: function(p){this.footnote = p;},
		getPrice: function(p){return this.preis;},
		getPackagePrice: function(p){return this.rechnemit;},
		getFootnote: function(p){return this.footnote},
		blockAction: function(p){if(p == this.position) this.movable = false;},
		releaseAction: function(){this.movable = true;},
		getSelected: function(){return this.isSelected;},
		
		updatePriceDisplay: function(price,footnote){
		
		        if(price == this.preis)
		        this.preisanzeige.removeClass('red'); 
				else
				this.preisanzeige.addClass('red'); 
				this.preisanzeige.set('html', toGer(price) + '&nbsp;<span class="euro">EUR</span><span class="mtl">&nbsp;mtl.</span><sup style="font-size: 9px ! important;">'+footnote+'</sup>');
		
		},
		
		goback: function(){
		
		
		            this.movable = true;
                    this.rechnemit = this.preis;
					this.preisanzeige.set('html',toGer(this.rechnemit));
					this.preisanzeige.removeClass('red');
					if(this.leftchecked  || this.rightchecked)
					this.eff1.start({
					
						'left': this.range[0]+'px',
						'top':  this.range[1]+'px'
						
					});
		            this.leftchecked = false;
					this.rightchecked = false;
		
		},
		
		create: function(bg,r){
		
		             this.range = r;
		             var div = new Element('div');
		                 div.set('class','puzzle'); 
						 div.setStyle('z-index',2)
						 div.ischecked = false;
					
					this.textelement =  new Element('div',{'class':'text','html':this.description});
					this.textelement.inject(div);	 
					this.preisanzeige = new Element('div',{'class':'preisanzeige','html':this.rechnemit + '&nbsp;<span class="euro">EUR</span><span class="mtl">&nbsp;mtl.</span><sup style="font-size: 9px ! important;">'+this.footnote[0]+'</sup>'});
					this.preisanzeige.inject(div); 
						 
					 this.eff1 = new Fx.Morph(div, {duration: 500, transition: Fx.Transitions.Sine.easeOut});
			         this.eff2 = new Fx.Morph(div, {duration: 200, transition: Fx.Transitions.Sine.easeOut});
						

					new Drag(div,{
			
			        onStart: function(){div.setStyle('z-index',1000);},
					onComplete: function(){

				    div.setStyle('z-index',2);
				    if(!isInside(div) || !this.movable)
					{
						if(this.position == 'right')this.rightchecked = false;else this.leftchecked = false;
						this.eff1.start({'left': this.range[0]+'px','top':  this.range[1]+'px'});
						this.rechnemit = this.preis;
						this.preisanzeige.set('html',toGer(this.rechnemit) + '&nbsp;<span class="euro">EUR</span><span class="mtl">&nbsp;mtl.</span><sup style="font-size: 9px ! important;">'+this.footnote[0]+'</sup>');
						this.preisanzeige.removeClass('red');
						this.isSelected = false; 
					}
					else	
					{
						if(this.position == 'right') this.rightchecked = true;else this.leftchecked = true;
						this.eff2.start({'left': this.range[2]+'px','top':  this.range[3]+'px'});
						this.rechnemit = this.paketpreis;
						this.preisanzeige.set('html',toGer(this.rechnemit) + '&nbsp;<span class="euro">EUR</span><span class="mtl">&nbsp;mtl.</span><sup style="font-size: 9px ! important;">'+this.footnote[0]+'</sup>');
						this.preisanzeige.addClass('red');
						this.isSelected = true; 
						
					}	

				
				}.bind(this)
			
			});
		
		
		        copy = div.clone();
		        div.setStyles({
				'background':'url('+bg[0]+') 0 0 no-repeat',
				'left' : this.range[0]+'px',
				'top'  : this.range[1]+'px'
				});
				
				copy.getElements('div').setStyle('opacity',0.2);
				
				copy.setStyles({
				'background':'url('+bg[1]+') 0 0 no-repeat',
				'left' : this.range[0]+'px',
				'top'  : this.range[1]+'px',
				'z-index': 0
				});
				
				copy.inject($(this.targetid));
				div.inject($(this.targetid));
		},
		
		getLeftChecked: function(){return this.leftchecked;},
		getRightChecked: function(){return this.rightchecked;}

});





var Puzzle = new Class({

       
		initialize: function(conf,preismatrix){
		
		        this.leftcounter = 0;
				this.rightcounter = 0;
				this.preismatrix = preismatrix;
				
				this.leftobj = null;
				this.rightobj = null;
				
				this.p = new Array();
				
				conf.each(function(obj,nr){
				
					var pt = new Puzzleteil();
					pt.setProductName(obj.ProductName);
					pt.setDescription(obj.Description);
					pt.setPrice(obj.Price);
					pt.setPackagePrice(obj.PackagePrice);
					pt.setPosition(obj.Side);
					pt.setFootnote(obj.footnote);
					pt.create(obj.bg,obj.position);
					this.p.push(pt);
				
				}.bind(this));
				

		
			repeater = function(){

				this.leftcounter = 0;
				this.rightcounter = 0;
				var paketpreis = 0;
				var summeEinzelpreise = 0;
				var counter = 0;

				this.p.each(function(obj,nr){
				    obj.releaseAction();
						obj.updatePriceDisplay(obj.getPrice().toFixed(2),obj.getFootnote()[0]);
						if(obj.getLeftChecked()) {
							this.leftcounter = 1;counter++;this.rightobj = obj;
						}
						if(obj.getRightChecked()) {
								this.rightcounter = 1;counter++;this.leftobj = obj;
						}
						if(counter == 2) {
							$('dslpaket').set('action',this.preismatrix[this.leftobj.getProductName()]['Url']+'?produkt='+this.getShortName(this.rightobj.getProductName()));
							produkt1 = this.leftobj.getPrice();
							produkt2 = this.preismatrix[this.leftobj.getProductName()][this.rightobj.getProductName()];
							this.rightobj.setPackagePrice(produkt2[0]);
							this.rightobj.updatePriceDisplay(produkt2[0].toFixed(2),produkt2[1]);
							$('paketpreis').set('html',toGer((produkt1 + produkt2[0]).toFixed(2)));
							$('ersparnis').set('html',toGer((((this.leftobj.getPrice() + this.rightobj.getPrice()) - (produkt1 + produkt2[0]))*24).toFixed(2)));
							$(document.body).getElement('sup').set('html',this.leftobj.getFootnote()[0]);
						}
						else {
							$('dslpaket').set('action',null);
							$('paketpreis').set('html','0,00');
							$('ersparnis').set('html','0,00');
							$(document.body).getElement('sup').set('html',1);
						}
				
				}.bind(this));
				
				
				
				if(this.leftcounter == 1){
				
				    this.p.each(function(obj,nr){ obj.blockAction('left');});
				}
				if(this.rightcounter == 1){
				
				    this.p.each(function(obj,nr){ obj.blockAction('right');});
				}
				

				
				
				
					setTimeout(repeater,100);
		}.bind(this)
		
		},
		
		getShortName: function(n){
		
			return n.toLowerCase().replace(/ /,'');
		
		},

		
		reset: function(){
		
		        
				this.p.each(function(obj,nr){
				
						obj.goback();
				
				});
			
		},
		
		getPackages: function(){return this.p;},
		start: function(){ this.timer = setTimeout(repeater,1000); }
	
});





var getPaket = function(f,url){

    var counter = 0;
	var meinpaket = new Array();
	var pakete = puzzle.getPackages();
	pakete.each(function(obj,nr){
	
			if(obj.getSelected()){
			
			meinpaket.push( obj.getProductName());
			counter ++;
			}
	
	
	});
	if(counter != 2)
    {alert('Bitte stellen Sie erst noch Ihr Wunschpaket zusammen!');return false;}
	else
	{
	   $(f).set('action',url);
	   $(f).getElement('input[name=dsl]').set('value',meinpaket[0]);
	   $(f).getElement('input[name=mobil]').set('value',meinpaket[1]);
	   return true;
	}

}







