/* sciTools-Library :: sciEffects.js */

	/*******************************************************************************
	 * Copyright (c) 2007 SCI-Design.at Dr. Günther Rezniczek, 1030 Vienna, Austria
	 *******************************************************************************/ 



function sciEffectsObject() { }



sciEffectsObject.prototype.jsIsDefined = function (varName, obj) {
	/*******************************************************************************************************************
    function: sciEffects.jsIsDefined

    Description:
		checks whether a javascript variable has been defined, and if so, returns true, else false
		varName: the name of the variable to be checked
		obj (optional): checks if the variable is defined in the object
	*********************************************************************************************************************/

	var objToCheck = obj || window;

    return (typeof(objToCheck[varName]) == "undefined") ?  false : true;
}


//
// automagical rollovers
//
// image tags of the form <img src="../image.gif" oversrc="image_over.gif"> will
// display the image specified in the attribute oversrc when the mouse is moved over the image.
//

sciEffectsObject.prototype.swapImage = function (img, src_attr) {
	/*******************************************************************************************************************
    function: sciEffects.swapImage

    Description:
    	swaps the image displayed by the <img /> element (img) to the image located at the url 
		which is contained in its attribute specified (src_attr).
		img: <img /> object or id
		src_attr: name of the attribute of oImg containing the url to use as src. If aSrc is not given, the
		   value "origsrc" is used by default.
	*********************************************************************************************************************/
  	
	img = (typeof(img) == "string") ? document.getElementById(img) : img;

	if (sciEffects.jsIsDefined("toggleState", img) && img.toggleState == 1)	
		img.src = img.getAttribute(src_attr || "togglesrc");
	else
		img.src = img.getAttribute(src_attr || "origsrc");
};


sciEffectsObject.prototype.toggleImage = function (img) {
	/*******************************************************************************************************************
    function: sciEffects.toggleImage

    Description:
		toggles the image displayed by the <img /> element (img) to the image locate at the url 
		which is contained in its attribute togglesrc (or origsrc, depending on the state).
		img: reference to an <img /> object or its id
	*********************************************************************************************************************/
  	
	img = (typeof(img) == "string") ? document.getElementById(img) : img;
	
	if (img.toggleState == 0)
	{
		img.toggleState = 1;
		img.src = img.getAttribute("togglesrc");
		img.onmouseover = new Function("this.onmouseover_PreSwap(); sciEffects.swapImage(this,'toggleoversrc');");
		img.onmouseout = new Function("this.onmouseout_PreSwap(); sciEffects.swapImage(this);");
	}
	else
	{
		img.toggleState = 0;
		img.src = img.getAttribute("origsrc");
		img.onmouseover = new Function("this.onmouseover_PreSwap(); sciEffects.swapImage(this,'oversrc');");
		img.onmouseout = new Function("this.onmouseout_PreSwap(); sciEffects.swapImage(this);");
	}
};


