/* Konstruktor*/
function Drop(div_drop_id){
	var self = this;
	//------- Objekt-Attribute:  ---------
	this.drop_id = div_drop_id;
	this.zoomInInterval;
	this.zoomOutInterval;
	this.div = document.getElementById(div_drop_id);
	this.div.style.position= "absolute";
	//get all 3 child-elements (images only)
	this.img_drop = getElementsByClassName_inDiv("img_drop",div_drop_id)[0];
	this.img_text = getElementsByClassName_inDiv("img_text",div_drop_id)[0];
	this.img_symbol = getElementsByClassName_inDiv("img_symbol",div_drop_id)[0];
	//transparentes 'anker-div' erzeugen, das ueber dem Tropfen-div liegt und die mouseovers abfaengt:
	this.transparent_div = document.createElement('a');	
	this.transparent_img = document.createElement('img'); //ie stellt ein leeres div nicht dar, deswegen wird transparent_div mit diesem img mit durchsichtigem png gefuellt
	this.orig_x_pos;
	this.orig_y_pos;
	this.numberOfZoomOutSteps;
	this.x_range =-1;
	this.y_range = -1;
	this.x_drop_float = 0.0;
	this.y_drop_float = 0.0;
	this.currentCenterWidth;		//in zoomIn
	this.currentCenterHeight;
	this.url;

	//------- Objekt-Methoden:  ---------	
	this.setXandY = setXandY;
	this.positionInnerContent = positionInnerContent;
	this.getId = getId;
	this.initTransparentDiv = initTransparentDiv;
	this.checkPosition = checkPosition;
	this.setOrigXandYPosition = setOrigXandYPosition;
	this.getFixedCenterCoordinates = getFixedCenterCoordinates;
	this.moveBack = moveBack;	
	
	//------- Initialisierungen:  ---------
	this.div.style.zIndex="30"; //damit es unter dem transparenten div liegt!
	if(!isMiniDrop(this)){
		this.positionInnerContent(); 		
		this.div.style.overflow = "hidden";//wegen ie		
		//div verkleinern
	    this.div.style.width =dropWidth_unzoomed+"px";
		this.div.style.height = dropHeight_unzoomed+"px";
		// img-text unsichtbar machen:
		this.img_text.style.display = "none";
		//das transparente Div initialisieren:
		this.div.appendChild(this.transparent_div);
		this.transparent_div.appendChild(this.transparent_img);
		this.initTransparentDiv();
		//onmouseover zoom zu transparent_div hinzufuegen:
		this.transparent_div.onmouseover = function(){zoomIn(self);}
		//onmouseout, raus-zoomen
		this.transparent_div.onmouseout = function(){zoomOut(self);}
	}
	else{  //style muss aber auch initial den Mini-Tropfen hinzugefuegt werden:
		var pic = new Image();
		pic.src= this.div.getElementsByTagName('img')[0].src;	//notwendig wegen ie 6 und 7	
		this.div.style.width = pic.width+"px";
		this.div.style.height = pic.height+"px";
	}
}	

/*initialisiert das transparente Div, welches eber dem Tropfen-Div liegt und die mouseover abfaengt,
 * eigene Function, da die function nochmal aufgerufen werden muss, nachdem die Tropfen auf dem document positioniert wurden
 */
function initTransparentDiv(){
		this.transparent_div.style.display="block";
		this.transparent_div.href=this.url;
		this.transparent_div.style.position= "absolute";
		this.transparent_div.style.zIndex="31"; //muss hoeher sein als der zIndex des Tropfens! (zIndex vom Tropfen default: 30)
		this.transparent_div.style.width = dropWidth_unzoomed+"px";
		this.transparent_div.style.height = dropHeight_unzoomed+"px";
		this.transparent_div.style.top = 0;
		this.transparent_div.style.left = 0; 
		this.transparent_div.style.cursor = "pointer";
		//document.getElementById('container').appendChild(this.transparent_div);
		//this.transparent_div.style.backgroundColor="#000";		
		this.transparent_img.src=imgPath+"global/transparent.gif"; //media/global/transparent.gif
		this.transparent_img.style.width = dropWidth_unzoomed+"px";
		this.transparent_img.style.height = dropHeight_unzoomed+"px";
		this.transparent_img.style.top = 0;
		this.transparent_img.style.left = 0;		
}

