// @AUTHOR - Wouter Smit (widgets)
// @MODIFIED - 07-SEP-2009

var widgets = {

	// drag in progress boolean
	isDragging: false,

	// currently dragged container
	dragContainer: undefined,

	// interval timer for dragging
	dragTimer: 0,

	// update time interval in miliseconds
	dragUpdateSpeed: 10,

	// initial left, top of container
	dragContainerStartLeft: 0,
	dragContainerStartTop: 0,

	// initial x, y position of mouse
	dragMouseStartX: undefined,
	dragMouseStartY: undefined,

	// current x, y position of mouse
	dragMouseX: 0,
	dragMouseY: 0,

	// highest z-index
	dragHighestZ: 0,

	// collection of all widget containers
	widgetContainers: new Array(),

	// current background theme
	currentTheme: 1,

	// initialize draggable objects
	init: function() {
		this.widgetContainers = functions.gClass("container");
		var $tempZ = 0;
		for ( var i = 0; i < this.widgetContainers.length; i++ ) {
			if ( this.widgetContainers[i].className.indexOf("draggable") != -1 ) {
				if ( this.getSetting(this.widgetContainers[i].id + "_left") ) {
					this.widgetContainers[i].style.left = this.getSetting(this.widgetContainers[i].id + "_left") + "px";
					this.widgetContainers[i].style.top = this.getSetting(this.widgetContainers[i].id + "_top") + "px";
					this.widgetContainers[i].style.zIndex = this.getSetting(this.widgetContainers[i].id + "_z");
					if ( $tempZ < this.widgetContainers[i].style.zIndex ) $tempZ = this.widgetContainers[i].style.zIndex;
				} else {
					this.widgetContainers[i].style.zIndex = 10 + i;
					this.dragHighestZ = 10 + i;
				}
				if ( $tempZ > 0 ) this.dragHighestZ = $tempZ;
			}
			if ( this.widgetContainers[i].className.indexOf("static") == -1 ) { 
				this.addGrid(this.widgetContainers[i]);
			} else {
				var $w = this.widgetContainers[i].className.split("x")[0].split(" ")[this.widgetContainers[i].className.split("x")[0].split(" ").length-1];
				var $h = this.widgetContainers[i].className.split("x")[1].split(" ")[0];
				this.widgetContainers[i].style.width = $w + "px";
				this.widgetContainers[i].style.height = $h + "px";
				this.widgetContainers[i].style.backgroundImage = "url('website/gfx/static_" + this.widgetContainers[i].id + ".png')";
				this.widgetContainers[i].style.zIndex = 1;
			}
		}
		var oldMouseUp = function(){}
		if ( document.onmouseup != undefined ) oldMouseUp = document.onmouseup;
		// capture mouse release to stop drag
		document.onmouseup = function() {
			if ( widgets.isDragging ) widgets.stopDrag();
			if ( top.frames["textframe"] != undefined ) top.frames["textframe"].scrollbar.stopDrag();
			oldMouseUp();
		}

		var oldMouseMove = function(){}
		if ( document.onmousemove != undefined ) oldMouseMove = document.onmousemove;
		// capture current mouse x, y
		document.onmousemove = function(e) {
			if ( widgets.isDragging ) {
				widgets.dragMouseX = (window.event) ? (event.clientX - functions.gId("wrapper").offsetLeft) : (e.pageX - functions.gId("wrapper").offsetLeft);
				widgets.dragMouseY = (window.event) ? (event.clientY - functions.gId("wrapper").offsetTop) : (e.pageY - functions.gId("wrapper").offsetTop);
				if ( widgets.dragMouseStartX == undefined ) widgets.dragMouseStartX = widgets.dragMouseX;
				if ( widgets.dragMouseStartY == undefined ) widgets.dragMouseStartY = widgets.dragMouseY;
			}
			oldMouseMove();
		}

		var oldSelectStart = function(){}
		if ( document.onselectstart != undefined ) oldSelectStart = document.onselectstart;
		// disable text selection on containers (IE)
		document.onselectstart = function(e) {
			var $el = (window.event) ? event.srcElement : e.target;
			oldSelectStart();
			if ( $el.tagName != "INPUT" && $el.tagName != "TEXTAREA" ) return false;
		}

		if ( this.getSetting("theme") ) {
			this.setTheme(this.getSetting("theme"));
		} else {
			this.setTheme(1);
		}

	},

	// add scale9grid to container
	addGrid: function($container) {
		var $w = $container.className.split("x")[0].split(" ")[$container.className.split("x")[0].split(" ").length-1];
		var $h = $container.className.split("x")[1].split(" ")[0];
		var $table = document.createElement("TABLE");
		var $tr1 = document.createElement("TR");
		var $tr2 = document.createElement("TR");
		var $tr3 = document.createElement("TR");
		for ( var i = 1; i <= 9; i++ ) {
			var $td = document.createElement("TD");
			if ( i == 3 || i == 6 || i == 9 ) {
				if ( $container.className.indexOf("grid") != -1 ) {
					$td.className = "grid" + i + "_" + $container.className.split("grid")[1].substr(0, 1);
				} else {
					$td.className = "grid" + i;
				}
			} else {
				$td.className = "grid" + i;
			}
			$td.innerHTML = "&nbsp;";

			if ( i <= 3 ) {
				if ( $container.className.indexOf("draggable") == -1 ) $td.height = 22;
				$tr1.appendChild($td);
			} else if ( i <= 6 ) {
				if ( i == 5 ) {
					$td.width = (($w - 44) > 1) ? ($w-44) : 1;
					if ( $container.className.indexOf("draggable") == -1 ) $td.height = (($h - 44) > 1) ? ($h-44) : 1;
				}
				$tr2.appendChild($td);
			} else {
				if ( $container.className.indexOf("draggable") == -1 ) $td.height = 22;
				$tr3.appendChild($td);
			}
		}
		$container.getElementsByTagName("DIV")[0].style.width = ($w - 22) + "px";
		$container.getElementsByTagName("DIV")[0].style.height = ($h - 22) + "px";

		if ( $container.className.indexOf("draggable") != -1 ) {
			var $corner = document.createElement("DIV");
			$corner.className = "corner";
			$corner.style.zIndex = 3;
			var $collapse = document.createElement("A");
			$collapse.href = "#";
			$collapse.className = "collapse";
			$corner.appendChild($collapse);
			$container.appendChild($corner);
			var $title = document.createElement("DIV");
			$title.className = "title";
			var $title_table =  document.createElement("TABLE");
			$title_table.cellPadding = 0;
			$title_table.cellSpacing = 0;
			$title_table.border = 0;
			var $title_tr = document.createElement("TR");
			var $title1 = document.createElement("TD");
			var $title_repeat = document.createElement("TD");
			var $title2 = document.createElement("TD");
			$title1.className = "title1";
			$title1.innerHTML = "&nbsp;";
			$title_repeat.className = "title_repeat";
			$title_repeat.innerHTML = $container.title;
			$title_repeat.height = 23;
			$title2.className = "title2";
			$title2.innerHTML = "&nbsp;";
			$title_tr.appendChild($title1);
			$title_tr.appendChild($title_repeat);
			$title_tr.appendChild($title2);
			$title_table.appendChild($title_tr);
			$title.appendChild($title_table);
			$container.appendChild($title);
		}
		$table.appendChild($tr1);
		$table.appendChild($tr2);
		$table.appendChild($tr3);
		$container.innerHTML += '<table cellpadding="0" cellspacing="0" border="0" style="z-index:1;">' + $table.innerHTML + '</table>';
		var $divs = $container.getElementsByTagName("DIV");
		for ( var i = 0; i < $divs.length; i++ ) {
			if ( $divs[i].className == "title" ) {
				$divs[i].onmousedown = function() { widgets.startDrag(this.parentNode) }
			}
		}
		var $links = $container.getElementsByTagName("A");
		for ( var i = 0; i < $links.length; i++ ) {
			if ( $links[i].className == "collapse" ) {
				$links[i].onclick = function() { widgets.collapse(this.parentNode.parentNode);return false; }
			}
		}
		if ( $container.className.indexOf("draggable") != -1 ) this.collapse($container, true);
	},

	// start dragging a widget container
	startDrag: function($container) {
		if ( !this.isDragging ) {
			this.isDragging = true;
			this.dragContainer = $container;
			this.dragMouseStartX = undefined;
			this.dragMouseStartY = undefined;
			this.dragContainerStartLeft = $container.offsetLeft;
			this.dragContainerStartTop = $container.offsetTop;
			this.dragHighestZ++;
			$container.style.zIndex = this.dragHighestZ;
			$container.style.filter = "alpha(opacity=70)";
			$container.style.MozOpacity = $container.style.opacity = "0.7";
			this.dragTimer = setInterval(function() {widgets.dragEvent()},this.dragUpdateSpeed);
			//if ( navigator.userAgent.indexOf("MSIE 7") != -1 ) functions.pauseTweens();
		}
	},

	// stop active drag
	stopDrag: function() {
		this.isDragging = false;
		if ( this.dragContainer.className.indexOf("draggable") != -1 ) {
			this.dragContainer.style.left = (Math.round(this.dragContainer.offsetLeft / 5) * 5) + "px";
			this.dragContainer.style.top = (Math.round(this.dragContainer.offsetTop / 5) * 5) + "px";
			this.dragContainer.style.filter = "alpha(opacity=100)";
			this.dragContainer.style.MozOpacity = this.dragContainer.style.opacity = "1";
			this.saveSetting(this.dragContainer.id + "_left", this.dragContainer.offsetLeft);
			this.saveSetting(this.dragContainer.id + "_top", this.dragContainer.offsetTop);
			this.saveSetting(this.dragContainer.id + "_z", this.dragContainer.style.zIndex);
			//if ( navigator.userAgent.indexOf("MSIE 7") != -1 ) functions.resumeTweens();
		}
		clearInterval(widgets.dragTimer);
	},

	// actual dragging event, called from dragTimer every x seconds
	dragEvent: function() {
		var $c = this.dragContainer;
		if ( !isNaN(this.dragContainerStartLeft + (this.dragMouseX - this.dragMouseStartX))) $c.style.left = (this.dragContainerStartLeft + (this.dragMouseX - this.dragMouseStartX)) + "px";
		if ( !isNaN(this.dragContainerStartTop + (this.dragMouseY - this.dragMouseStartY))) $c.style.top = (this.dragContainerStartTop + (this.dragMouseY - this.dragMouseStartY)) + "px";
	},

	// collapse/expand a widget container
	collapse: function($container, $init) {
		if ( $container.id == "box3" && tube.isBig ) {
			tube.toggleFullscreen();
			return false;
		}
		var $content = $container.getElementsByTagName("DIV")[0];
		var $links = $container.getElementsByTagName("A");
		for ( var i = 0; i < $links.length; i++ ) {
			if ( $links[i].className == "collapse" || $links[i].className == "expand" ) {
				var $collapse = $links[i];
			}
		}
		if ($init) {
			if ( this.getSetting($container.id + "_display") ) {
				$content.style.display = this.getSetting($container.id + "_display");
			} else {
				$content.style.display = "block";
			}
		} else {
			$content.style.display = ($content.style.display=="none") ? "block" : "none";
		}
		this.saveSetting($container.id + "_display", $content.style.display);
		if ( $content.style.display == "none" ) {
			$collapse.className = "expand";
		} else {
			$collapse.className = "collapse";
		}
		var $w = $container.className.split("x")[0].split(" ")[$container.className.split("x")[0].split(" ").length-1];
		var $h = $container.className.split("x")[1].split(" ")[0];
		for ( var i = 1; i <= 9; i++ ) {
			var $td = $container.getElementsByTagName("TD")[i+2];
			if ( $content.style.display == "none" ) {
				if ( i <= 3 ) {
					$td.height = 15;
				} else if ( i <= 6 ) {
					if ( $init ) {
						$td.height = 1;
					} else {
						tween.sizeToH($td, 1, 0.5);	
					}
				} else {
					$td.height = 15;
					if ( i == 7 ) {
						$td.style.backgroundPosition = "0px 17px";
					} else if ( i == 8 ) {
						$td.style.backgroundPosition = "0px -28px";
					} else if ( i == 9 ) {
						$td.style.backgroundPosition = "-23px 17px";
					}
				}
			} else {
				if ( i <= 3 ) {
					$td.height = 22;
				} else if ( i <= 6 ) {
					$td.width = (($w - 44) > 1) ? ($w-44) : 1;
					var $tempH = (($h - 44) > 1) ? ($h-44) : 1;
					if ( $init ) {
						$td.height = $tempH;
					} else {
						$content.style.visibility = "hidden";
						tween.sizeToH($td, $tempH, 0.5, function(){$content.style.visibility = "visible"});
					}
				} else {
					$td.height = 22;
					if ( i == 7 ) {
						$td.style.backgroundPosition = "0px 22px";
					} else if ( i == 8 ) {
						$td.style.backgroundPosition = "0px -23px";
					} else if ( i == 9 ) {
						$td.style.backgroundPosition = "-23px 22px";
					}
				}
			}
		}
		$container.style.width = $w + "px";
	},

	// save setting to cookie (remember for 365 days)
	saveSetting: function($setting, $value) {
		var $date = new Date();
		$date.setTime($date.getTime() + (365 * 24 * 60 * 60 * 1000));
		var $expires = "; expires=" + $date.toGMTString();
		document.cookie = "widgets_" + $setting + "=" + $value + $expires + "; path=/";
	},

	// get setting from cookie
	getSetting: function($setting) {
		var nameEQ = "widgets_" + $setting + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},

	// reset to default positions
	reset: function() {
		var cookie = document.cookie.split(/;\s*/);
		for ( var i=0;i<cookie.length;i++ ) {
			var cName = cookie[i].split('=')[0];
			document.cookie=cName+"=; path=/; expires=Thu, 01-Jan-1970 00:00:01 GMT;";
			document.cookie=cName+"=; expires=Thu, 01-Jan-1970 00:00:01 GMT;";
		}
		this.saveSetting("theme", this.currentTheme);
		location.reload(true);
	},

	// change background theme
	setTheme: function($themeId) {
		this.currentTheme = $themeId;
		document.body.style.backgroundImage = "url('website/gfx/background" + $themeId + ".jpg')";
		this.saveSetting("theme", $themeId);
	}

}

