YAHOO.namespace("YAHOO.kkh.keyvisual");

// Singleton fuer allgemeine Funktionen
YAHOO.kkh.keyvisual = (function() {
	var zIndex = 1000;
	return {
		// Liefert einen neuen zIndex zurueck (wird intern hochgezaehlt)
		zIndex: function() {
			return zIndex++;
		}
	}
})();

// Klasse zum Ueberblenden mehrerer DIVs
YAHOO.kkh.keyvisual.FadingBox = function(pCont) {
	this.container = YAHOO.util.Dom.get(pCont);
	this.pages = YAHOO.util.Dom.getChildren(this.container);
	this.current = 0;
	
	// zIndex vergeben und pages sichtbar machen
	for(var i = this.pages.length - 1; i >= 0; i--) {
		YAHOO.util.Dom.setStyle(this.pages[i], "z-index", YAHOO.kkh.keyvisual.zIndex());
		YAHOO.util.Dom.setStyle(this.pages[i], "display", "block");
	}
	
	this.createEvent("change");
}
YAHOO.augment(YAHOO.kkh.keyvisual.FadingBox, YAHOO.util.EventProvider);

YAHOO.kkh.keyvisual.FadingBox.prototype.fadeTo = function(i) {
	if(i < 0 || i >= this.pages.length || i == this.current) return;
	
	this.current = i;
	
	var anim = new YAHOO.util.Anim(this.pages[i], {
		opacity: {
			from: 0,
			to: 1
		}
	}, 0.5);
	
	anim.onStart.subscribe(function() {
		YAHOO.util.Dom.setStyle(this, "display", "none");
		YAHOO.util.Dom.setStyle(this, "z-index", YAHOO.kkh.keyvisual.zIndex());
	}, this.pages[i], true);
	
	anim.onTween.subscribe(function() {
		YAHOO.util.Dom.setStyle(this, "display", "block");
	}, this.pages[i], true);
	
	anim.onComplete.subscribe(function() {
		this.fireEvent("change", this.current);
	}, this, true);
	
	anim.animate();
}
	
YAHOO.kkh.keyvisual.FadingBox.prototype.next = function() {
	this.fadeTo(this.current + 1 < this.pages.length ? this.current + 1 : 0);
}
	
YAHOO.kkh.keyvisual.FadingBox.prototype.prev = function() {
	this.fadeTo(this.current - 1 >= 0 ? this.current - 1 : this.pages.length - 1);
}

// Floating Image
YAHOO.kkh.keyvisual.FloatingImage = function(pImg, pPerc) {
	try {
		this.image = YAHOO.util.Dom.get(pImg);
		this.container = document.createElement("div");
		this.container.className = "floating-image";
		this.image.parentNode.replaceChild(this.container, this.image);
		this.container.appendChild(this.image);
		
		if (this.image.alt.length > 0) {
			this.tooltip = document.createElement("div");
			this.tooltip.innerHTML = this.image.alt;
			this.tooltip.className = "floating-image-tooltip";
			this.image.alt = "";
			this.container.appendChild(this.tooltip);
		}
		
		var sizeFrom = [this.image.width, this.image.height];
		/*with(YAHOO.util.Dom.getRegion(this.image)) {
	 		sizeFrom[0] = right - left;
	 		sizeFrom[1] = bottom - top;
	 	}*/
		/*if(window.console) {
			console.dir(YAHOO.util.Dom.getRegion)
		}*/
		
		var sizeTo = [0, 0];
		sizeTo[0] = Math.round(sizeFrom[0] * (pPerc + 1));
		sizeTo[1] = Math.round(sizeFrom[1] * (pPerc + 1));
		
		this.container.style.width = sizeFrom[0] + "px";
		this.container.style.height = sizeFrom[1] + "px";
		
		this.createEvent("click");
		
		YAHOO.util.Event.on([this.image, this.tooltip], "click", function(){
			this.fireEvent("click", null);
		}, this, true);
		
		YAHOO.util.Event.on([this.image, this.tooltip], "mouseout", function(evt){
			var relTrgt = YAHOO.util.Event.getRelatedTarget(evt);
			if (relTrgt == this.tooltip || relTrgt == this.image) 
				return;
			
			//if(window.console)
			//	console.dir(sizeFrom)
			
			if (this.tooltip) {
				this.tooltip.style.display = "none";
			}
			new YAHOO.util.Anim(this.image, {
				width: {
					to: sizeFrom[0]
				},
				height: {
					to: sizeFrom[1]
				},
				left: {
					to: 0
				},
				top: {
					to: 0
				}
			}, 0.4).animate();
		}, this, true);
		
		YAHOO.util.Event.on(this.image, "mouseover", function(){
			this.container.style.zIndex = YAHOO.kkh.keyvisual.zIndex();
			if (this.tooltip) {
				this.tooltip.style.zIndex = YAHOO.kkh.keyvisual.zIndex();
				YAHOO.util.Dom.setStyle(this.tooltip, "opacity", 0);
				YAHOO.util.Dom.setStyle(this.tooltip, "display", "block");
				new YAHOO.util.Anim(this.tooltip, {
					opacity: {
						from: 0,
						to: 1
					}
				}, 0.5).animate();
			}
			new YAHOO.util.Anim(this.image, {
				width: {
					to: sizeTo[0]
				},
				height: {
					to: sizeTo[1]
				},
				left: {
					to: (sizeFrom[0] - sizeTo[0]) / 2
				},
				top: {
					to: (sizeFrom[1] - sizeTo[1]) / 2
				}
			}, 0.2).animate();
		}, this, true);
		
	} catch (e)
	{
		alert(e.description);
		
	}
}
YAHOO.augment(YAHOO.kkh.keyvisual.FloatingImage, YAHOO.util.EventProvider);