//set X and Y position of drop 
function setXandY(x,y){
	this.div.style.left = x+"px";
	this.div.style.top = y+"px";
}

function getId(){
	return this.div.getAttribute("id");
}

/*positioniert die Tropfen-Bestandteile innerhalb des Tropfendivs */
function positionInnerContent(){
	//tropfen-bild fuellt das gesamte div, deswegen muss nicht positioniert werden
	this.img_drop.style.position="absolute";
	this.img_drop.style.left="0px";
	this.img_drop.style.top="0px";
	this.img_drop.style.width = dropWidth_unzoomed+"px";
	this.img_drop.style.height = dropHeight_unzoomed+"px";

	this.img_text.style.position="absolute";
	this.img_text.style.left="30px";
	this.img_text.style.top="100px";
	
	this.img_symbol.style.position="absolute";
	this.img_symbol.style.left=drop_symbol_x_pos+5+"px";
	this.img_symbol.style.top= drop_symbol_y_pos+"px";
}

/*ueberprueft anhand der neuen Position und Groesse des 'other_drop' ob er sich bewegen muss*/
function checkPosition(other_drop){
	if(getOuterDistance(other_drop,this) < distance_min){
		var arrCenterOtherDrop = centerCoordinates(other_drop);
		var arrCenterThis = centerCoordinates(this);
		var diff_x = parseInt(arrCenterOtherDrop[0]-arrCenterThis[0]);
		var diff_y = parseInt(arrCenterOtherDrop[1]-arrCenterThis[1]);
		var sign_x=0;
		var sign_y=0;
		if(diff_x < 0) sign_x =1;
		if(diff_x> 0) sign_x=-1;
		if(diff_y < 0) sign_y =1;
		if(diff_y> 0) sign_y=-1;		
		
		//now: move!
		var new_x = parseInt(this.div.style.left)+ (sign_x*getPixelToMove(other_drop,this));
		var new_y = parseInt(this.div.style.top)+ (sign_y*getPixelToMove(other_drop,this));
		this.div.style.left = new_x +"px";
		this.div.style.top =  new_y+"px";
	/*	teste++;
		console.log(teste+": "+this.drop_id+" moving");*/
		
		//notify Other Drops:
		for(var i=0;i<this.collection.arrDrops.length;i++){
			if(this.collection.arrDrops[i] != this  &&  this.collection.arrDrops[i] != other_drop &&  this.collection.arrDrops[i] != currentZoomingDrop) //nicht sich selbst, und nicht den vorgaenger benachrichtigen (sonst "flackern") und nicht den Zoomenden Tropfen (sonst endlosschleife moeglich)
				this.collection.arrDrops[i].checkPosition(this);
		}
	}			
}