var functions = {

	// collection of all flash objects
	flashObjects: new Array(),

	// short for document.getElementById
	gId: function($id) {
		return document.getElementById($id);
	},

	// short for document.getElementsByTagName
	gTag: function($tag) {
		return document.getElementsByTagName($tag);
	},

	// custom getElementByName ==> returns a single element
	gName: function($name) {
		var $all = this.gTag("*");
		for ( var i = 0; i < $all.length; i++ ) {
			if ( $all[i].name == $name ) return $all[i];
		}
		return false;
	},

	// custom getElementsByClassName
	gClass: function($className) {
		var $all = this.gTag("*");
		var $out = new Array();
		for ( var i = 0; i < $all.length; i++ ) {
			if ( $all[i].className.indexOf($className) != -1 ) $out.push($all[i]);
		}
		return $out;
	},

	// write a flash embed with full browser compatibility
	writeFlash: function($src, $width, $height, $params, $flashVars, $targetElement) {

		if ( navigator.userAgent.indexOf("MSIE 7") != -1 ) {
			$src += "?iexplore=true";
		}

		var $code = '<div style="display:none;">&nbsp;</div>'; // IE6 fix
		$code += '<object width="' + $width + '" height="' + $height + '" ';
		$code += 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" ';
		$code += 'id="swf' + this.flashObjects.length + '">';
		$code += '<param name="movie" value="' + $src + '" />';

		var $paramArr = $params.split("&");
		var $paramAttributes = "";
		for ( var i = 0; i < $paramArr.length; i++ ) {
			var $param = $paramArr[i].split("=");
			$code += '<param name="' + $param[0] + '" value="' + $param[1] + '" />';
			$paramAttributes += ' ' + $param[0] + '="' + $param[1] + '"';
		}

		$code += '<param name="allowscriptaccess" value="true" />';

		if ( $flashVars ) {
			$code += '<param name="flashvars" value="' + $flashVars + '" />';
			$paramAttributes += ' flashvars="' + $flashVars + '"';
		}

		$code += '<embed width="' + $width + '" height="' + $height + '" src="' + $src + '" ';
		$code += 'name="swf' + this.flashObjects.length + '" type="application/x-shockwave-flash"';
		$code += $paramAttributes;
		$code += ' pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';

		if ( $targetElement ) {
			$targetElement.innerHTML = $code;
		} else {
			document.write($code);
		}

		if ( this.gId("swf" + this.flashObjects.length) ) {
			this.flashObjects.push(this.gId("swf" + this.flashObjects.length));
		} else {
			this.flashObjects.push(this.gName("swf" + this.flashObjects.length));
		}
	},

	pauseTweens: function() {
		for ( var i = 0; i < this.flashObjects.length; i++ ) {
			for ( var j = 0; j < this.flashObjects[i].childNodes.length; j++ ) {
				if ( this.flashObjects[i].childNodes[j].name == "flashvars") {
					if ( this.flashObjects[i].childNodes[j].value.indexOf("enableTweenPausing=true") != -1 ) {
						//this.flashObjects[i].pauseTweens();
					}
				}
			}
		}
	},

	resumeTweens: function() {
		for ( var i = 0; i < this.flashObjects.length; i++ ) {
			for ( var j = 0; j < this.flashObjects[i].childNodes.length; j++ ) {
				if ( this.flashObjects[i].childNodes[j].name == "flashvars") {
					if ( this.flashObjects[i].childNodes[j].value.indexOf("enableTweenPausing=true") != -1 ) {
						//this.flashObjects[i].resumeTweens();
					}
				}
			}
		}
	},

	formatTimeStamp: function($stamp) {
		var date = new Date($stamp * 1000);
		var time = this.addZero(date.getHours())+":"+this.addZero(date.getMinutes());
		return time;
	},

	addZero: function($num) {
		if ( $num < 10 ) {
			return "0" + $num;
		} else {
			return "" + $num;
		}
	}

}