sciEffectsObject.prototype.setOversrc = function (img, src, oversrc) {
	/*******************************************************************************************************************
    function: sciEffects.setOversrc

    Description:
		img: reference to an <img /> object or its id
		src:
		oversrc:
	*********************************************************************************************************************/
	
	img = (typeof(img) == "string") ? document.getElementById(img) : img;
		
	img.src = src;
	img.setAttribute("origsrc", src);
	img.setAttribute("oversrc", oversrc);
	img.oversrcImg.src = oversrc;
};

	
sciEffectsObject.prototype.setupImageSwap = function () {
	/*******************************************************************************************************************
    function: sciEffects.setupImageSwap

    Description:
    	sets up the swap functionality in a document by adding eventhandlers to all <img /> elements
		having an attribute named "oversrc".
	*********************************************************************************************************************/
	
 	var imgs = document.getElementsByTagName("img");
	for (var i = 0; i < imgs.length; i++)
	{
		imgs[i].toggleState = 0;
    	var oversrc = imgs[i].getAttribute("oversrc");
	    if (oversrc)
		{
			// preload image
			imgs[i].oversrcImg = new Image();
			imgs[i].oversrcImg.src = oversrc;
			// save original src
			imgs[i].setAttribute("origsrc", imgs[i].src);
			// set event handlers
			imgs[i].onmouseover_PreSwap = (imgs[i].onmouseover) ? imgs[i].onmouseover : function() {};
			imgs[i].onmouseover = new Function("this.onmouseover_PreSwap(); sciEffects.swapImage(this,'oversrc');");
			imgs[i].onmouseout_PreSwap = (imgs[i].onmouseout) ? imgs[i].onmouseout : function() {};
			imgs[i].onmouseout = new Function("this.onmouseout_PreSwap(); sciEffects.swapImage(this);");
		}
		var togglesrc = imgs[i].getAttribute("togglesrc");
		var toggleoversrc = imgs[i].getAttribute("toggleoversrc");
		if (togglesrc)
		{
			// preload image
			imgs[i].togglesrcImg = new Image();
			imgs[i].togglesrcImg.src = togglesrc;
			if (toggleoversrc)
			{
				imgs[i].toggleoversrcImg = new Image();
				imgs[i].toggleoversrcImg.src = toggleoversrc;
			}
			if (!imgs[i].getAttribute("origsrc"))
			{
				// save original src
				imgs[i].setAttribute("origsrc", imgs[i].src);
			}
			// set event handlers
			imgs[i].onclick_PreToggle = (imgs[i].onclick) ? imgs[i].onclick : function() {};
			imgs[i].onclick = new Function("this.onclick_PreToggle(); sciEffects.toggleImage(this);");
			// mouse-over effect for toggled state
			imgs[i].setAttribute("toggleoversrc", (toggleoversrc) ? toggleoversrc : togglesrc);
		}
	}
};





sciEffectsObject.prototype.visibleById = function (id,visible) {
	/*******************************************************************************************************************
    function: sciEffects.visibleById

    Description:
		Sets visibility of an element
		id: id of the elemnt
		visible: true = visible, false = hidden
	*********************************************************************************************************************/
	
	var el = document.getElementById(id);
	if (el)
	{
		el.style.display = visible ? "block" : "none";
	}
};

sciEffectsObject.prototype.visibleByClass = function (className,visible) {
	/*******************************************************************************************************************
    function: sciEffects.visibleByClass

    Description:
		Sets visibility of all elements with a certain class
		class: name of the class
		visible: true = visible, false = hidden
	*********************************************************************************************************************/
	
	var els = document.getElementsByClassName(className);
	if (els) 
	{
		for (var i = 0; i < els.length; i++)
		{
			els[i].style.display = visible ? "block" : "none";
		}
	}
};


sciEffectsObject.prototype.setupMouseFade = function () {
	/*******************************************************************************************************************
    function: sciEffects.setupMouseFade

    Description:
    	Sets up mouse fade effects on elements with the 
		
			mousefade="out,in,speed"
			
		attribute.
	*********************************************************************************************************************/
	
 	var els = document.getElementsByTagName("*");
	for (var i = 0; i < els.length; i++)
	{
		var el = els[i];
		var mf = el.getAttribute("mousefade");
		if (mf) {
			if (!el.id)
			{
				el.id = "mouseFadeElement_" + i;
			}
			var vals = mf.split(",");
			el.mouseFadeOut = vals[0] ? vals[0] : 80;
			el.mouseFadeOver = vals[1] ? vals[1] : 100;
			el.mouseFadeSpeed = (typeof(vals[2]) != "undefined") ? vals[2] : 500;
			el.onmouseover_PreMouseFade = mf.onmouseover ? mf.onmouseover : function() {};
			el.onmouseout_PreMouseFade = mf.onmouseout ? mf.onmouseout : function() {};
			el.onmouseover = new Function("this.onmouseover_PreMouseFade(); sciEffects.fade(this, this.mouseFadeOver, this.mouseFadeSpeed);");
			el.onmouseout = new Function("this.onmouseout_PreMouseFade(); sciEffects.fade(this, this.mouseFadeOut, this.mouseFadeSpeed);");
			sciEffects.setOpacity(el, el.mouseFadeOut);
		}
	}
};