function zoomIn(drop){
	currentZoomingDrop = drop;
	tmp_zoomStep = zoomstep;
	clearInterval(drop.zoomOutInterval);
	drop.x_drop_float = parseFloat(drop.div.style.left);
	drop.y_drop_float = parseFloat(drop.div.style.top);
	drop.zoomInInterval = setInterval(function callFunc(){ zoomInHelp(drop); },zoomspeed);	
}
function zoomInHelp(drop){
	
	if (parseInt(drop.img_drop.style.width) < (dropWidth_unzoomed*zoomfactor)){			
		
		var old_width = parseInt(drop.div.style.width);
		var old_height = parseInt(drop.div.style.height);
		
		//naechste Breite berechnen und zoomStep fuer Beschleunigung anpassen
		var next_width = parseInt(drop.div.style.width)+(dropWidth_unzoomed*tmp_zoomStep);
		var next_height = parseInt(drop.div.style.height)+(dropHeight_unzoomed*tmp_zoomStep);
		tmp_zoomStep = tmp_zoomStep - speedup; // wegen der Beschleunigung
		
		//tropfen-div mitzoomen:
		drop.div.style.width = next_width+"px";
		drop.div.style.height = next_height+"px";
		//transparent-div mitzoomen:
		drop.transparent_div.style.width = next_width+"px"; 
		drop.transparent_div.style.height = next_height+"px"; 
		//transparent_img in transparent_div mitzoomen --> fuer ie
		drop.transparent_img.style.width = next_width+"px"; 
		drop.transparent_img.style.height = next_height+"px"; 
		//tropfenbild zoomen:
		drop.img_drop.style.width=next_width+"px";    //tropfen-breite vergroessern
		drop.img_drop.style.height=next_height+"px"; // tropfen-hoehe vergroessern
		//symbol verschieben:
		drop.img_symbol.style.left = parseInt((parseInt(drop.img_drop.style.width)*0.5)-(parseInt(drop.img_symbol.width)*0.5))+"px";						
		//ganzen Tropfen nach oben links bewegen, damit es aussieht, als wuerde der Tropfen mittig aufzoomen
		drop.x_drop_float = drop.x_drop_float - parseFloat((next_width - old_width)/2);
		drop.y_drop_float = drop.y_drop_float - parseFloat((next_height - old_height)/2);
		var new_left = parseInt(drop.x_drop_float);
		var new_top = parseInt(drop.y_drop_float);	
		drop.div.style.left = new_left+"px";
		drop.div.style.top = new_top+"px";
		//alle anderen Tropfen informieren, dass sich dieser Tropfen vergroessert hat:
		drop.collection.notifyOtherDrops(drop); 
	}
	else{  // damit tropfen nicht unendlich zoomt
		clearInterval(drop.zoomInInterval);
		//tropfen-div mitzoomen:
		drop.div.style.width = dropWidth_full+"px"; 
		drop.div.style.height = dropHeight_full+"px";
		//transparent_div mitzoomen
		drop.transparent_div.style.width = dropWidth_full+"px"; 
		drop.transparent_div.style.height = dropHeight_full+"px"; 
		//transparent_img in transparent_div mitzoomen --> fuer ie
		drop.transparent_img.style.width = dropWidth_full+"px"; 
		drop.transparent_img.style.height = dropHeight_full+"px"; 
		//tropfenbild zoomen:
		drop.img_drop.style.width=dropWidth_full+"px"; 
		drop.img_drop.style.height=dropHeight_full+"px"; 
		drop.img_text.style.display="block";  //unsichtbares Text-Img anzeigen		
		
	}
}

