/**
* @projectDescription A quicker way to write JavaScript
*
* @author Wouter Smit
* @version 2.1
*/
var qjs = {
// Determines whether qjs is done loading
initialized: false,
ready: false,
onloadFired: false,
// GET parameters
GET: [],
/**
* Add 'prototype' functions to elements
* @return {null}
*/
init: function() {
if ( !qjs.ready ) {
qjs.ready = true;
qjs._getParameters();
var $all = qjs._tag("*");
for ( var i=0; i < $all.length; i++ ) {
qjs._addHandlers($all[i]);
}
if(qjs.onInit)qjs.onInit();
if(qjs.oninit)qjs.oninit();
if(qjs.onloadFired == false ) {
if ( qjs.onLoad ) {
qjs.onLoad();
qjs.onloadFired = true;
}
if ( qjs.onload ) {
qjs.onload();
qjs.onloadFired = true;
}
}
}
},
/**
* Retrieves all GET parameters ?a=1&b=2
*/
_getParameters: function() {
var $loc = window.location.href;
var $parts = $loc.split("?").join("&").split("&");
for ( var i = 0; i < $parts.length; i++ ) {
if ( $parts[i].indexOf("=") == -1 ) {
qjs.GET[$parts[i].split("=")[0]] = "";
} else {
qjs.GET[$parts[i].split("=")[0]] = $parts[i].split("=")[1];
}
}
},
/**
* Adds special qjs proto functions to an element
* @param {Mixed} $element element
*/
_addHandlers: function($element) {
if ( $element ) {
$element.create = qjs._create;
$element.append = qjs._append;
$element.css = qjs._css;
$element.html = qjs._html;
$element.previous = qjs._previous;
$element.next = qjs._next;
$element.show = qjs._show;
$element.hide = qjs._hide;
$element.toggle = qjs._toggle;
$element.fade = qjs._fade;
$element.alpha = qjs._setAlpha;
$element.tween = qjs._tween;
$element.setBounds = qjs._setBounds;
$element.hasHandlers = true;
}
},
/**
* Creates an element, adding all qjs proto functions
* @param {Mixed} $element element
* @param {Mixed} $type tagname
* @return {Mixed} created element
*/
_create: function($type) {
// If called from element.create
if (arguments.length == 0) {
$type = this;
}
var $createdElement = document.createElement($type.toUpperCase());
qjs._addHandlers($createdElement);
return $createdElement;
},
/**
* Appends element a to element b (appendChild), adding all qjs proto functions
* @param {Mixed} $element element
* @return {Mixed} appended element
*/
_append: function($elementA, $elementB) {
// If called from element.append
if (arguments.length == 1) {
$elementB = $elementA;
$elementA = this;
}
// Create the element when element b is a string
if ( typeof($elementB) == "string" ) {
var $temp = $elementB;
$elementB = qjs._create($temp);
}
$elementA.appendChild($elementB);
if ( !$elementB.hadHandlers ) qjs._addHandlers($elementB);
return $elementB;
},
/**
* Sets a string of css code to an element
* @param {Mixed} $element element
* @param {String} $cssCode CSS code
*/
_css: function($element, $cssCode) {
// If called from element.css
if (arguments.length == 1) {
$cssCode = $element;
$element = this;
}
// Create an array of all properties so set
if ( $element ) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
var $cssArray = $cssCode.split(";");
for ( var i=0; i < $cssArray.length; i++ ) {
var $prop = $cssArray[i].substr(0,$cssArray[i].indexOf(":"));
var $val = $cssArray[i].substr($cssArray[i].indexOf(":")+1);
while ( $prop.indexOf("-") != -1 ) {
var $propPart = $prop.substr($prop.indexOf("-")+1,1);
$prop = $prop.split("-"+$propPart).join($propPart.toUpperCase());
}
if ( $prop != "" ) $element["style"][$prop] = $val;
}
return $element;
}
},
/**
* Set the innerHTML of an element
* @param {Mixed} $element element
* @param {String} $htmlCode HTML code
* @return {String} innerHTML
*/
_html: function($element, $htmlCode) {
// If called from element.html
if (arguments.length == 1) {
$htmlCode = $element;
$element = this;
}
if ( $element ) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
if ( $htmlCode ) $element.innerHTML = $htmlCode;
// Update handlers for any elements that are created in the innerHTML
var $innerElements = qjs._tag("*", $element);
for ( var i = 0; i < $innerElements.length; i++ ) {
if ( !$innerElements[i].hasHandlers ) qjs._addHandlers($innerElements[i]);
}
return $element.innerHTML;
}
},
/**
* Get all elements with given tagNames
* @param {String} $tagName tagName
* @param {Mixed} [$element] element (default=document)
* @return {Array}
*/
_tag: function($tagName, $element) {
if(!$element)$element = document;
if ( $element ) {
return $element.getElementsByTagName($tagName);
} else {
return [];
}
},
/**
* Get element with given id
* @param {String} $id id of the element
* @return {Mixed}
*/
_id: function($id) {
if ( $id == "*" ) {
var $out = [];
var $all = qjs._tag("*");
for ( var i=0; i < $all.length; i++ ) {
if ($all[i].id ) {
if ( !$all[i].hasHandlers ) qjs._addHandlers($all[i]);
$out.push($all[i]);
}
}
return $out;
} else {
return document.getElementById($id);
}
},
/**
* Get all elements with given name
* @param {String} $name name
* @return {Array}
*/
_name: function($name) {
var $all = qjs._tag("*");
var i = 0;
if ( $name == "*" ) {
var $out = [];
for ( i=0; i < $all.length; i++ ) {
if ($all[i].name ) {
if ( !$all[i].hasHandlers ) qjs._addHandlers($all[i]);
$out.push($all[i]);
}
}
return $out;
} else {
for ( i=0; i < $all.length; i++ ) {
if ($all[i].name ) {
if ($all[i].name == $name) {
if ( !$all[i].hasHandlers ) qjs._addHandlers($all[i]);
return $all[i];
}
}
}
}
},
/**
* Get all elements with given class name
* @param {String} $className class name
* @return {Array}
*/
_class: function($className) {
var $out = [];
var $all = qjs._tag("*");
for ( var i=0; i < $all.length; i++ ) {
if ($all[i].className ) {
var $classParts = $all[i].className.split(" ");
for ( var j=0; j < $classParts.length; j++ ) {
if ( $classParts[j] == $className ) {
if ( !$all[i].hasHandlers ) qjs._addHandlers($all[i]);
$out.push($all[i]);
}
}
}
}
return $out;
},
/**
* previousSibling with textNode filter and optional tagName filter
* @param {String} $element element
* @param {Mixed} [$tag] tagName (optional)
*/
_previous: function($element, $tag) {
// If called from element.previous
if ( this.tagName ) {
$tag = $element;
$element = this;
}
if ( !$element ) return;
if ( !$element.previousSibling ) return;
var $el = $element.previousSibling;
if ( $tag ) {
$tag = $tag.toUpperCase();
while( $el.nodeType!=1 || $el.tagName != $tag ) {
$el = $el.previousSibling;
}
} else {
while( $el.nodeType!=1 ) {
$el = $el.previousSibling;
}
}
if ( !$el.hasHandlers ) qjs._addHandlers($el);
return $el;
},
/**
* nextSibling with textNode filter and optional tagName filter
* @param {String} $element element
* @param {Mixed} [$tag] tagName (optional)
*/
_next: function($element, $tag) {
// If called from element.next
if ( this.tagName ) {
$tag = $element;
$element = this;
}
if ( !$element ) return;
if ( !$element.nextSibling ) return;
var $el = $element.nextSibling;
if ( $tag ) {
$tag = $tag.toUpperCase();
while( $el.nodeType!=1 || $el.tagName != $tag ) {
$el = $el.nextSibling;
}
} else {
while( $el.nodeType!=1 ) {
$el = $el.nextSibling;
}
}
if ( !$el.hasHandlers ) qjs._addHandlers($el);
return $el;
},
/**
* returns a runtime CSS style property
* @param {String} $element element
* @param {String} $prop property
* @return {Mixed} [$propval] property value
*/
_getStyle: function($element, $prop) {
var $propval = undefined;
if ( !$element ) return null;
if ( $element.currentStyle ) {
$propval = $element.currentStyle[$prop];
} else if (window.getComputedStyle) {
$propval = document.defaultView.getComputedStyle($element,null).getPropertyValue($prop);
}
return $propval;
},
/**
* shows an element using style.display (block)
* @param {String} $element element
*/
_show: function($element) {
// If called from element.show
if ( this.tagName ) {
$element = this;
}
if ($element) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
$element.style.display = ($element.oldDisplay) ? ($element.oldDisplay != "none") ? $element.oldDisplay : "block" : "block";
}
return $element;
},
/**
* hides an element using style.display (none)
* @param {String} $element element
*/
_hide: function($element) {
// If called from element.hide
if ( this.tagName ) {
$element = this;
}
if ($element) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
$element.oldDisplay = qjs._getStyle($element,"display");
$element.style.display = "none";
}
return $element;
},
/**
* toggles style.display (none or block)
* @param {String} $element element
*/
_toggle: function($element) {
// If called from element.toggle
if ( this.tagName ) {
$element = this;
}
if ($element) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
if ( qjs._getStyle($element,"display") != "none" || qjs._getStyle($element,"display") == "" ) {
$element.hide();
} else {
$element.show();
}
}
return $element;
},
/**
* fade in/out the given element, based on display :block, :'' or :none
* @param {String} $element element
* @param {Int} [$duration] duration=1 (optional)
* @param {String} [$direction] direction (in/out) (optional)
* @param {Function} [$callback] callback function (optional)
*/
_fade: function($element, $duration, $direction, $callback) {
// If called from element.fade
if ( this.tagName ) {
$callback = $direction;
$direction = $duration;
$duration = $element;
$element = this;
}
if ( !$element ) return;
if ( !$element.hasHandlers ) qjs._addHandlers($element);
if ( !$duration ) $duration = 1;
if ( !$element.currentAlpha ) $element.currentAlpha = (qjs._getStyle($element,"display") == "block" || qjs._getStyle($element,"display") == "") ? 100 : 0;
if ( !$element.fadeDirection ) $element.fadeDirection = ($element.currentAlpha==100) ? "out" : "in";
var $targetDirection = ($direction) ? $direction : $element.fadeDirection;
if ( $targetDirection == "in" ) {
$element.currentAlpha += 100 / ($duration * 24);
if ( $element.currentAlpha < 100 ) {
qjs._timeout(qjs._fade, (1 / 24) * 1000, $element, $duration, $direction, $callback);
} else {
$element.currentAlpha = 100;
$element.fadeDirection = "out";
if ( $callback ) $callback();
}
if ( $element.currentAlpha > 0 ) $element.show();
} else {
$element.currentAlpha -= 100 / ($duration * 24);
if ( $element.currentAlpha > 0 ) {
qjs._timeout(qjs._fade, (1 / 24) * 1000 ,$element, $duration, $direction, $callback);
} else {
$element.currentAlpha = 0;
$element.fadeDirection = "in";
$element.hide();
if ( $callback ) $callback();
}
}
qjs._setAlpha($element,$element.currentAlpha);
return $element;
},
/**
* apply alpha opacity to given element
* @param {String} $element element
* @param {Int} $alpha alpha
*/
_setAlpha: function($element, $alpha) {
// If called from element.alpha
if ( this.tagName ) {
$alpha = $element;
$element = this;
}
if ( $element ) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
$element.style.filter = ($element.currentAlpha==100) ? "" : "alpha(opacity=" + Math.round($alpha) + ")";
$element.style.MozOpacity = $element.style.opacity = $alpha / 100;
}
return $element;
},
/**
* tween bounds of the given element
* @param {String} $element element
* @param {Object} [$bounds] bounds
* @param {Int} duration=1 (optional)
* @param {Function} [$callback] callback function (optional)
*/
_tween: function($element, $bounds, $duration, $callback) {
// If called from element.tween
if ( this.tagName ) {
$callback = $duration;
$duration = $bounds;
$bounds = $element;
$element = this;
}
if ( !$element ) return;
if ( !$element.hasHandlers ) qjs._addHandlers($element);
if ( !$duration ) $duration = 1;
if ( !$element.bounds ) $element.bounds = {x:$element.offsetLeft, y:$element.offsetTop, width:$element.offsetWidth, height:$element.offsetHeight};
if ( !$bounds.x ) $bounds.x = $element.bounds.x;
if ( !$bounds.y ) $bounds.y = $element.bounds.y;
if ( !$bounds.width ) $bounds.width = $element.bounds.width;
if ( !$bounds.height ) $bounds.height = $element.bounds.height;
if ( $element.bounds.x < $bounds.x ) {
$element.bounds.x = Math.ceil($element.offsetLeft + (($bounds.x - $element.bounds.x) / ($duration * 2)));
} else if ( $element.bounds.x > $bounds.x ) {
$element.bounds.x = Math.ceil($element.offsetLeft - (($element.bounds.x - $bounds.x) / ($duration * 2)));
}
if ( $element.bounds.y < $bounds.y ) {
$element.bounds.y = Math.ceil($element.offsetTop + (($bounds.y - $element.bounds.y) / ($duration * 2)));
} else if ( $element.bounds.y > $bounds.y ) {
$element.bounds.y = Math.ceil($element.offsetTop - (($element.bounds.y - $bounds.y) / ($duration * 2)));
}
if ( $element.bounds.width < $bounds.width ) {
$element.bounds.width = Math.ceil($element.offsetWidth + (($bounds.width - $element.bounds.width) / ($duration * 2)));
} else if ( $element.bounds.width > $bounds.width ) {
$element.bounds.width = Math.ceil($element.offsetWidth - (($element.bounds.width - $bounds.width) / ($duration * 2)));
}
if ( $element.bounds.height < $bounds.height ) {
$element.bounds.height = Math.ceil($element.offsetHeight + (($bounds.height - $element.bounds.height) / ($duration * 2)));
} else if ( $element.bounds.height > $bounds.height ) {
$element.bounds.height = Math.ceil($element.offsetHeight - (($element.bounds.height - $bounds.height) / ($duration * 2)));
}
if ( $element.bounds.x != $bounds.x || $element.bounds.y != $bounds.y || $element.bounds.width != $bounds.width || $element.bounds.height != $bounds.height ) {
qjs._setBounds($element,$element.bounds);
qjs._timeout(qjs._tween, (1 / 24) * 1000, $element, $bounds, $duration, $callback);
} else {
$element.bounds = {x:$element.offsetLeft, y:$element.offsetTop, width:$element.offsetWidth, height:$element.offsetHeight};
if ( $callback ) $callback();
}
return $element;
},
/**
* apply x,y,w,h dimension (bounds) to given element
* @param {String} $element element
* @param {Obj} $bounds bounds
*/
_setBounds: function($element, $bounds) {
// If called from element.setBounds
if ( this.tagName ) {
$bounds = $element;
$element = this;
}
if ( $element ) {
if ( !$element.hasHandlers ) qjs._addHandlers($element);
$element.css("left:" + $bounds.x + "px");
$element.css("top:" + $bounds.y + "px");
$element.css("width:" + $bounds.width + "px");
$element.css("height:" + $bounds.height + "px");
}
return $element;
},
/**
* Add an eventListener or attachEvent, depending on browser
* @param {Mixed} $element element
* @param {String} $eventName event name
* @param {Function} $eventFunction function
*/
_listener: function($element, $eventName, $eventFunction) {
if ($element) {
if ( $element.addEventListener ) {
$element.addEventListener($eventName, $eventFunction, false);
} else if ($element.attachEvent) {
$element.attachEvent("on" + $eventName, $eventFunction);
}
}
},
/**
* setTimeout with parameter (argument) support
* @param {Mixed} $function function
* @param {String} $delay delay
* @param {Array} $restParam restParam
*/
_timeout: function($function, $delay) {
var $rest = arguments;
var $apply = [];
for ( var i=2; i < $rest.length; i++ ) {
$apply.push($rest[i]);
}
var $func = function(){$function.apply(this,$apply)};
setTimeout($func, $delay);
},
/**
* setInterval with parameter (argument) support
* @param {Mixed} $function function
* @param {String} $interval interval
* @param {Array} $restParam restParam
*/
_interval: function($function, $interval) {
var $rest = arguments;
var $apply = [];
for ( var i=2; i < $rest.length; i++ ) {
$apply.push($rest[i]);
}
var $func = function(){$function.apply(this,$apply)};
setInterval($func, $interval);
},
/**
* foreach array loop
* @param {Array} $arr
*/
_each: function($arr, $function) {
if ( $function ) {
for ( var i = 0; i < $arr.length; i++ ) $function($arr[i]);
}
var $rest = arguments;
var $apply = [];
for ( var i = 1; i < $rest.length; i++ ) {
$apply.push($rest[i]);
}
$arr.create = function(){return qjs._callFromEach($arr, qjs._create, arguments)}
$arr.append = function(){return qjs._callFromEach($arr, qjs._append, arguments)}
$arr.css = function(){return qjs._callFromEach($arr, qjs._css, arguments)}
$arr.html = function(){return qjs._callFromEach($arr, qjs._html, arguments)}
$arr.previous = function(){return qjs._callFromEach($arr, qjs._previous, arguments)}
$arr.next = function(){qjs._callFromEach($arr, qjs._next, arguments)}
$arr.show = function(){return qjs._callFromEach($arr, qjs._show, arguments)}
$arr.hide = function(){return qjs._callFromEach($arr, qjs._hide, arguments)}
$arr.toggle = function(){return qjs._callFromEach($arr, qjs._toggle, arguments)}
$arr.fade = function(){return qjs._callFromEach($arr, qjs._fade, arguments)}
$arr.alpha = function(){return qjs._callFromEach($arr, qjs._alpha, arguments)}
return $arr;
},
/**
* proto function called from array loop
* @param {Mixed} $function function
*/
_callFromEach: function($array, $function, $args) {
for ( var i = 0; i < $array.length; i++ ) {
var $rest = $args;
var $apply = [];
$apply[0] = $array[i];
for ( var j = 0; j < $rest.length; j++ ) {
$apply.push($rest[j]);
}
$function.apply(this,$apply);
}
return $array;
},
/**
* Add infinite window.onload handlers
* @param {Function} $function function
*/
_addOnload: function($function) {
if (!qjs.initialized) {
qjs.initialized = true;
if ( document.all) {
qjs._listener(window, "load", $function);
qjs._listener(window, "load", qjs.init);
return null;
} else {
qjs._listener(window, "load", qjs.init);
}
}
qjs._listener(window, "load", $function);
return null;
}
}
qjs._addOnload(qjs.init);
// Show/hide menus
var actsub=null;
var timerID=null;
function toggleSubmenu($button) {
actsub=$button.id.split('n').join('s');
var $sub = qjs._id(actsub);
if ( $sub ) {
closeSubmenus();
$sub.toggle();
$button.className = "menubutton_active";
$sub.style.left = $button.offsetLeft + "px";
$("#"+actsub+" object,#"+actsub+" embed").attr( "height",24 + (24 * $("#"+actsub).find(".submenu_items").children().length) );
}
}
function chkToggleMenu(){
clearTimeout(timerID);
timerID=setTimeout(closeTimed,200);
}
function chkToggleSubmenu(){
actsub=null;
clearTimeout(timerID);
timerID=setTimeout(closeTimed,200);
}
function closeTimed(){
clearTimeout(timerID);
if(!actsub) closeSubmenus();
}
function setActiveSub($subbox){
clearTimeout(timerID);
actsub=$subbox.id;
}
function clearTimer(){
clearTimeout(timerID);
actsub=null;
}
function closeMenus(e) {
var $target = (window.event) ? event.srcElement : e.target;
if ( $target.className ) {
if ($target.className.indexOf("menubutton") != -1) return;
}
closeSubmenus();
}
function closeSubmenus() {
var $subs = qjs._class("submenu");
var $menus = qjs._class("menubutton_active");
var i;
for ( i=0; i < $subs.length; i++ ) {
$subs[i].style.display = "none";
}
for ( i=0; i < $menus.length; i++ ) {
$menus[i].className = "menubutton";
}
}
// Initialize fadebox overlay
qjs.onLoad = function() {
scrollbar.init();
}
// Add events to elements
qjs._addOnload(function() {
if ( qjs._id("topbar_sitesearch_field") ) {
qjs._id("topbar_sitesearch_field").onfocus = function(){if(this.title){if(this.value.toLowerCase()==this.title.toLowerCase()){this.value="";this.style.color="#FFF"}}}
qjs._id("topbar_sitesearch_field").onblur = function(){if(this.title){if(this.value==""){this.value=this.title;this.style.color="#D1E5F3"}}}
}
if ( qjs._id("content_search_field") ) {
qjs._id("content_search_field").onfocus = function(){if(this.title){if(this.value.toLowerCase()==this.title.toLowerCase()){this.value="";this.style.color="#174055"}}}
qjs._id("content_search_field").onblur = function(){if(this.title){if(this.value==""){this.value=this.title;this.style.color="#D1D1D1"}}}
}
var $oldMouseUp;
if ( document.onmouseup != undefined ) $oldMouseUp = document.onmouseup;
document.onmouseup = function(e) {
if ( $oldMouseUp ) $oldMouseUp(e);
closeMenus(e);
scrollbar.refresh();
}
});
// ***********************************
// SCROLLBARS
var scrollbar = {
// interval timer
scrollTimer: 0,
// drag variables
isDragging: false,
dragElementStartY: 0,
dragMouseY: 0,
dragMouseStartY: 0,
dragElement: undefined,
// scrollbar collection
scrollbarCollection: new Array(),
// preserve existing handlers
handlers: new Object(),
// initialize function
init: function() {
var $all = document.getElementsByTagName("*");
for ( var i = 0; i < $all.length; i++ ) {
if ( $all[i].className.indexOf("scroll_box") != -1 ) {
this.addScrollbar($all[i]);
}
}
// mouse wheel IE/OP
if ( document.onmousewheel != undefined ) this.handlers.oldMouseWheel = document.onmousewheel;
document.onmousewheel = function() {
if ( scrollbar.handlers.oldMouseWheel ) scrollbar.handlers.oldMouseWheel();
scrollbar.wheelHandler();
}
// mouse wheel FF/SAF
if ( window.addEventListener ) window.addEventListener('DOMMouseScroll', function(e){scrollbar.wheelHandler(e)}, false);
// disable text selection
if ( document.onselectstart != undefined ) this.handlers.oldSelectStart = document.onselectstart;
document.onselectstart = function() {
if ( scrollbar.handlers.oldSelectStart ) scrollbar.handlers.oldSelectStart();
if ( window.event) {
if ( event.srcElement ) {
var $child = scrollbar.childOfScrollBox(event.srcElement);
if ($child && scrollbar.isDragging) return false;
}
}
}
// drag release handler
if ( document.onmouseup != undefined ) this.handlers.oldMouseUp = document.onmouseup;
document.onmouseup = function(e) {
if ( scrollbar.handlers.oldMouseUp ) scrollbar.handlers.oldMouseUp(e);
scrollbar.stopDrag();
}
// ondragstart
document.ondragstart = function(e){
var $target = (window.event) ? event.srcElement : e.target;
if (scrollbar.childOfScrollBox($target)) {
if ( window.event ) {
event.returnValue = false;
} else if (e) {
e.preventDefault();
}
}
}
// drag move handler
if ( document.onmousemove != undefined ) this.handlers.oldMouseMove = document.onmousemove;
document.onmousemove = function(e) {
if ( scrollbar.handlers.oldMouseMove ) scrollbar.handlers.oldMouseMove(e);
scrollbar.dragMouseY = ( window.event ) ? event.clientY : e.pageY;
if ( scrollbar.isDragging ) {
if ( scrollbar.dragMouseStartY == undefined ) scrollbar.dragMouseStartY = scrollbar.dragMouseY;
}
}
},
refresh: function() {
$(scrollbar.scrollbarCollection).each(function(){ if(this.content.offsetHeight>this.box.offsetHeight){$(this.bar).show();$(this.slider).show(); $(this.bar).parent().find(".scroll_arrow_up").show(); $(this.bar).parent().find(".scroll_arrow_down").show();this.slider.style.height=Math.max(10,Math.round((this.box.offsetHeight/this.content.offsetHeight)*(this.content.parentNode.offsetHeight-34)))+"px"}});
},
// draw the scrollbar
addScrollbar: function($element) {
var $bar = document.createElement("DIV");
var $slider = document.createElement("DIV");
var $arrowUp = document.createElement("DIV");
var $arrowDown = document.createElement("DIV");
with ( $bar ) {
className = "scroll_bar";
style.position = "absolute";
style.right = "2px";
style.top = "16px";
style.width = "14px";
style.height = ($element.offsetHeight - 34) + "px";
style.backgroundColor = "#5F9BB9";
style.border = "1px solid #FFF";
}
with ( $slider ) {
className = "scroll_slider";
style.position = "absolute";
style.left = "0px";
style.top = "0px";
style.width = "10px";
style.height = "10px";
style.backgroundColor = "#D1E5F3";
style.cursor = "pointer";
style.border = "2px solid #5F9BB9";
style.borderRadius = "5px";
style.WebkitBorderRadius = "5px";
style.MozBorderRadius = "5px";
}
if ( navigator.userAgent.indexOf("MSIE") != -1 ) {
$slider.style.backgroundImage = 'url("/img/scroll_slider_rounded.png")';
var $sliderBottom = document.createElement("DIV");
$sliderBottom.style.position = "absolute";
$sliderBottom.style.left = "0px";
$sliderBottom.style.bottom = "0px";
$sliderBottom.style.width = "10px";
$sliderBottom.style.height = "6px";
$sliderBottom.style.backgroundImage = 'url("/img/scroll_slider_rounded.png")';
$sliderBottom.style.backgroundPosition = "left bottom";
$slider.appendChild($sliderBottom);
}
//$slider.onmouseover = function(){this.style.backgroundColor = "#FFF"}
//$slider.onmouseout = function(){this.style.backgroundColor = "#D1E5F3"}
with ( $arrowUp ) {
className = "scroll_arrow_up";
style.position = "absolute";
style.right = "2px";
style.top = "1px";
style.width = "14px";
style.height = "14px";
style.backgroundColor = "#5F9BB9";
style.backgroundImage = 'url("/img/scroll_arrows.png")';
style.backgroundPosition = "0px 0px";
style.cursor = "pointer";
style.border = "1px solid #FFF";
}
$arrowUp.onmouseover = function(){this.style.backgroundPosition = "0px -13px"}
$arrowUp.onmouseout = function(){this.style.backgroundPosition = "0px 0px"}
with ( $arrowDown ) {
className = "scroll_arrow_down";
style.position = "absolute";
style.right = "2px";
style.bottom = "1px";
style.width = "14px";
style.height = "14px";
style.backgroundColor = "#5F9BB9";
style.backgroundImage = 'url("/img/scroll_arrows.png")';
style.backgroundPosition = "-14px 0px";
style.cursor = "pointer";
style.border = "1px solid #FFF";
}
$arrowDown.onmouseover = function(){this.style.backgroundPosition = "-14px -13px"}
$arrowDown.onmouseout = function(){this.style.backgroundPosition = "-14px 0px"}
var $divs = $element.getElementsByTagName("DIV");
for ( var i = 0; i < $divs.length; i++ ) {
if ( $divs[i].className.indexOf("scroll_content") != -1 ) var $content = $divs[i];
}
var $object = {box:$element, bar:$bar, slider:$slider, content:$content};
$bar.onmousedown = function(e) {
var $target = (window.event) ? event.srcElement : e.target;
if ($target != $object.slider) {
var $y = scrollbar.getRelativeCoordinates(e, $object.bar).y;
$object.slider.style.top = ($y - ($object.slider.offsetHeight/2)) + "px";
if ( $object.slider.offsetTop < 0 ) $object.slider.style.top = "0px";
if ( $object.slider.offsetTop > ($object.bar.offsetHeight - $object.slider.offsetHeight - 2) ) $object.slider.style.top = ($object.bar.offsetHeight - $object.slider.offsetHeight - 2) + "px";
scrollbar.scrollEvent($object);
}
}
$object.slider.style.height = Math.max(10,Math.round(($object.box.offsetHeight / $object.content.offsetHeight) * ($element.offsetHeight - 34))) + "px";
$slider.onmousedown = function() {
scrollbar.startDrag($object);
}
$arrowUp.onclick = $arrowUp.ondblclick = function() {
scrollbar.scrollUp($object);
}
$arrowUp.onmousedown = function() {
clearTimeout(scrollbar.scrollTimer);
scrollbar.scrollTimer = setTimeout(function() {
scrollbar.scrollTimer = setInterval(function() {
scrollbar.scrollUp($object);
}, 100);
}, 300);
}
$arrowDown.onclick = $arrowDown.ondblclick = function() {
scrollbar.scrollDown($object);
}
$arrowDown.onmousedown = function() {
clearTimeout(scrollbar.scrollTimer);
scrollbar.scrollTimer = setTimeout(function() {
scrollbar.scrollTimer = setInterval(function() {
scrollbar.scrollDown($object);
}, 100);
}, 300);
}
if ( $object.content.offsetHeight <= $object.box.offsetHeight ) {
$bar.style.display = $arrowUp.style.display = $arrowDown.style.display = "none";
}
$bar.appendChild($slider);
$element.appendChild($bar);
$element.appendChild($arrowUp);
$element.appendChild($arrowDown);
this.scrollbarCollection.push($object);
},
// slider drag
startDrag: function($scroll) {
clearInterval(scrollbar.scrollTimer);
this.dragMouseStartY = undefined;
this.dragElementStartY = $scroll.slider.offsetTop;
this.isDragging = true;
this.dragElement = $scroll;
this.dragElement.content.style.MozUserSelect = this.dragElement.content.style.KHTMLUserSelect = "none";
this.scrollTimer = setInterval(function(){scrollbar.dragEvent($scroll)}, 50);
},
// stop dragging
stopDrag: function() {
clearInterval(scrollbar.scrollTimer);
if ( this.dragElement ) {
this.dragElement.content.style.MozUserSelect = this.dragElement.content.style.KHTMLUserSelect = "text";
}
this.dragElement = undefined;
this.isDragging = false;
},
// drag event
dragEvent: function($scroll) {
if ( !isNaN(this.dragElementStartY + (this.dragMouseY - this.dragMouseStartY))) $scroll.slider.style.top = (this.dragElementStartY + (this.dragMouseY - this.dragMouseStartY)) + "px";
if ( $scroll.slider.offsetTop < 0 ) $scroll.slider.style.top = "0px";
if ( $scroll.slider.offsetTop > ($scroll.bar.offsetHeight - $scroll.slider.offsetHeight - 2) ) $scroll.slider.style.top = ($scroll.bar.offsetHeight - $scroll.slider.offsetHeight - 2) + "px";
this.scrollEvent($scroll);
},
// scroll the element
scrollEvent: function($scroll) {
var $perc = $scroll.slider.offsetTop / ($scroll.bar.offsetHeight - $scroll.slider.offsetHeight - 2);
$scroll.content.style.top = (- Math.round($perc * ($scroll.content.offsetHeight - $scroll.box.offsetHeight))) + "px";
},
// scroll up 20px
scrollUp: function($scroll, $amount) {
if ( $scroll.content.offsetHeight <= $scroll.box.offsetHeight ) return;
if(!$amount)$amount = 20;
$scroll.content.style.top = ($scroll.content.offsetTop + $amount) + "px";
if ( $scroll.content.offsetTop > 0 ) $scroll.content.style.top = "0px";
var $perc = $scroll.content.offsetTop / ($scroll.box.offsetHeight - $scroll.content.offsetHeight);
$scroll.slider.style.top = Math.round(($scroll.bar.offsetHeight - $scroll.slider.offsetHeight - 2) * $perc) + "px";
},
// scroll down 20px;
scrollDown: function($scroll, $amount) {
if ( $scroll.content.offsetHeight <= $scroll.box.offsetHeight ) return;
if(!$amount)$amount = 20;
$scroll.content.style.top = ($scroll.content.offsetTop - $amount) + "px";
if ( $scroll.content.offsetTop < $scroll.box.offsetHeight - $scroll.content.offsetHeight ) $scroll.content.style.top = ($scroll.box.offsetHeight - $scroll.content.offsetHeight) + "px";
var $perc = $scroll.content.offsetTop / ($scroll.box.offsetHeight - $scroll.content.offsetHeight);
$scroll.slider.style.top = Math.round(($scroll.bar.offsetHeight - $scroll.slider.offsetHeight - 2) * $perc) + "px";
},
// mouse wheel
mouseWheel: function($scrollElement, $delta) {
for ( var i = 0; i < this.scrollbarCollection.length; i++ ) {
if ( this.scrollbarCollection[i].box == $scrollElement ) var $scroll = this.scrollbarCollection[i];
}
($delta < 0) ? scrollbar.scrollDown($scroll, 60) : scrollbar.scrollUp($scroll, 60);
},
// mouse wheel handler
wheelHandler: function(e) {
var $temp = (window.event) ? event.srcElement : e.target;
if (window.event) {
var $delta = (event.wheelDelta > 0) ? 1 : -1;
} else {
var $delta = (e.detail < 0) ? 1 : -1;
}
var $child = this.childOfScrollBox($temp);
if ($child) {
for ( var i = 0; i < scrollbar.scrollbarCollection.length; i++ ) {
if ( scrollbar.scrollbarCollection[i].box == $child ) var $scroll = scrollbar.scrollbarCollection[i];
}
if ( $scroll.content.offsetHeight <= $scroll.box.offsetHeight ) return;
scrollbar.mouseWheel($child, $delta);
if ( window.event ) {
event.returnValue = false;
} else {
e.preventDefault();
}
}
},
childOfScrollBox: function($el) {
while($el.parentNode) {
$el = $el.parentNode;
if ( $el.className ) {
if ( $el.className.indexOf("scroll_box") != -1 ) {
return $el;
}
}
}
return false;
},
getAbsolutePosition: function(element) {
var r = { x: element.offsetLeft, y: element.offsetTop };
if (element.offsetParent) {
var tmp = scrollbar.getAbsolutePosition(element.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
},
getRelativeCoordinates: function(event, reference) {
var x, y;
event = event || window.event;
var el = event.target || event.srcElement;
if (!window.opera && typeof event.offsetX != 'undefined') {
var pos = { x: event.offsetX, y: event.offsetY };
var e = el;
while (e) {
e.mouseX = pos.x;
e.mouseY = pos.y;
pos.x += e.offsetLeft;
pos.y += e.offsetTop;
e = e.offsetParent;
}
var e = reference;
var offset = { x: 0, y: 0 }
while (e) {
if (typeof e.mouseX != 'undefined') {
x = e.mouseX - offset.x;
y = e.mouseY - offset.y;
break;
}
offset.x += e.offsetLeft;
offset.y += e.offsetTop;
e = e.offsetParent;
}
e = el;
while (e) {
e.mouseX = undefined;
e.mouseY = undefined;
e = e.offsetParent;
}
} else {
var pos = scrollbar.getAbsolutePosition(reference);
x = event.pageX - pos.x;
y = event.pageY - pos.y;
}
return { x: x, y: y };
}
}
// ***********************************
// FADEBOX overlay
var fadebox = {
initialized: false,
fading: false,
blocked: false,
container: undefined,
background: undefined,
bgcolor: "#000",
currentAlpha: 0,
startAlpha: 0,
endAlpha: 100,
backgroundEndAlpha: 80,
secs: 1,
fps: 24,
timer: 0,
init: function() {
if ( !qjs ) return;
if ( !fadebox.container || !fadebox.background || fadebox.blocked ) return;
fadebox.container.style.position = "fixed";
if ( navigator.userAgent.indexOf("MSIE 6") != -1 ) {
fadebox.container.style.position = "absolute";
document.body.style.height = "100%";
}
fadebox.container.style.left = fadebox.container.style.top = "0px";
fadebox.container.style.width = fadebox.container.style.height = "100%";
fadebox.container.style.zIndex = 1000;
fadebox.container.alpha(0);
fadebox.background.style.position = "fixed";
if ( navigator.userAgent.indexOf("MSIE 6")!=-1 ) fadebox.background.style.position = "absolute";
fadebox.background.style.left = fadebox.background.style.top = "0px";
fadebox.background.style.width = fadebox.background.style.height = "100%";
fadebox.background.style.backgroundColor = fadebox.bgcolor;
fadebox.background.style.zIndex = 900;
fadebox.background.alpha(0);
fadebox.initialized = true;
},
fade: function($start, $end) {
if ( !fadebox.initialized ) fadebox.init();
if ( !fadebox.container || !fadebox.background || fadebox.blocked ) return;
if ( $start != fadebox.startAlpha ) fadebox.startAlpha = $start;
if ( $end != fadebox.endAlpha ) fadebox.endAlpha = $end;
fadebox.container.show();
fadebox.background.show();
fadebox.currentAlpha = fadebox.startAlpha;
if ( !fadebox.fading ) {
fadebox.timer = setTimeout(fadebox.setAlpha,(fadebox.secs / fadebox.fps) * 1000);
fadebox.fading = true;
}
},
setAlpha: function() {
fadebox.currentAlpha = fadebox.currentAlpha + Math.round((fadebox.endAlpha-fadebox.startAlpha)/(fadebox.fps*fadebox.secs));
if ( fadebox.currentAlpha > 100 ) {
fadebox.currentAlpha = 100;
}
if ( fadebox.currentAlpha < 0 ) {
fadebox.currentAlpha = 0;
}
fadebox.container.alpha(fadebox.currentAlpha);
if ( fadebox.currentAlpha < fadebox.backgroundEndAlpha ) {
fadebox.background.alpha(fadebox.currentAlpha);
}
if ( fadebox.currentAlpha==fadebox.endAlpha ) {
clearTimeout(fadebox.timer);
fadebox.fading = false;
} else {
fadebox.timer = setTimeout(fadebox.setAlpha,(fadebox.secs / fadebox.fps) * 1000);
}
if ( fadebox.currentAlpha == 0 ) {
fadebox.container.hide();
fadebox.background.hide();
}
}
}
// ***********************************
// FORM validator
var formvalidator = {
validateForm: function($form) {
var $fields = qjs._tag("INPUT", $form);
var $retval = true;
var $msg = "";
for ( var i = 0; i < $fields.length; i++ ) {
switch ($fields[i]["name"]) {
case "username":
if ( formvalidator.empty($fields[i].value) ) {
$msg += "- Please fill in your username\n";
$fields[i].className += " error";
$retval = false;
}
break;
case "name":
if ( formvalidator.empty($fields[i].value) ) {
$msg += "- Please fill in your name\n";
$fields[i].className += " error";
$retval = false;
}
break;
case "email":
if ( formvalidator.empty($fields[i].value) || !formvalidator.validateEmail($fields[i].value) ) {
$msg += "- Please fill in your e-mail address\n";
$fields[i].className += " error";
$retval = false;
}
break;
case "age":
if ( !formvalidator.validateNumber($fields[i].value) ) {
$msg += "- Please fill in your age\n";
$fields[i].className += " error";
$retval = false;
}
break;
case "phone number":
if ( !formvalidator.validatePhoneNumber($fields[i].value) ) {
$msg += "- Please fill in your phone number\n";
$fields[i].className += " error";
$retval = false;
}
break;
}
switch ($fields[i]["type"]) {
case "text":
//if ( formvalidator.empty($fields[i].value) ) $retval = false;
break;
case "password":
if ( formvalidator.empty($fields[i].value) || $fields[i].value.toLowerCase() == "password" || $fields[i].value.toLowerCase() == "wachtwoord" ) {
$msg += "- Please fill in your password\n";
$fields[i].className += " error";
$retval = false;
}
break;
}
if ($fields[i]["value"]) $fields[i].value = formvalidator.strip($fields[i].value);
}
if ( $msg ) alert($msg);
return $retval;
},
validateAndSubmit: function($form) {
if ( formvalidator.validateForm($form) ) $form.submit();
},
validateNumber: function($num) {
return ( parseInt($num) == $num );
},
validateEmail: function($email) {
return ($email.indexOf("@")!= -1 && $email.indexOf(".") != -1 && !formvalidator.empty($email));
},
validatePhoneNumber: function($phone) {
var $valid = "0123456789+- ";
if ( $phone.length < 8 ) return false;
for ( var i=0; i < $phone.length; i++ ) {
if ( $valid.indexOf($phone.substr(i, 1)) == -1 ) {
return false;
}
}
return true;
},
empty: function($str) {
return ($str == "" || $str == undefined || $str == null);
},
strip: function($str) {
// remove unwanted < and > operators
$str = $str.split("<").join("(");
$str = $str.split(">").join(")");
$str = $str.split("%3C").join("(");
$str = $str.split("%3E").join(")");
$str = $str.split("%3c").join("(");
$str = $str.split("%3e").join(")");
// return escaped string
return escape($str);
}
}
// ***********************************
// SWF writer
var swf = {
// collection of all flash objects
flashObjects: new Array(),
// write a flash embed with full browser compatibility
writeFlash: function($src, $width, $height, $params, $flashVars, $targetElement) {
//var $code = '
'; // IE6 fix
var $code = '