var ajax = {

	chatSessionKey: 0,
	chatTimer: 0,

	projectCollection: new Array(),
	currentProject: 1,
	currentProjectPage: 1,

	clientCollection: new Array(),
	currentClientPage: 1,

	// create the xmlhttp object
	init: function($page) {
		/*@cc_on @*/
		/*@if (@_jscript_version >= 5)
		// JScript gives us Conditional compilation, we can cope with old IE versions.
		// and security blocked creation of the objects.
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				this.xmlhttp = false;
			}
		}
		@end @*/
		if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
			try {
				this.xmlhttp = new XMLHttpRequest();
			} catch (e) {
				this.xmlhttp=false;
			}
		}
		if (!this.xmlhttp && window.createRequest) {
			try {
				this.xmlhttp = window.createRequest();
			} catch (e) {
				this.xmlhttp=false;
			}
		}

		if ( $page == "home" ) {
			// show current chat online/offline status
			ajax.getOverallStatus();
		} else if ( $page == "projects" ) {
			ajax.loadProjects();
		} else if ( $page == "clients" ) {
			ajax.loadClients();
		}
	},

	// load a script (optionally sending variables) and callback
	// example: ajax.load("mail.php", "a=b&c=d&e=f", "POST", responseCallback);
	load: function($url, $variables, $method, $callback) {
		var $vars = "";
		var $data = null;
		if ( $method == "GET" ) {
			$vars = $variables;
		} else {
			$data = $variables;
		}
		var $char = ($url.indexOf("?") != -1 ) ? "&" : "?" ;
		this.xmlhttp.open($method, $url + $char + "key=" + Math.floor(Math.random() * 99999) + $vars, true);
		if ( $method == "POST" ) {
			this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			this.xmlhttp.setRequestHeader("Content-length", $data.length);
			this.xmlhttp.setRequestHeader("Connection", "close");
		}
		this.xmlhttp.onreadystatechange=function() {
			if ( ajax.xmlhttp.readyState == 4 ) {
				if ( $callback ) $callback(ajax.xmlhttp.responseText);
			}
		}
		this.xmlhttp.send($data);
	},

	// start a chat session
	startChatSession: function($admin) {
		var $name = top.frames["textframe"].document.getElementById("chat_name").value;
		if ( $name != "" ) {
			this.chatSessionKey = Math.floor(Math.random() * 999999999);
			this.load("website/inc/chat.php?action=startChatSession", "sessionKey="+this.chatSessionKey + "&admin=" + $admin + "&name=" + $name, "POST", ajax.onChatSession);
			top.frames["textframe"].document.getElementById("chat_start").style.display = "none";
			top.frames["textframe"].document.getElementById("chat_messages").style.display = "block";
			clearInterval(ajax.chatTimer);
			this.chatTimer = setInterval(function(){ajax.getChatMessages()}, 3000);
		} else {
			alert("U moet uw naam of nickname opgeven om te kunnen chatten...");
		}
	},

	// stop the chat session
	stopChatSession: function() {
		clearInterval(ajax.chatTimer);
		this.load("website/inc/chat.php?action=stopChatSession", "sessionKey="+this.chatSessionKey, "POST");
		top.frames["textframe"].document.getElementById("chat_start").style.display = "block";
		top.frames["textframe"].document.getElementById("chat_messages").style.display = "none";
	},

	// chat session start/stop callback
	onChatSession: function($result) {
		if ( $result.indexOf("responseCode=100") ) {
			top.frames["textframe"].document.getElementById("chat_text").value = "";
			top.frames["textframe"].document.getElementById("chat_conversation").innerHTML = "";
		}
	},

	// add a message to the chat conversation
	addChatMessage: function($message) {
		if ( $message != "" ) {
			$message = $message.split("\\").join("%%%").split("[").join("(").split("]").join(")");
			this.load("website/inc/chat.php?action=addMessage", "sessionKey="+this.chatSessionKey + "&message=" + $message, "POST", ajax.onChat);
			top.frames["textframe"].document.getElementById('chat_text').value = "";
		}
	},

	// get all messages from chat conversation
	getChatMessages: function() {
		this.load("website/inc/chat.php?action=getMessages", "sessionKey="+this.chatSessionKey, "POST", ajax.onChat);
	},

	// check whether anybody is online
	getOverallStatus: function() {
		this.load("website/inc/chat.php?action=getOverallStatus", "", "GET", ajax.onStatusChange);
	},

	// show overall status online/offline icon
	onStatusChange: function($status) {
		if ( $status.indexOf("response=true") != -1 ) {
			functions.gId("chat_status").className = "chat_online";
		} else {
			functions.gId("chat_status").className = "chat_offline";
		}
		setTimeout(function(){ajax.getOverallStatus()}, 10000);
	},

	// chat message callback
	onChat: function($conversation) {
		if ( top.frames["textframe"].document.getElementById("chat_conversation") ) {
			$chatbox = top.frames["textframe"].document.getElementById("chat_conversation");
			var $output = "";
			$conversation = $conversation.split("\\n").join("<br />").split("%%%").join("\\");
			$conversation = $conversation.split('[[');
			for ( var i = 0; i < $conversation.length; i++ ) {
				if ( $conversation[i].indexOf('VISITOR') != -1 ) {
					$output += '<span style="font-size:0.9em;">(' + functions.formatTimeStamp($conversation[i].split("][")[1].split("]]")[0]) + ') U zegt:</span><br /><span style="color:#88C540">' + $conversation[i].split('VISITOR').join('').split(']]')[1] + '</span><br /><br />';
				} else if ( $conversation[i].indexOf('ADMIN') != -1 ) {
					$output += '<span style="font-size:0.9em;">(' + functions.formatTimeStamp($conversation[i].split("][")[1].split("]]")[0]) + ') Admin zegt:</span><br /><span style="color:#FF0000">' + $conversation[i].split('ADMIN').join('').split(']]')[1] + '</span><br /><br />';
				}
			}
			$chatbox.innerHTML = $output;
			$coll = top.frames["textframe"].scrollbar.scrollbarCollection;
			if ( $coll[0].content.offsetHeight > $coll[0].box.offsetHeight ) {
				$coll[0].bar.appendChild($coll[0].slider);
				$coll[0].slider.style.top = ($coll[0].box.offsetHeight - $coll[0].slider.offsetHeight - 2) + "px";
				top.frames["textframe"].scrollbar.scrollEvent($coll[0]);
			}
		}
	},

	// request for call-me-back
	callMeBack: function($name, $phoneNumber) {
		var $message = "";
		if ( $name == "" ) $message += "Vul uw naam in\n";
		if ( $phoneNumber == "" ) $message += "Vul uw telefoonnummer in\n";
		if ( $phoneNumber.length < 10 || isNaN($phoneNumber.split("+").join("").split("-").join("")) ) $message += "Vul een geldig telefoonnummer in\n";
		if ( $message != "" ) {
			alert($message);
		} else {
			this.load("website/inc/callme.php", "name="+$name+"&phoneNumber="+$phoneNumber, "POST", ajax.onCallMeBack);
		}
	},

	// callback function for call-me-back
	onCallMeBack: function($response) {
		if ( $response.indexOf("response=true") != -1 ) {
			alert("Uw verzoek tot terugbellen is verzonden, hartelijk dank voor uw interesse!");
		} else {
			alert("Er is een fout opgetreden bij het verzenden van uw verzoek, probeer het later opnieuw...");
		}
	},

	// load all projects (projects.php)
	loadProjects: function() {
		ajax.load("website/inc/modulexml.php?module=projects&key=" + Math.floor(Math.random() * 99999), "", "GET", ajax.onLoadProject);
	},

	// project load callback
	onLoadProject: function($response) {
		var $projects = $response.split('<project id="');
		for ( var i = 1; i < $projects.length; i++ ) {
			var $temp = new Object();
			$temp.title = $projects[i].split("<title><![CDATA[")[1].split("]]>")[0];
			$temp.clientName = $projects[i].split("<clientName><![CDATA[")[1].split("]]>")[0];
			$temp.brandName = $projects[i].split("<brandName><![CDATA[")[1].split("]]>")[0];
			$temp.work = $projects[i].split("<work><![CDATA[")[1].split("]]>")[0];
			$temp.technology = $projects[i].split("<technology><![CDATA[")[1].split("]]>")[0];
			$temp.screenshot = $projects[i].split("<screenshot><![CDATA[")[1].split("]]>")[0];
			$temp.icon = $projects[i].split("<icon><![CDATA[")[1].split("]]>")[0];
			$temp.clientLogo = $projects[i].split("<clientLogo><![CDATA[")[1].split("]]>")[0];
			$temp.launchURL = $projects[i].split("<launchURL><![CDATA[")[1].split("]]>")[0];
			$temp.partners = $projects[i].split("<partners><![CDATA[")[1].split("]]>")[0];
			$temp.id = $projects[i].split('"')[0];
			ajax.projectCollection.push($temp);
		}
		if ( window.location.href.split("?project=")[1] ) {
			ajax.showProject(window.location.href.split("?project=")[1].split("#")[0]);
		} else {
			ajax.showProject(0);
		}
	},

	showProject: function($project, $page) {
		for ( var i = 0; i < ajax.projectCollection.length; i++ ) {
			if ( ajax.projectCollection[i].id == $project ) {
				var $temp = ajax.projectCollection[i];
			}
		}
		if ( !$page ) {
			this.currentProject = $project;
			functions.gId("project_title").innerHTML = $temp.title;
			functions.gId("project_screenshot").src = $temp.screenshot.split("/website").join("");
			functions.gId("project_screenshot").title = "Visit " + $temp.launchURL;
			functions.gId("project_link").href = $temp.launchURL;
			var $clientinfo = '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
			$clientinfo += '<tr><td valign="top" width="84"><span class="grey">Merk:</span></td><td>' + $temp.brandName +'</td></tr>';
			$clientinfo += '<tr><td valign="top"><span class="grey">Klant:</span></td><td>' + $temp.clientName +'</td></tr>';
			$clientinfo += '<tr><td valign="top"><span class="grey">Partner:</span></td><td>' + $temp.partners +'</td></tr>';
			$clientinfo += '<tr><td valign="top"><span class="grey">Wat:</span></td><td>' + $temp.work +'</td></tr>';
			$clientinfo += '<tr><td valign="top"><span class="grey">Technologie:</span></td><td>' + $temp.technology +'</td></tr></table>';
			functions.gId("project_clientinfo").innerHTML = $clientinfo;
		}
		var $count = 0;
		functions.gId("projects_pagenumber").innerHTML = this.currentProjectPage + "/" + Math.ceil(this.projectCollection.length/8);
		for ( var i = (this.currentProjectPage * 8)-8; i < (this.currentProjectPage * 8); i++ ) {
			if ( i < this.projectCollection.length ) {
				functions.gId("project_slot" + $count).innerHTML = '<img class="project_icon" src="' + this.projectCollection[i].icon.split("/website").join("") + '" onclick="ajax.showProject('+this.projectCollection[i].id+')" />';
			} else {
				functions.gId("project_slot" + $count).innerHTML = "";
			}
			$count++;
		}
	},

	previousProjectPage: function() {
		if ( this.currentProjectPage > 1 ) this.currentProjectPage--;
		this.showProject((this.currentProjectPage * 8)-8, true);
	},

	nextProjectPage: function() {
		if ( this.currentProjectPage < Math.ceil(this.projectCollection.length / 8) ) this.currentProjectPage++;
		this.showProject((this.currentProjectPage * 8)-8, true);
	},

	// load all clients (clients.php)
	loadClients: function() {
		ajax.load("website/inc/modulexml.php?module=clients&key=" + Math.floor(Math.random() * 99999), "", "GET", ajax.onLoadClients);
	},

	// clients load callback
	onLoadClients: function($response) {
		var $clients = $response.split('<client id="');
		var $html = "";
		for ( var i = 1; i < $clients.length; i++ ) {
			var $temp = new Object();
			$temp.clientName = $clients[i].split("<clientName><![CDATA[")[1].split("]]>")[0];
			$temp.clientLogo = $clients[i].split("<clientLogo><![CDATA[")[1].split("]]>")[0];
			$temp.id = $clients[i].split('"')[0];
			ajax.clientCollection.push($temp);
			$html += '<div class="client"><img src="'+$temp.clientLogo+'" width="100" height="100" /><br />'+$temp.clientName+'</div>';
		}
		functions.gId("clients_logos").innerHTML = $html;
	},

	xmlhttp: false

}