function zoomOut(drop){
	drop.numberOfZoomOutSteps = getNumberOfZoomOutSteps(drop);
	clearInterval(drop.zoomInInterval);
	drop.img_text.style.display="none"; //zuerst Text-Img wieder unsichtbar machen
	currentZoomingDrop = null;
	drop.zoomOutInterval = setInterval(function callFunct(){ zoomOutHelp(drop); },zoomspeed);	
}
function zoomOutHelp(drop){		
	if(parseInt(drop.img_drop.style.width) >= dropWidth_unzoomed){	
		
		var old_width = parseInt(drop.div.style.width);
		var old_height = parseInt(drop.div.style.height);
		
		var next_width = parseInt(drop.img_drop.style.width)-(parseInt(drop.img_drop.style.width)*zoomstep);
		var next_height = parseInt(drop.img_drop.style.height)-(parseInt(drop.img_drop.style.height)*zoomstep);
		//transparent-div wegzoomen:
		drop.transparent_div.style.width = next_width+"px"; 
		drop.transparent_div.style.height = next_height+"px"; 
		//transparent_img in transparent_div wegzoomen --> fuer ie
		drop.transparent_img.style.width = next_width+"px"; 
		drop.transparent_img.style.height = next_height+"px"; 
		//tropfenbild wegzoomen:
		drop.img_drop.style.width=next_width+"px";    //tropfen-breite verkleinern
		drop.img_drop.style.height=next_height+"px"; // tropfen-hoehe verkleinern
		//tropfen-div wegzoomen:
		drop.div.style.width = next_width+"px";
		drop.div.style.height = next_height+"px";
		//symbol verschieben: (nur in x-richtung!)
		drop.img_symbol.style.left = parseInt((parseInt(drop.img_drop.style.width)*0.5)-(parseInt(drop.img_symbol.width)*0.5))+"px";
								
		//ganzen Tropfen wieder zurueck bewegen, damit es aussieht, als wuerde der Tropfen mittig rauszoomen		
		drop.x_drop_float = drop.x_drop_float + parseFloat((old_width - next_width)/2);
		drop.y_drop_float = drop.y_drop_float + parseFloat((old_height - next_height)/2);
	//	var new_left = parseInt(drop.div.style.left) + parseInt((old_width - next_width)/2);
	//	var new_top = parseInt(drop.div.style.top) + parseInt((old_height - next_height)/2);
	
		var new_left = parseInt(drop.x_drop_float);
		var new_top = parseInt(drop.y_drop_float);
		
		drop.div.style.left = new_left+"px";
		drop.div.style.top = new_top+"px";
		
		//notify others to come back to origin Position:
		drop.collection.notifyOtherDropsToComeBack(drop);//alle anderen, die vielleicht verschoben wurden, bescheid sagen, dass sie zurück dürfen
		
	}
		else{  // damit tropfen nicht unendlich klein wird
		clearInterval(drop.zoomOutInterval);
		drop.positionInnerContent(); // um rundungsfehler von oben auszugleichen: es kann sein, dass einige komponenten, nicht mehr am richtigen platz sind nach zoomOut
		//drop.setXandY(drop.orig_x_pos,drop.orig_y_pos); // um rundungsfehler von oben auszugleichen: auf startposition zuruecksetzen
		drop.div.style.width = dropWidth_unzoomed+"px";// um rundungsfehler von oben auszugleichen: div wieder auf richtige Breite setzen, damit vom Tropfenbild nichts "abgeschnitten" wird
		drop.div.style.height = dropHeight_unzoomed+"px";
		if (currentZoomingDrop==null){
			for(var i=0;i<drop.collection.arrDrops.length;i++){// um rundungsfehler von oben auszugleichen: alle Tropfen auf startposition zuruecksetzen
				if(drop.collection.arrDrops[i] != currentZoomingDrop) //diese abfrage weil: wenn gerade ein anderer trofen aufzoomt darf er nicht! auf seine startposition zurueckgesetzt werden, weil sonst ein "Sprung" entsteht
				drop.collection.arrDrops[i].setXandY(drop.collection.arrDrops[i].orig_x_pos,drop.collection.arrDrops[i].orig_y_pos);
			}
		}
	}
}

function moveBack(other_drop){  //to original position
	if(this.x_range == -1 && this.y_range == -1){
		this.x_range = (this.orig_x_pos - parseInt(this.div.style.left))/other_drop.numberOfZoomOutSteps; //weil: left und top verändern sich natuerlich, deswegen nur einmal am anfang berechnen
		this.y_range = (this.orig_y_pos - parseInt(this.div.style.top))/other_drop.numberOfZoomOutSteps;
	}
	this.div.style.left = parseInt(this.div.style.left) + this.x_range +"px";
	this.div.style.top = parseInt(this.div.style.top) + this.y_range +"px";
}

/* setzt die Atrriubut, damit der Tropfen seine urspruengliche X und Y Position kennt */
function setOrigXandYPosition(x,y){
	this.orig_x_pos = x;
	this.orig_y_pos = y;
}

/* die Koordinate, an der der Tropfen im Zentrum beim zoomen immer bleiben muss  */
function getFixedCenterCoordinates(){
	var arrTmp = new Array();
	arrTmp[0] = this.orig_x_pos+(parseInt(dropWidth_unzoomed/2));
	arrTmp[1] = this.orig_y_pos+(parseInt(dropHeight_unzoomed/2));
	return arrTmp;	
}