/*global sample_Container*/
// Generate a random color
/*string*/ function randomColor() {
	var clr = "#";
	for (var i=0; i<6; i++) {
		clr += Math.floor(Math.random()*16).toString(16);
	}
	return clr;
}

// Effect which changes the background color of the element on a timer
/*void*/ function autoColor(/*element*/ elem, /*int*/ delay) {
	var oldTitle = elem.title;
	elem.title = "Click to stop";

	var oldCursor = elem.style.cursor;
	try {
		// IE5 doesn't like pointer
		elem.style.cursor = "pointer";
	} catch (ex) {
		elem.style.cursor = "hand";
	}

	var oldColor = elem.style.backgroundColor;

	var kill = window.setInterval(
		function() {
			if (elem) {
				// Randomly choose a background color
				elem.style.backgroundColor = randomColor();
			}
		}, delay);

	elem.onclick = function(evt) {
		window.clearInterval(kill);
		elem.title = oldTitle;
		try {
			// IE5 doesn't like some values
			elem.style.cursor = oldCursor;
		} catch (ex) {
			elem.style.cursor = "default";
		}
		elem.style.backgroundColor = oldColor;
		elem.onclick = null;
		elem = null;
	};
}

// Effect which attaches handlers and a timer to an element to make it pulse
/*void*/ function bindPulse(/*element*/ elem, /*int*/ delay) {
	if (!elem || !elem.tagName || !elem.style) {
		return;
	}

	if (isNaN(delay)) {
		delay = 0;
	}

	var es = null,
	/*bool*/ state = 0, //0=stop, 1=init, 2=fade
	/*bool*/ dir = true, // dir: true = fade-out, false = fade-in
	/*const float*/ Min = 0.0,
	/*const float*/ Max = 1.0,
	/*const float*/ Inc = 0.05;

	var userFilter = "",
		userKhtml = "",
		userMoz = "",
		userOpacity = "",
		alpha = null;

	/*void*/ function f(/*float*/ step) {

		if (state === 0) {// stop
			elem.title = "Click to start";
			es["-khtml-opacity"] = userKhtml;
			es["-moz-opacity"] = userMoz;
			es.opacity = userOpacity;
			if (alpha) {
				alpha.enabled = false;
			}
			if (userFilter) {
				es.filter = userFilter;
			}
			alpha = null;
			es = null;
			elem = null;
			return;

		} else if (state === 1) {//init

			dir = true;
			es = elem.style;
			userKhtml = es["-khtml-opacity"];
			userMoz = es["-moz-opacity"];
			userOpacity = es.opacity;
			if (elem.filters && !alpha) {
				es.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
				try {
					alpha = elem.filters.item("DXImageTransform.Microsoft.Alpha");
				} catch (ex) { alpha = null; }
				if (!alpha) {
					es.filter += " alpha(opacity=100)";
					try {
						alpha = elem.filters.item("alpha");
					} catch (ex) { alpha = null; }
				}
			}
			state = 2;
			try {
				// IE5 doesn't like pointer
				elem.style.cursor = "pointer";
			} catch (ex) {
				elem.style.cursor = "hand";
			}
			elem.title = "Click to stop";
		}

		if (!es || isNaN(step)) {
			return;
		}

		if (step < Min) {
			step = Min;
			dir = !dir;
		} else if (step > Max) {
			step = Max;
			dir = !dir;
		}

		es["-khtml-opacity"] = 1.0*step;
		es["-moz-opacity"] = 1.0*step;
		es.opacity = 1.0*step;
		if (alpha) {
			alpha.opacity = Math.floor(100*step);
		}

		setTimeout(
			function() { f(dir ? (step-Inc) : (step+Inc)); },
			delay);
	}

	/*void*/ elem.onclick = function () {
		if (!elem) {
			elem = this;
		}

		if (state) {
			state = 0;
		} else {
			state = 1;
			f(Max);
		}
	};

	// allow to be added to DOM
	setTimeout(elem.onclick, delay);
}

// this is the JsonML filter which binds Effects
/*void*/ function bindFilter(/*element*/ elem) {
	if (elem.className.indexOf("Remove-Me") >= 0) {
		// this will remove from resulting DOM tree
		return null;
	}

	if (elem.tagName && elem.tagName.toLowerCase() === "a") {
		// this is the equivalent of target="_blank"
		elem.onclick = function(evt) {
			window.open(elem.href); return false;
		};
	}

	if (elem.className.indexOf("MultiColor-Effect") >= 0) {
		// bind to a custom behavior
		autoColor(elem, Math.floor(500+Math.random()*1000));
	}

	if (elem.className.indexOf("Color-Effect") >= 0) {
		// Randomly choose a background color
		elem.style.backgroundColor = randomColor();
	}

	if (elem.className.indexOf("Pulse-Effect") >= 0) {
		// bind to a custom behavior
		bindPulse(elem, Math.floor(Math.random()*200));
	}

    return elem;
}

// adds and example to the demo area
/*void*/ function addToPage(/*string*/ id, /*JsonML*/ jsonML, /*bool*/ bind) {
	var demoArea = document.getElementById(id);
	var container = JsonML.parse(sample_Container, bind?bindFilter:null);
	var elem = JsonML.parse(jsonML, bind?bindFilter:null);
	if (container && elem && demoArea) {
		container.appendChild(elem);
		demoArea.insertBefore(container, demoArea.firstChild);
	}
}

// clears the demo area
/*void*/ function resetPage(/*string*/ id, /*JsonML*/ jsonML, /*bool*/ bind) {
	var demoArea = document.getElementById(id);
	if (demoArea) {
		while (demoArea.lastChild) {
			demoArea.removeChild(demoArea.lastChild);
		}
	}
}