sciEffectsObject.prototype.getOpacity = function(id) {
	/*******************************************************************************************************************
    function: sciEffects.getOpacity

    Description:
		Gets the opacity of an element.
		id: The id of the element (usually an <img> or <div>).
		Returns: The opacity of the element (in %).
	*********************************************************************************************************************/

	var obj = (typeof(id) == "string") ? document.getElementById(id) : id;
	
	if (obj) {
		var o = obj.style.opacity;
		if (typeof(o) == "undefined") {
			return 100;
		}
		else if (o!= "0" && o == "") {
			return 100;
		}
		else {
			return o * 100;
		}
	}
	else {
		return 100;
	}
	
};


sciEffectsObject.prototype.setOpacity = function(id, opacity) {
	/*******************************************************************************************************************
    function: sciEffects.setOpacity

    Description:
		Sets the opacity of an element.
		id: The id of the element (usually an <img> or <div>).
		opacity: The opacity (as %, 0-100) the element should be set to.
	*********************************************************************************************************************/

	var obj = (typeof(id) == "string") ? document.getElementById(id) : id;
	
	if (obj) {
		obj.style.opacity = opacity / 100;
		obj.style.MozOpacity = opacity / 100;
		obj.style.KhtmlOpacity = opacity / 100;
		obj.style.filter = "alpha(opacity=" + opacity + ")";
	}
};


sciEffectsObject.prototype.fade = function(id, targetOpacity, speed) {
	/*******************************************************************************************************************
    function: sciEffects.fade

    Description:
		Fades an element.
		id: The id of the element (usually an <img> or <div>).
		targetOpacity: The opacity the element should have.
		speed: The time in milliseconds a fade from 0% to 100% should take.
	*********************************************************************************************************************/

	var obj = (typeof(id) == "string") ? document.getElementById(id) : id;
	
	if (obj) {
		var v = Math.round(speed / 100);
		var t = 0;
		var startOpacity = sciEffects.getOpacity(obj);
		id = obj.id;
		
		if (startOpacity > targetOpacity) {
			for (var i = startOpacity; i >= targetOpacity; i--) {
				setTimeout("sciEffects.setOpacity('" + id + "', " + i + ")", v * t);
				t++;
			}
		}
		else if (startOpacity < targetOpacity) {
			for (var i = startOpacity; i <= targetOpacity; i++) {
				setTimeout("sciEffects.setOpacity('" + id + "', " + i + ")", v * t);
				t++;
			}
		}
	}
};


sciEffectsObject.prototype.toggleOpacity = function (id, speed) {
	/*******************************************************************************************************************
    function: sciEffects.toggleOpacity

    Description:
		Fades an element to 0 or 100%, depending on current state.
		id: The id (or object reference) of the element (usually an <img> or <div>).
		speed: The time in milliseconds a fade from 0% to 100% should take.
	*********************************************************************************************************************/

	var obj = (typeof(id) == "string") ? document.getElementById(id) : id;
	
	if (obj) {
		if (sciEffects.getOpacity(obj) == 0) {
			sciEffects.fade(obj, 100, speed);
		}
		else {
			sciEffects.fade(obj, 0, speed);
		}
	}
};



sciEffectsObject.prototype.crossfade = function (divId, imgId, imgUrl, speed) {
	/*******************************************************************************************************************
    function: sciEffects.crossfade

    Description:
		Fades an image into another.
		divId: The id (or object reference) of the <div> containing the <img>.
		imgId: The id (or object reference) of the <img>.
		imgUrl: The URL of the image to fade to.
		speed: The time in milliseconds a fade from 0% to 100% should take.
	*********************************************************************************************************************/
	
	var objDiv = (typeof(divId) == "string") ? document.getElementById(divId) : divId;
	var objImg = (typeof(imgId) == "string") ? document.getElementById(imgId) : imgId;
	
	if (objDiv && objImg) {
		objDiv.style.backgroundImage = "url(" + objImg.src + ")";
		objDiv.style.backgroundRepeat = "no-repeat";
		sciEffects.setOpacity(objImg, 0);
		objImg.src = imgUrl;
		sciEffects.fade(objImg, 100, speed);
	}
};

var sciEffects = new sciEffectsObject;
// hook into onload
var sciEffects_PreSetup = (window.onload) ? window.onload : function() {};
window.onload = function() { sciEffects_PreSetup(); sciEffects.setupMouseFade(); sciEffects.setupImageSwap(); }