var tube = {

	playlist: new Array("T81vxpFjL9w", "N4oHmtCedTo", "Hi3QVQDdTEE", "u4bFavH6MGY", "stF7D2Dva1E", "9URKThGPaR8"),
	currentItem: 0,
	playerElement: undefined,
	isBig: false,

	init: function($element) {
		this.playerElement = $element;
		this.load(this.playlist[this.currentItem], true);
	},

	load: function($videoId, $paused) {
		if ( this.playerElement ) {
			this.playerElement.loadVideoById($videoId);
			if ( $paused ) this.playerElement.pauseVideo();
			functions.gId("tv_number").innerHTML = (this.currentItem+1) + "/" + (this.playlist.length);
		}
	},

	previous: function() {
		if ( this.playerElement ) {
			if ( this.currentItem > 0 ) {
				this.currentItem--;
			} else {
				this.currentItem = this.playlist.length-1;
			}
			functions.gId("tv_note").style.display = "none";
			this.load(this.playlist[this.currentItem]);
		}
	},

	next: function() {
		if ( this.playerElement ) {
			if ( this.currentItem < this.playlist.length-1 ) {
				this.currentItem++;
			} else {
				this.currentItem = 0;
			}
			functions.gId("tv_note").style.display = "none";
			this.load(this.playlist[this.currentItem]);
		}
	},

	pause: function() {
		if ( this.playerElement ) {
			this.playerElement.pauseVideo();
		}
	},

	play: function() {
		if ( this.playerElement ) {
			functions.gId("tv_note").style.display = "none";
			this.playerElement.playVideo();
		}
	},

	stop: function() {
		if ( this.playerElement ) {
			this.playerElement.stopVideo();
		}
	},

	setSize: function($w, $h) {
		this.isBig = ( $w != 220 && $h != 191 );
		if ( this.playerElement ) {
			var $tds = functions.gId("box3").getElementsByTagName("TD");
			for ( var i = 0; i < $tds.length; i++ ) {
				if ( $tds[i].className == "grid1" || $tds[i].className == "grid2" || $tds[i].className == "grid3" ) {
					$tds[i].height = $h;
				} else if ( $tds[i].className == "grid4" || $tds[i].className == "grid5" || $tds[i].className == "grid6" ) {
					if ( $tds[i].className == "grid5" ) {
						$tds[i].width = (($w - 44) > 1) ? ($w-44) : 1;
					}
					$tds[i].height = (($h - 44) > 1) ? ($h-44) : 1;
					$tds[i].style.height = ($h-44) + "px";
				}
			}
			functions.gId("box3").style.width = ($w) + "px";
			functions.gId("box3").style.height = ($h) + "px";
			functions.gId("ytplayer").style.width = ($w-22) + "px";
			functions.gId("ytplayer").style.height = ($h-22) + "px";
			this.playerElement.width = ($w - 22);
			this.playerElement.height = ($h - 22);
			this.playerElement.setSize($w, $h);
		}
	},

	toggleFullscreen: function() {
		if ( this.playerElement ) {
			if ( this.isBig ) {
				this.setSize(220, 191);
				functions.gId("box3").style.left = "610px";
				functions.gId("box3").style.top = "5px";
			} else {
				this.setSize(800, 604);
				functions.gId("box3").style.left = "10px";
				functions.gId("box3").style.top = "5px";
				widgets.dragHighestZ++;
				functions.gId("box3").style.zIndex = widgets.dragHighestZ;
			}
		}
	}

}