if (!rajmv) var rajmv = {};

rajmv.animatedJavascriptControlCenter = {
	about : {
		whatsThis : 'The core animation code for the animatedJavascript* series of webcomponents, in javascript without dependencies',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 June',
		url : 'http://mediabeez.ws/'
	},
	globals : {
		fadeSteps : 10,
		stateTransitionSteps : 12
	},
//themes hold all available themes (get_js.php) and their settings.
	themes : {
/*
		theme_name : {	
			frame : {
				width : integer,
				height : integer,
				//offsetX and Y note how much space a single sprite in the sprite sheet costs.
				offsetX : integer,
				offsetY : Integer,
			},
			states : { 
				normal:{
					frameCount : integer,
					fps : integer,
					...
				}, hover:{...}, selected:{...}, disabled:{...} }	
		}
*/
	},
//options apply to an entire component instance
	options : {
//	componentInstanceHTMLid : {
//		...settings specific to type of component...
//	}	
	}, 
//settings group all operations variables per compontent instance
	settings : {
/*
		componentInstanceHTMLid : {
			items : {
				componentItemHTMLid : { // a button has 1 item; itself. A menu can have many items.
					theme : 'trees_001',
					img1, img2 : HTMLELEMENTS
					stateCurrent : 'normal',
					stateOld : null, 
					stateNew : null,
					state : {
						normal : {
							forward : true,
							frame : 0
						}, 
						hover:{...}, selected:{...}, disabled:{...}
					},
				}
			}
		}
*/
	},
	
	setOptions : function (componentInstanceHTMLid, options) {
		rajmv.ajcc.options[componentInstanceHTMLid] = options;
	},
	
	init : function (el) {
		if (!el) el=document.body;
		var sr = rajmv.ajcc.scanElements(el);
		for (var elid in sr) {
			var el = sr[elid];
			if (el.className.indexOf('animatedJavascriptButton')!==-1) {
				rajmv.ajsb.init (el);
			}
			if (el.className.indexOf('animatedJavascriptMenu')!==-1) {
				rajmv.ajsm.init (el);
			}
			if (el.className.indexOf('animatedJavascriptTabs')!==-1) {
				rajmv.ajst.init (el);
			}
			if (el.className.indexOf('animatedJavascriptScrollpane')!==-1) {
				rajmv.ajss.init (el);
			}
			if (el.className.indexOf('animatedJavascriptDialog')!==-1) {
				rajmv.ajsd.init (el);
			}
		}
	},
	
	hookEvent : function (el, eventName, handler, useCapture, add) {
		if (add) {
			if (el.addEventListener) {
			// Standards browsers
				el.addEventListener (eventName, handler, useCapture);
			} else if (el.attachEvent) {
			// IE < v9.0
				el.attachEvent ('on'+eventName, handler);
			}
		} else {
			if (el.removeEventListener) {
			// Standards browsers
				el.removeEventListener (eventName, handler, useCapture);
			} else if (el.detachEvent) {
				el.detachEvent ('on'+eventName, handler);
			}
		}
	},
	
	scanElements : function (el, scanResult) {
		if (!scanResult) scanResult={};
		if (
			el.className.indexOf('animatedJavascriptButton')!==-1
			|| el.className.indexOf('animatedJavascriptMenu')!==-1
			|| el.className.indexOf('animatedJavascriptTabs')!==-1
			|| el.className.indexOf('animatedJavascriptScrollpane')!==-1
			|| el.className.indexOf('animatedJavascriptDialog')!==-1
		) {
			scanResult[el.id] = el;
		}
		if (el.children.length>0) {
			for (var i=0; i<el.children.length; i++) {
				if (el.children[i].tagName.toUpperCase()!=='IFRAME') 
					scanResult = rajmv.ajcc.scanElements (el.children[i], scanResult);
			}
		}
		return scanResult;
	},
	
	newInstance : function (componentInstanceHTMLelement) {
		var t = componentInstanceHTMLelement.className;
		var start = t.indexOf('animatedTheme__');
		if (start===-1) {
		debugger;
			alert ('No theme set for '+componentInstanceHTMLelement.id);
		} else {
			var end = t.indexOf(' ', start);
			if (end===-1) end = t.length;
			rajmv.ajcc.settings[componentInstanceHTMLelement.id] = {
				theme : t.substr(start, end-start).replace(/.*__/,''),
				items : []
			};
		}
	},
	
	getItemIndex : function (componentItemHTMLelement) {
		var id = componentItemHTMLelement.id;
		id = id.split('__');
		i = id[id.length-1];
		if (isNaN(i)) i = id[id.length-2];
		return parseInt(i);
	},

	animateItem : function (componentInstanceHTMLelement, componentItemHTMLelement, forward, isKickOff) {
		var ci = componentInstanceHTMLelement; 
		var s = rajmv.ajcc.settings[ci.id];
		if (!s) return false;
		var o = rajmv.ajcc.options[ci.id];
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)];
		if (!item) return false;
		var t = rajmv.ajcc.themes[item.theme];

		var animationProceeds = true;
		if (o && o.items && o.items && o.items[componentItemHTMLelement.id]
			&& o.items[componentItemHTMLelement.id].events 
			&& o.items[componentItemHTMLelement.id].events.initialized
		) {
			var e = o.items[componentItemHTMLelement.id].events.initialized;
			delete o.items[componentItemHTMLelement.id].events.initialized; //prevent endless loop
			animationProceeds = false;
			e (
				ci,
				item
			);
		}

		var frameSlowness = 0;
		if (item.stateCurrent) {
		// We're in a mode of using a single button state
			var st = item.state[item.stateCurrent]; // st = state
			
			st.resetDone = false;
			
			// advance animation 1 step/frame			
			st.newFrame = st.frame;
			if (forward === false) st.forward = false;
			if (forward === true) st.forward = true;
			if (st.forward) st.newFrame++; else st.newFrame--;

			// bounce between forward=true and forward=false when running out of frames			
			var th = rajmv.ajcc.themes[item.theme].state[item.stateCurrent];
			animationProceeds = (
				(st.forward || th.animationLoopsBackAndForth || th.animationLoopsForward)
				|| 
				(t.animateToFirstFrameOnMouseOut && !st.forward && st.newFrame>0)
			);
			if (st.newFrame >= th.frameCount) {
				if (th.animationLoopsBackAndForth) {
					st.forward = false;
					st.newFrame = th.frameCount -1;
				} else if (
					th.animationLoopsForward
				) {
					st.newFrame = 0;
					if (
						typeof th.stateTransitionSteps=='undefined'
						|| th.stateTransitionSteps>0
					) {
						st.resetDone = true;
						st.transitionStepsDone = 0;
						rajmv.ajcc.animateItemToFirstFrame (componentInstanceHTMLelement, componentItemHTMLelement);
						return false; //don't mess with the operations done by animateItemToFirstFrame
					}
				} else {
					st.newFrame = th.frameCount -1;	
					animationProceeds = false;
				}
			};
			if (st.newFrame < 0) {
				if (th.animationLoopsBackAndForth) {
					st.forward = true;
				};
				st.newFrame = 0;
			};

			
			if (th.animationLoopsBackAndForth) {
				// start slowing the framerate at the beginning and the end of every cycle
				if (st.newFrame < th.framesToSlow ) {
					frameSlowness = th.framesToSlow - st.newFrame;
				}
				if (st.newFrame > (th.frameCount - th.framesToSlow)) {
					frameSlowness = th.framesToSlow  - ( th.frameCount - st.newFrame );
				}
			}	
			var fps = th.fps;
			if (frameSlowness>0) {
				fps = 
					th.fps
					-( 
						( ( th.fps - th.fpsSlow ) 
						     / th.framesToSlow
						) * frameSlowness
					);
			};
			
			// note where we are in the animation
			st.frame = st.newFrame;				
			
			st.transitionStepsDone++;

			// get the right sprite from the sprite sheet s.image.url
			if (!item.type || item.type!='dialog') {
				st.framePos = rajmv.ajcc.getFramePos (componentInstanceHTMLelement, componentItemHTMLelement, item.stateCurrent);
			}
			
			//bugfix:
			item.img1 = document.getElementById(componentInstanceHTMLelement.id + '__item__'+i+'__img1');
			item.img2 = document.getElementById(componentInstanceHTMLelement.id + '__item__'+i+'__img2');

			if (!item.type || item.type!='dialog') {
			//Buttons, Menus
				// Standards Browsers:
				item.img1.style.backgroundPosition = (-1 * st.framePos.x) + 'px ' + (-1 * st.framePos.y) + 'px';
				// Internet Explorer: 
				item.img1.style.backgroundPositionX = (-1 * st.framePos.x) + 'px';
				item.img1.style.backgroundPositionY = (-1 * st.framePos.y) + 'px';
			} else {			
			//Dialogs
				var n = '00'; if (st.frame>=10) n='0'; if (st.frame>=100) n='';
				item.img1.src = t.baseURL + item.theme + '/frame_'+item.stateCurrent+'_'+n+st.frame+'.png';
			}
			rajmv.ajcc.setOpacity (item.img1, (t.state && t.state[item.stateCurrent] && t.state[item.stateCurrent].opacity?t.state[item.stateCurrent].opacity:1));
			rajmv.ajcc.setOpacity (item.img2, 0);

		} else {
		// we're transitioning between button states
			var stn = item.state[item.stateNew];
			var sto = item.state[item.stateOld];
			var tn = rajmv.ajcc.themes[item.theme].state[item.stateNew];
			var to = rajmv.ajcc.themes[item.theme].state[item.stateOld];
			
			// advance animation 1 step/frame (for both states)
			stn.newFrame = stn.frame;
			if (forward === false) stn.forward = false;
			if (forward === true) stn.forward = true;
			if (stn.forward) stn.newFrame++; else stn.newFrame--;
			sto.newFrame = sto.frame;
			if (sto.forward) sto.newFrame++; else sto.newFrame--;
			
			// bounce between forward=true and forward=false when running out of frames (for both states)
			timeDivisor = tn.frameCount;
			stn.animationProceeds = (
				stn.forward 
				|| 
				tn.animationLoopsBackAndForth
				||
				tn.animationLoopsForward
				||
				tn.animateToFirstFrameOnMouseOut
			);
			sto.animationProceeds = (
				sto.forward 
				|| 
				to.animationLoopsBackAndForth
				||
				to.animationLoopsForward
				||
				to.animateToFirstFrameOnMouseOut
			);
			animationProceeds = stn.animationProceeds || sto.animationProceeds;

			if (stn.newFrame >= tn.frameCount) {
				if (tn.animationLoopsBackAndForth) {
					stn.forward = false;
				} 
				stn.newFrame = tn.frameCount - 1;
			};
			if (stn.newFrame < 0) {
				if (tn.animationLoopsBackAndForth) {
					stn.forward = true;
				}; 
				stn.newFrame = 0;
			};
			if (sto.newFrame >= to.frameCount) {
				if (to.animationLoopsBackAndForth) {
					sto.forward = false;
				} 
				sto.newFrame = to.frameCount - 1;
			};
			if (sto.newFrame < 0) {
				if (to.animationLoopsBackAndForth) {
					sto.forward = true;
				};
				sto.newFrame = 0;
			};
			if (
				stn.newFrame==0 
				&& !stn.forward 
				&& !tn.animationLoopsBackAndForth
				&& sto.newFrame==0 
				&& !sto.forward
				&& !to.animationLoopsBackAndForth
			) {
				animationProceeds = false;
			}
			
			var fps = tn.fps;
			var changeFPS = false;
			if (sto.animationLoopsBackAndForth) {
				// start slowing the framerate at the beginning and the end of every cycle
				if (sto.newFrame < to.framesToSlow ) {
					frameSlowness = to.framesToSlow - sto.newFrame;
					changeFPS = true;
				}
				if (sto.newFrame > (to.frameCount - to.framesToSlow)) {
					frameSlowness = to.framesToSlow - (to.frameCount - sto.newFrame);
					changeFPS = true;
				}
				if (changeFPS) {
					fps = 
						to.fps
						-( 
							( ( to.fps - to.fpsSlow ) 
							     / to.framesToSlow
							) * frameSlowness
						);
				};
			}	
			if (stn.animationLoopsBackAndForth) {
				// start slowing the framerate at the beginning and the end of every cycle
				changeFPS = false;
				if (stn.newFrame < tn.framesToSlow ) {
					frameSlowness = tn.framesToSlow - stn.newFrame;
					changeFPS = true;
				}
				if (stn.newFrame > (tn.frameCount - tn.framesToSlow)) {
					frameSlowness = tn.framesToSlow - (tn.frameCount - stn.newFrame);
					changeFPS = true;
				}
				if (changeFPS) {
					fps = 
						tn.fps
						-( 
							( ( tn.fps - tn.fpsSlow ) 
							     / tn.framesToSlow
							) * frameSlowness
						);
				};
			};
			
			// note where we are in the animation
			stn.frame = stn.newFrame;				
			sto.frame = sto.newFrame;				

			//bugfix:
			item.img1 = document.getElementById(componentInstanceHTMLelement.id + '__item__'+i+'__img1');
			item.img2 = document.getElementById(componentInstanceHTMLelement.id + '__item__'+i+'__img2');

			if (!item.type || item.type!='dialog') {
			//Buttons, Menus
				// get the right sprites from the sprite sheet s.image.url
				stn.framePos = rajmv.ajcc.getFramePos (componentInstanceHTMLelement, componentItemHTMLelement, item.stateNew);
				sto.framePos = rajmv.ajcc.getFramePos (componentInstanceHTMLelement, componentItemHTMLelement, item.stateOld);
				// Standards Browsers:
				item.img1.style.backgroundPosition = (-1 * stn.framePos.x) + 'px ' + (-1 * stn.framePos.y) + 'px';
				item.img2.style.backgroundPosition = (-1 * sto.framePos.x) + 'px ' + (-1 * sto.framePos.y) + 'px';
				// Internet Explorer: 
				item.img1.style.backgroundPositionX = (-1 * stn.framePos.x) + 'px';
				item.img1.style.backgroundPositionY = (-1 * stn.framePos.y) + 'px';
				item.img2.style.backgroundPositionX = (-1 * sto.framePos.x) + 'px';
				item.img2.style.backgroundPositionY = (-1 * sto.framePos.y) + 'px';
	
			} else {
			//Dialogs
				var nn = '00'; if (stn.frame>=10) nn='0'; if (stn.frame>=100) nn='';
				var on = '00'; if (sto.frame>=10) on='0'; if (stn.frame>=100) on='';
				item.img1.src = t.baseURL + item.theme + '/frame_'+item.stateNew+'_'+nn+stn.frame+'.png';
				item.img2.src = t.baseURL + item.theme + '/frame_'+item.stateOld+'_'+on+sto.frame+'.png';
			};

			sts = rajmv.ajcc.globals.stateTransitionSteps;
			if (tn.stateChange) {
				sts = tn.stateChange.steps;
			}
			o1 = (tn.opacity?tn.opacity:1);
			o2 = 0;
			o1 -=stn.transitionStepsDone / sts;
			o2 +=stn.transitionStepsDone / sts;

			// the magic swap: (don't touch!)
			rajmv.ajcc.setOpacity (item.img2, o1);
			rajmv.ajcc.setOpacity (item.img1, o2);
		
			stn.transitionStepsDone++;
			if (stn.transitionStepsDone>sts) {
				item.stateCurrent = item.stateNew;
				item.stateNew = null;
				item.stateOld = null;
			}
		}

		// continue with next frame after a split-second delay
		if (
			isKickOff 
			||
			(
				animationProceeds
				&& !item.animationTimeout
			)
		) {
			item.animationTimeout = setTimeout(function () {
				delete item.animationTimeout;
				rajmv.ajcc.animateItem (componentInstanceHTMLelement, componentItemHTMLelement, null, false);
			}, 1000/fps);
		}
	},
	
	animateItemToFirstFrame : function (componentInstanceHTMLelement, componentItemHTMLelement) {
		var ci = componentInstanceHTMLelement; 
		var s = rajmv.ajcc.settings[ci.id];
		if (!s) return false;
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)];
		if (!item) return false;
		if (item.stateCurrent) {
			var st = item.state[item.stateCurrent];
			var t = rajmv.ajcc.themes[item.theme].state[item.stateCurrent];
			st.transitionStepsDone++;

			//bugfix:
			if (!item.img1.parentNode) 
				item.img1 = document.getElementById(componentItemHTMLelement.id.replace(/__td/,'__img1'));
			if (!item.img2.parentNode) 
				item.img2 = document.getElementById(componentItemHTMLelement.id.replace(/__td/,'__img2'));

			// get the right sprites from the sprite sheet s.image.url
			st.frame = 0;
			st.framePos = rajmv.ajcc.getFramePos (componentInstanceHTMLelement, componentItemHTMLelement, item.stateCurrent);
			item.img1.style.backgroundPosition = (-1 * st.framePos.x) + 'px ' + (-1 * st.framePos.y) + 'px';
			item.img1.style.backgroundPositionX = (-1 * st.framePos.x) + 'px';
			item.img1.style.backgroundPositionY = (-1 * st.framePos.y) + 'px';

			st.frame = t.frameCount-1;
			st.framePos = rajmv.ajcc.getFramePos (componentInstanceHTMLelement, componentItemHTMLelement, item.stateCurrent);
			item.img2.style.backgroundPosition = (-1 * st.framePos.x) + 'px ' + (-1 * st.framePos.y) + 'px';
			item.img2.style.backgroundPositionX = (-1 * st.framePos.x) + 'px';
			item.img2.style.backgroundPositionY = (-1 * st.framePos.y) + 'px';
			
			st.frame = 0;

			var o2 = 1 - (st.transitionStepsDone / (t.stateTransitionSteps?t.stateTransitionSteps:rajmv.ajcc.globals.stateTransitionSteps));
			rajmv.ajcc.setOpacity (item.img1, 1);
			rajmv.ajcc.setOpacity (item.img2, o2);

			if (st.transitionStepsDone <= (t.stateTransitionSteps?t.stateTransitionSteps:rajmv.ajcc.globals.stateTransitionSteps)) {
				// the magic swap: (don't touch!)
				st.animationTimeout = setTimeout (function () {
					rajmv.ajcc.animateItemToFirstFrame(componentInstanceHTMLelement, componentItemHTMLelement);
				}, 1000/t.fps);
			} else {
				st.animationTimeout = setTimeout (function () {
					rajmv.ajcc.animateItem(componentInstanceHTMLelement, componentItemHTMLelement, true, true);
				}, 1000/t.fps);
			}
		}		
	},
	
	setOpacity : function (el, opacity) {
		if (el.filters) {
		// Internet Explorer
			el.filters.item(0).opacity = opacity * 100;
		} else {
		// Standards Browsers
			el.style.opacity = opacity;
		}
	},
	
	populateThemes : function (themes) {
		rajmv.ajcc.themes = themes;
		for (var tn in themes) {
			var t = rajmv.ajcc.themes[tn];
			t.url = t.baseURL + tn + '.png';
			for (var s in t.state) {
				var st = t.state[s];
					
				if (!st.fps) st.fps = 18; // frames per second; reasonably fluid, not too stressing on the CPU&GPU
				if (!st.fpsSlow) st.fpsSlow = 10;
				if (!st.fpsFramesToSlow) st.fpsFramesToSlow = 5;
			}
		}
	},

	getFramePos : function (componentInstanceHTMLelement, componentItemHTMLelement, state) {
	// gets the position of the wanted sprite in the sprite sheet
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)];
		var t = rajmv.ajcc.themes[item.theme];
		var ts = t.state[state];

		var frameIdx = rajmv.ajcc.getFrameIndex(componentInstanceHTMLelement, componentItemHTMLelement, state) + item.state[state].frame;
		var x = y = 0;
		for (var i = 0; i < frameIdx; i++) {
			y += t.frame.offsetY;
			if (y > (2040-t.frame.offsetY)) {
				x += t.frame.offsetX;
				y = -1 * t.frame.offsetY;
			};
		}
		if (y<0) y=0;
		
		return {
			x : x,
			y : y
		};
	},

	getFrameIndex : function (componentInstanceHTMLelement, componentItemHTMLelement, state) {
	// finds the index of the first frame for any given ItemState
		var r = 0;
		switch (state) {
			case 'hover' : 
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'normal');
				break;
			case 'selected' : 
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'normal');
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'hover');
				break;
			case 'disabled' : 
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'normal');
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'hover');
				r += rajmv.ajcc.getFrameCountForItemState (componentInstanceHTMLelement, componentItemHTMLelement, 'selected');
				break;
		};
		return r;
	},
	
	getFrameCountForItemState : function (componentInstanceHTMLelement, componentItemHTMLelement, state) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)];
		var t = rajmv.ajcc.themes[item.theme];
		switch (typeof t.state[state]) {
			case 'string' : 
				return 0;
			case 'object' : 
				return t.state[state].frameCount;
		}
		return false;
	},
	
	fadeIn : function (ids, duration) {
		var cmd = rajmv.ajcc.setupFadeCmd(ids,duration,true);
		rajmv.ajcc.doFade (cmd);		
	},
	
	fadeOut : function (ids, duration) {
		var cmd = rajmv.ajcc.setupFadeCmd(ids,duration,false);
		rajmv.ajcc.doFade (cmd);		
	},
	
	setupFadeCmd : function (ids,duration,fadeIn) {
		var cmd = {items:[],startOpacities:[],duration:duration,animationStepsDone:0,fadeIn:fadeIn};
		idz = ids.split(',');
		for (var i in idz) {
			var el = document.getElementById(idz[i]);
			cmd.items[cmd.items.length] = el;
			if (el.filters) {
			// Internet Explorer
				cmd.startOpacities[cmd.startOpacities.length] = parseInt(el.filters.item(0).opacity) / 100;
			} else {
				cmd.startOpacities[cmd.startOpacities.length] = parseInt(el.style.opacity);
			}
		};
		return cmd;
	},
	
	doFade : function (cmd) {
		cmd.animationStepsDone++;
		for (var i in cmd.items) {
			i = parseInt(i);
			var item = cmd.items[i];

			if (cmd.animationStepsDone==1) {
				if (cmd.fadeIn) {
					item.style.display='block';
					cmd.startOpacities[i] = 0; // hack to make it work, copying jquery functionality
				}
			}

			if (cmd.animationStepsDone==rajmv.ajcc.globals.fadeSteps) {
				if (!cmd.fadeIn) item.style.display='none';
			}

			if (cmd.animationStepsDone<=rajmv.ajcc.globals.fadeSteps) {
				if (cmd.fadeIn) {
					var nextOpacity = 
						cmd.startOpacities[i] 
						+ (( 
								(1 - cmd.startOpacities[i]) / rajmv.ajcc.globals.fadeSteps 
							) * cmd.animationStepsDone);
				} else {
					var nextOpacity = 
						parseFloat(cmd.startOpacities[i])
						- (( 
								cmd.startOpacities[i] / rajmv.ajcc.globals.fadeSteps 
							) * cmd.animationStepsDone);
				};
				rajmv.ajcc.setOpacity (item, nextOpacity);
			}
		}
		if (cmd.animationStepsDone<rajmv.ajcc.globals.fadeSteps) {
			setTimeout (function () {
				rajmv.ajcc.doFade (cmd);				
			}, cmd.duration/rajmv.ajcc.globals.fadeSteps);
		}
	},
	
	addEventListener : function (componentInstanceHTMLelement, componentItemHTMLelement, event, callback) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)]; 
		var t = rajmv.ajcc.themes[item.theme];
		
		if (!item.events) item.events={};
		item.events[event] = callback;
	},
	
	changeState : function (componentInstanceHTMLelement, componentItemHTMLelement, newState) {
		if (!componentInstanceHTMLelement) {
			var ciid = componentItemHTMLelement.id.split('__')[0];
			componentInstanceHTMLelement = document.getElementById(ciid);
		}
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[rajmv.ajcc.getItemIndex(componentItemHTMLelement)]; 
		var t = rajmv.ajcc.themes[item.theme];
		if (typeof ts=='string') {
			rajmv.ajcc.error (buttonHTMLid, 'changeState', 'requested state "'+newState+'" reports "'+s.image.state[newState]+'". ');
		} else {
		/*
			console.log ('changeState(): newState='+newState);
			console.log ('changeState(): oldState='+item.stateOld);
			console.log ('changeState(): s.stateCurrent='+item.stateCurrent);
		*/
			clearTimeout (item.animationTimeout);
			if (item.stateCurrent) {
				item.stateOld = item.stateCurrent;
				item.stateCurrent = null;
				item.stateNew = newState;
				item.state[newState].transitionStepsDone = 0;
				item.state[newState].frame = 0;
				item.state[newState].forward = true;
			} else {
			// already in a transition, cancel that one and set up for the new transition
				item.stateOld = item.stateNew;
				item.stateNew = newState;
				item.state[newState].transitionStepsDone = 0;
				item.state[newState].frame = 0;
				item.state[newState].forward = true;
			};
			clearTimeout(s.animationTimeout);
			rajmv.ajcc.animateItem(componentInstanceHTMLelement, componentItemHTMLelement, true, true);
		}
	}
	
};
rajmv.ajcc = rajmv.animatedJavascriptControlCenter; //short-hand


rajmv.ajcc.populateThemes ({"birds_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":126,"height":33,"offsetX":130,"offsetY":35},"state":{"normal":{"frameCount":126,"fps":10,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"hover":{"frameCount":79,"fps":10,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"selected":{"frameCount":118,"fps":10,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"coral_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":115,"height":33,"offsetX":120,"offsetY":35},"state":{"normal":{"frameCount":96,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"hover":{"frameCount":107,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"selected":{"frameCount":111,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"divers_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":113,"height":33,"offsetX":115,"offsetY":35},"state":{"normal":{"frameCount":108,"fps":12,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"hover":{"frameCount":124,"fps":12,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"selected":{"frameCount":114,"fps":12,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"earth_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":155,"height":31,"offsetX":160,"offsetY":35},"state":{"normal":{"frameCount":222,"animationLoopsBackAndForth":true,"animationLoopsForward":false,"animationLoopsForwardDelayBetweenSequences":5000},"hover":{"frameCount":81,"animationLoopsBackAndForth":true,"animationLoopsForward":false,"animationLoopsForwardDelayBetweenSequences":5000},"selected":{"frameCount":77,"animationLoopsBackAndForth":true,"animationLoopsForward":false,"animationLoopsForwardDelayBetweenSequences":5000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"fish_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":107,"height":36,"offsetX":125,"offsetY":40},"state":{"normal":{"frameCount":91,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":5000},"hover":{"frameCount":59,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":5000},"selected":{"frameCount":106,"animationLoopsBackAndForth":true,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":5000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"lava_001":{"themeType":"animatedJavascriptMenu","frame":{"width":114,"height":33,"offsetX":120,"offsetY":35},"state":{"normal":{"frameCount":89,"fps":16,"fpsSlow":8,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"hover":{"frameCount":68,"fps":16,"fpsSlow":8,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"selected":{"frameCount":70,"fps":16,"fpsSlow":8,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"menu_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":220,"height":30,"offsetX":410,"offsetY":60},"state":{"normal":{"frameCount":1,"stateChange":{"steps":15},"animationLoopsBackAndForth":false,"animationLoopsForward":false},"hover":{"stateChange":{"steps":1},"frameCount":14,"fps":14,"fpsSlow":14,"framesToSlow":7,"animateToFirstFrameOnMouseOut":true,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":"disabled","disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"menu_002":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":160,"height":30,"offsetX":165,"offsetY":35},"state":{"normal":{"frameCount":1,"stateChange":{"steps":15},"animationLoopsBackAndForth":false,"animationLoopsForward":false},"hover":{"stateChange":{"steps":1},"frameCount":29,"fps":14,"fpsSlow":14,"framesToSlow":7,"animateToFirstFrameOnMouseOut":true,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":"disabled","disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"polarbear_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":107,"height":41,"offsetX":110,"offsetY":45},"state":{"normal":{"frameCount":101,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"hover":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":{"frameCount":138,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":7000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"space_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":114,"height":33,"offsetX":120,"offsetY":35},"state":{"normal":{"frameCount":107,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"hover":{"frameCount":109,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"selected":{"frameCount":107,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"stone_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":112,"height":32,"offsetX":120,"offsetY":40},"state":{"normal":{"frameCount":24,"fps":15,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":5000},"hover":{"frameCount":18,"fps":15,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":{"frameCount":26,"fps":15,"animationLoopsBackAndForth":false,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":5000},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"trees_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":135,"height":36,"offsetX":140,"offsetY":40},"state":{"normal":{"frameCount":60,"fps":16,"fpsSlow":8,"framesToSlow":7,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"hover":{"frameCount":135,"fps":16,"fpsSlow":8,"framesToSlow":7,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"selected":{"frameCount":119,"fps":16,"fpsSlow":6,"framesToSlow":7,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"lava_002":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":201,"height":23,"offsetX":205,"offsetY":25},"state":{"normal":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"hover":{"frameCount":86,"fps":14,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"selected":{"frameCount":139,"fps":18,"fpsSlow":5,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"playpause_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":50,"height":50,"offsetX":60,"offsetY":60},"state":{"normal":{"frameCount":1},"hover":{"frameCount":21,"fps":16,"stateTransitionSteps":0,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":0},"selected":{"frameCount":10,"fps":8,"fpsSlow":3,"stateTransitionSteps":1,"animationLoopsBackAndForth":true},"disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"mute_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":50,"height":50,"offsetX":60,"offsetY":60},"state":{"normal":{"frameCount":7,"fps":4,"stateTransitionSteps":4,"animationLoopsForward":true},"hover":"disabled","selected":{"frameCount":7,"fps":4,"stateTransitionSteps":4,"animationLoopsForward":true},"disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"stop_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":50,"height":50,"offsetX":60,"offsetY":60},"state":{"normal":{"frameCount":1},"hover":{"frameCount":13,"fps":5,"fpsSlow":3,"animationLoopsBackAndForth":true},"selected":"disabled","disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"question_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":50,"height":50,"offsetX":60,"offsetY":60},"state":{"normal":{"frameCount":1},"hover":{"frameCount":21,"fps":16,"stateTransitionSteps":0,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":0},"selected":{"frameCount":1},"disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"tools_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":50,"height":50,"offsetX":60,"offsetY":60},"state":{"normal":{"frameCount":1},"hover":{"frameCount":21,"fps":16,"stateTransitionSteps":0,"animationLoopsForward":true,"animationLoopsForwardDelayBetweenSequences":0},"selected":{"frameCount":1},"disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"menu_003":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":85,"height":30,"offsetX":90,"offsetY":35},"state":{"normal":{"frameCount":1,"stateChange":{"steps":15},"animationLoopsBackAndForth":false,"animationLoopsForward":false},"hover":{"stateChange":{"steps":1},"frameCount":25,"fps":14,"fpsSlow":14,"framesToSlow":7,"animateToFirstFrameOnMouseOut":true,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":{"frameCount":28,"fps":14,"fpsSlow":14,"framesToSlow":7,"animateToFirstFrameOnMouseOut":false,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"disabled":{"frameCount":1,"animationLoopsBackAndForth":false,"animationLoopsForward":false}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/buttonsAndMenus\/"},"scroll_djfiresnake_001":{"themeType":"animatedJavascriptScrollpane","images":{"ver_sliderbar":{"url":"frame_e01_001.png"},"ver_sliderTop":{"url":"frame_e02_001.png"},"ver_sliderBottom":{"url":"frame_e03_001.png"},"ver_slider":{"url":"frame_e04_001.png"},"hor_sliderbar":{"url":"frame_e05_001.png"},"hor_sliderTop":{"url":"frame_e06_001.png"},"hor_sliderBottom":{"url":"frame_e07_001.png"},"hor_slider":{"url":"frame_e08_001.png"}},"options":{"ver_sliderbar_position":"left"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/scrollpane\/"},"scroll_mediabeez":{"themeType":"animatedJavascriptScrollpane","images":{"ver_sliderbar":{"url":"frame_e01_001.png","width":20},"ver_sliderTop":{"url":"frame_e02_001.png"},"ver_sliderBottom":{"url":"frame_e03_001.png"},"ver_slider":{"url":"frame_e04_001.png"},"hor_sliderbar":{"url":"frame_e05_001.png","height":20},"hor_sliderTop":{"url":"frame_e06_001.png"},"hor_sliderBottom":{"url":"frame_e07_001.png"},"hor_slider":{"url":"frame_e08_001.png"}},"options":{"ver_sliderbar_position":"left"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/scrollpane\/"},"mediaBeez.ws_siteLogo_purple":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":300,"height":80,"offsetX":310,"offsetY":90},"state":{"normal":{"stateChange":{"steps":4},"frameCount":35,"fps":14,"animationLoopsBackAndForth":true},"hover":{"stateChange":{"steps":4},"frameCount":24,"fps":14,"animationLoopsBackAndForth":false,"animationLoopsForward":false},"selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"djfiresnake_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":450,"height":80,"offsetX":460,"offsetY":90},"state":{"normal":{"frameCount":71,"fps":16,"fpsSlow":4,"animationLoopsBackAndForth":true,"animationLoopsForward":false},"hover":"disabled","selected":"disabled","disabled":"disabled"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"mediaBeez_ws_cmsLogo_blueGreen":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":200,"height":70,"offsetX":210,"offsetY":80},"state":{"normal":{"stateChange":{"steps":1},"frameCount":1},"hover":{"stateChange":{"steps":1},"frameCount":5,"fps":3},"selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"mediaBeez_ws_siteLogo_green":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":400,"height":100,"offsetX":410,"offsetY":110},"state":{"normal":{"frameCount":98,"fps":20,"animationLoopsBackAndForth":true},"hover":{"frameCount":1},"selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"tarot_siteLogo_001":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":300,"height":80,"offsetX":310,"offsetY":90},"state":{"normal":{"frameCount":19,"fps":9,"animationLoopsBackAndForth":true},"hover":"unsupported","selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"tarot_siteLogo_002":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":300,"height":80,"offsetX":310,"offsetY":90},"state":{"normal":{"frameCount":152,"fps":24,"animationLoopsBackAndForth":true},"hover":"unsupported","selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"tarot_siteLogo_003":{"themeType":"animatedJavascriptButtonOrMenu","frame":{"width":300,"height":80,"offsetX":310,"offsetY":90},"state":{"normal":{"frameCount":1},"hover":{"frameCount":19,"fps":6,"fpsSlow":2,"animationLoopsBackAndForth":true},"selected":"unsupported","disabled":"unsupported"},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/siteLogos\/"},"wood_001":{"themeType":"animatedJavascriptTabs","contentBackgroundImage":"images\/wood_001_content.png","menuBackgroundImage":"images\/wood_001_top.png","menuItemTheme":"trees_001","baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/tabs\/"},"dialog_001":{"themeType":"animatedJavascriptDialog","displayOnFirstImageLoaded":true,"state":{"normal":{"frameCount":1,"opacity":0.7},"highlighted":{"frameCount":11,"fps":8,"animationLoopsBackAndForth":true}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/dialogs\/"},"dialog_002":{"themeType":"animatedJavascriptDialog","displayOnFirstImageLoaded":true,"state":{"normal":{"frameCount":1,"opacity":0.6},"highlighted":{"frameCount":5,"fps":3,"animationLoopsBackAndForth":true}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/dialogs\/"},"dialog_003":{"themeType":"animatedJavascriptDialog","displayOnFirstImageLoaded":true,"state":{"normal":{"frameCount":1},"highlighted":{"frameCount":5,"fps":3,"animationLoopsBackAndForth":true}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/dialogs\/"},"dialog_004":{"themeType":"animatedJavascriptDialog","displayOnFirstImageLoaded":true,"state":{"normal":{"frameCount":1},"highlighted":{"frameCount":6,"fps":3,"animationLoopsBackAndForth":true}},"baseURL":"\/code\/libraries_rv\/animatedJavascriptWidgets-1.0.0\/themes\/dialogs\/"}} );
rajmv.animatedJavascriptDesktop = {
	about : {
		whatsThis : 'a desktop window manager in javascript',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 August',
		url : 'mediabeez.ws'
	},
	globals : {
	},
	options : {},
	
	init  : function () {
		var data = rajmv.desktop.getCookie ('desktop');
		if (data) {
			alert ('got cookie!');
		} else {
			rajmv.desktop.resize();
		};
		rajmv.ajcc.hookEvent (window, 'resize', rajmv.desktop.resize, true, true);
	},
	
	resize : function () {
		var od = rajmv.desktop.options.desktop;
		for (var id in rajmv.desktop.options) {
			if (id!=='desktop') {
				var o = rajmv.desktop.options[id];
				var d = rajmv.desktop.resolveID(id+'__dialog');
				if (!d) d = rajmv.desktop.resolveID(id);
				if (d) {
					if (o.snapTo) {
						for (var i = 0; i < o.snapTo.length; i++) {
							var s = o.snapTo[i];
							if (s.element && s.edge) {
								var a = rajmv.desktop.resolveID (s.element);
								switch (s.edge) {
									case 'left' : 
										if (s.element=='body') {
											d.style.left = od.margin + 'px';
										} else {
											d.style.left = ( parseFloat(a.style.left) + a.offsetWidth + od.margin ) + 'px';
										}
										break;
									case 'right' :
										if (s.element=='body') {
											d.style.left = (a.offsetWidth - od.margin - d.offsetWidth) + 'px';
										} else {
											d.style.left = ( parseFloat(a.style.left) + a.offsetWidth + od.margin ) + 'px';
										}
										break;	
									case 'bottom':
										d.style.top = ( parseFloat(a.style.top) + a.offsetHeight + od.margin) + 'px';
										break;
								}
							}
						}
					}			
				}
			}
		};		
		for (var id in rajmv.desktop.options) {
			if (id!=='desktop') {
				var o = rajmv.desktop.options[id];
				var d2 = rajmv.desktop.resolveID(id+'__item__0');
				var d = d3 = rajmv.desktop.resolveID(id+'__dialog');
				if (!d) d = rajmv.desktop.resolveID(id);
				if (d) {
					var width = parseFloat(d.style.width);
					if (o.growTo) {
						width = window.innerWidth - parseFloat (d.style.left) - (2 * od.margin);
						for (var jd in rajmv.desktop.options) {
							if (jd!=='desktop' && jd!==id) {
								var a = rajmv.desktop.resolveID (jd+'__dialog');
								if (!a) a = rajmv.desktop.resolveID (jd);
								if (a && 
									parseFloat(a.style.top) + a.offsetHeight > parseFloat(d.style.top) 
								) {
									var tw = parseFloat (a.style.left) - parseFloat(d.style.left);
									if (width > tw && tw > 0 ) width = tw;
								}
							}
						}
					}
					d.style.width = width + 'px';
					if (d3&&d2) d2.style.width = width + 'px';

					var height = parseFloat(d.style.height);
					if (o.growTo) {
						height = window.innerHeight - parseFloat (d.style.top) - (2 * od.margin);
						for (var jd in rajmv.desktop.options) {
							if (jd!=='desktop' && jd!==id) {
								var a = rajmv.desktop.resolveID (jd+'__dialog');
								if (!a) a = rajmv.desktop.resolveID (jd);
								if (a && parseFloat(a.style.top) > parseFloat(d.style.top) ) {
									var th = parseFloat(a.style.top) - od.margin - parseFloat (d.style.top);
									if (height > th) height = th;
								}
							}
						}
					}
					d.style.height = height + 'px';
					if (d3&&d2) d2.style.height= height + 'px';
				}
			}
		};
	},
	
	resolveID : function (identifier) {
		if (identifier=='body') {
			return document.body;
		} else if (identifier.substr(0,1)=='#') {
			return document.getElementById(identifier.substr(1));
		}
	},
	
	getCookie : function (c_name) {
		var i,x,y,ARRcookies=document.cookie.split(";");
		for (i=0;i<ARRcookies.length;i++) {
			x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
			y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
			x=x.replace(/^\s+|\s+$/g,"");
			if (x==c_name) {
				return unescape(y);
			}
		}
	},

	setCookie : function (c_name,value,exdays) {
		var exdate=new Date();
		exdate.setDate(exdate.getDate() + exdays);
		var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
		document.cookie=c_name + "=" + c_value;
	}
};
rajmv.desktop = rajmv.animatedJavascriptDesktop; 

;rajmv.animatedJavascriptDialog = {
	about : {
		whatsThis : 'A PNG-animated-sprite dialog component in javascript without dependencies',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 June',
		url : 'http://mediabeez.ws/'
	},
	globals : {
		timeToClose : 500,
		timeToOpenClose : 500
	},
	settings : {},
	
	init : function (componentInstanceHTMLelement, onInitialized) {
		rajmv.ajcc.options[componentInstanceHTMLelement.id] = {
			items : {}
		};
		rajmv.ajcc.options[componentInstanceHTMLelement.id].items[componentInstanceHTMLelement.id+'__item__0'] = {
			events : {
				initialized : onInitialized
			}
		};
		rajmv.ajsd.loadDialogGraphics (componentInstanceHTMLelement);
	},
	
	loadDialogGraphics : function (componentInstanceHTMLelement) {
		if (!rajmv.ajcc.settings[componentInstanceHTMLelement.id]) rajmv.ajcc.newInstance (componentInstanceHTMLelement);
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		var b = t.baseURL + s.theme + '/';
		if (componentInstanceHTMLelement.children.length>0 && componentInstanceHTMLelement.children[componentInstanceHTMLelement.children.length-1].className=='ajsd_images') {
			s.imageLoaded = true;
			rajmv.ajsd.initDialog(componentInstanceHTMLelement.id);
		} else {
			var html = '';
			html += '<div class="ajsd_images" style="display:none">';
			for (var i=0; i<t.state.highlighted.frameCount; i++) {
				var n = '00'; if (i>=10) n = '0'; if (i>=100) n = ''; n += i;
				html += '<img src="' + b+'frame_highlighted_'+n+'.png"/>';
			}
			for (var i=1; i<t.state.normal.frameCount; i++) {
				var n = '00'; if (i>=10) n = '0'; if (i>=100) n = ''; n += i;
				html += '<img src="' +b+ 'frame_normal_'+n+'.png"/>';
			}
			html += '<img src="' +b+ 'frame_normal_000.png" onload="rajmv.ajsd.initDialog(\''+componentInstanceHTMLelement.id+'\');"/>';
			html += '</div>';
			componentInstanceHTMLelement.innerHTML += html;
		}
	},
	
	initDialog : function (componentInstanceHTMLid) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var o = rajmv.ajcc.options[componentInstanceHTMLid];
		var sl = rajmv.ajsd.settings[componentInstanceHTMLid];
		var t = rajmv.ajcc.themes[s.theme];
		var b = t.baseURL + s.theme + '/';

		s.items[0] = {
			type : 'dialog',
			theme : s.theme,
			stateCurrent  : 'normal'
		};
		var item = s.items[0];

		item.state = {
			normal : { frame : 0, forward : true },
			highlighted : { frame : 0, forward : true }
		};
		item.stateCurrent = 
			item.statePrevious = 'normal';
		item.stateOld = null;
		item.stateNew = null;
		item.animationTimeout = null;

		if (!s.imageLoaded) {
			s.imageLoaded = true;
		
			var d = document.createElement('DIV');
			d.id = componentInstanceHTMLid+'__dialog';
			d.className = 'animatedJavascriptDialog_dialog';
			var ieFilter = 'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
			var html = '';
			html += '<div id="'+componentInstanceHTMLid+'__item__0" style="position:absolute;">';
			html += '<img id="'+componentInstanceHTMLid+'__item__0__img1" style="'+ieFilter+'position:absolute;width:100%;height:100%;" src="'+b+'frame_normal_000.png"/>';
			html += '<img id="'+componentInstanceHTMLid+'__item__0__img2" style="'+ieFilter+'position:absolute;width:100%;height:100%;" src="'+b+'frame_normal_000.png"/>';
			html += '</div>';
			d.innerHTML = html;
			
			var ci = document.getElementById(componentInstanceHTMLid);
			ci.parentNode.insertBefore (d, ci);
			d.appendChild (ci.parentNode.removeChild(ci));
			ci.style.overflow = 'auto';

			d.style.position = '';
			d.style.display = ci.style.display;
			d.style.visibility = ci.style.visibility;
			d.style.left = ci.style.left;
			d.style.top = ci.style.top;
			d.style.width = ci.offsetWidth + 'px';
			if (ci.style.minWidth!=='') {
				d.style.minWidth = (parseFloat(ci.style.minWidth)+20 ) + 'px';
			};
			d.style.height = ci.offsetHeight + 'px';
			d.style.zIndex = ci.style.zIndex;
			var dbb = document.getElementById(componentInstanceHTMLid+'__item__0');
			if (ci.style.minWidth!=='') {
				dbb.style.minWidth = (parseFloat(ci.style.minWidth)+20 ) + 'px';
			};
			dbb.style.width = ci.offsetWidth + 'px';
			dbb.style.height = ci.offsetHeight + 'px';
			dbb.style.zIndex = parseInt(d.style.zIndex) + 1;
			ci.style.position = 'relative';			
			if (ci.className.indexOf('ajsd_relative')===-1 || ci.className.indexOf('ajsd_relative')===false) {
				d.style.position = 'absolute';
			}
			ci.style.left = '4%';
			ci.style.top = '4%';
			ci.style.width = '92%';
			ci.style.height = '92%';
			ci.style.zIndex = parseInt(d.style.zIndex) + 2;
			
			d.onmouseover = function (evt) {
				rajmv.ajsd.onmouseover (this, evt);
			};
			d.onmouseout = function (evt) {
				rajmv.ajsd.onmouseout (this, evt);
			};

/*			
			if (
				t.state
				&& t.state.normal
				&& t.state.normal.opacity 
			) rajmv.ajcc.setOpacity (item.img1, t.state.normal.opacity);
			rajmv.ajcc.setOpacity(item.img2,0);
*/
		
		};
		item.img1 = document.getElementById(componentInstanceHTMLid+'__item__0__img1');
		item.img2 = document.getElementById(componentInstanceHTMLid+'__item__0__img2');
		rajmv.ajcc.setOpacity(item.img2,0);
			
		rajmv.ajcc.animateItem (document.getElementById(componentInstanceHTMLid), document.getElementById(componentInstanceHTMLid+'__item__0'), true, true);
	},
	
	destroy : function (dialog) {
		dialog.parentNode.appendChild (dialog.removeChild (dialog.children[1]));
		dialog.parentNode.removeChild (dialog);
	},
	
	onclick : function (el,evt) {
	},
	
	onmouseover : function (el,evt) {
	return false;
		var buttonHTMLid = el.id;
		buttonHTMLid = buttonHTMLid.replace(/__dialog/,'');
		var s = rajmv.ajcc.settings[buttonHTMLid];
		var item = s.items[0];
		var t = rajmv.ajcc.themes[item.theme];
		if (
			typeof t.state.highlighted=='object' 
			&& item.stateCurrent!='disabled' 
			&& item.stateCurrent!='selected'
			&& item.stateNew!='disabled'
			&& item.stateNew!='selected'
		) {
			item.statePrevious = item.stateCurrent || item.stateNew;
			rajmv.ajcc.changeState (document.getElementById(buttonHTMLid), document.getElementById(buttonHTMLid+'__item__0'), 'highlighted');
		}
	},
	
	onmouseout : function (el,evt) {
	return false;
		var buttonHTMLid = el.id;
		buttonHTMLid = buttonHTMLid.replace(/__dialog/,'');
		var s = rajmv.ajcc.settings[buttonHTMLid];
		var item = s.items[0];
		if (
			item.stateCurrent!='disabled' 
			&& item.stateCurrent!='selected'
			&& item.stateNew!='disabled'
			&& item.stateNew!='selected'
		) {
			rajmv.ajcc.changeState (document.getElementById(buttonHTMLid), document.getElementById(buttonHTMLid+'__item__0'), item.statePrevious);
		}
	}
};
rajmv.ajsd = rajmv.animatedJavascriptDialog; //short-hand

;rajmv.animatedJavascriptButton = {
	about : {
		whatsThis : 'A PNG-animated-sprite button component in javascript without dependencies',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 June',
		url : 'http://mediabeez.ws/'
	},

	init : function (componentInstanceHTMLelement) {
		rajmv.ajsb.loadButtonGraphics (componentInstanceHTMLelement);
	},
	
	loadButtonGraphics : function (componentInstanceHTMLelement) {
		if (!rajmv.ajcc.settings[componentInstanceHTMLelement.id]) rajmv.ajcc.newInstance (componentInstanceHTMLelement);
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		if (componentInstanceHTMLelement.children[0] && componentInstanceHTMLelement.children[0].className=='ajsb_item') {
			s.partiallyPreInitialized = true;
			var item = componentInstanceHTMLelement.children[0];
			item.id = componentInstanceHTMLelement.id+'__item__0';
			$('.ajsb_img', componentInstanceHTMLelement).each (function() {
				this.id = componentInstanceHTMLelement.id+'__item__0__im' + this.id.substr(this.id.length-2);
			});
			s.buttonText = $('td',componentInstanceHTMLelement).html();
			rajmv.ajsb.initButton(componentInstanceHTMLelement.id);
		} else if (componentInstanceHTMLelement.children.length==2 && componentInstanceHTMLelement.children[1].tagName.toLowerCase()=='img') {
				s.imageLoaded = false;
				rajmv.ajsb.initButton(componentInstanceHTMLelement.id);
		} else {
			if (!t.url) alert(t);
			var html = '<img id="' + componentInstanceHTMLelement.id + '__img" class="ajsb_image" src="' + t.url + '" style="position:absolute;visibility:hidden;width:1px;height:1px;" onload="rajmv.ajsb.initButton(\''+componentInstanceHTMLelement.id+'\');"/>';
			s.buttonText = componentInstanceHTMLelement.innerHTML;
			componentInstanceHTMLelement.innerHTML += html;
			componentInstanceHTMLelement.style.position = 'relative';
		}
	},
	
	initButton : function (componentInstanceHTMLid) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var t = rajmv.ajcc.themes[s.theme];
		var itemID = componentInstanceHTMLid+'__item__0';

		if (!s.imageLoaded) {
			s.imageLoaded = true;

			s.items[0] = {
				theme : s.theme
			};
			var item = s.items[0];
			
			var c = document.getElementById(componentInstanceHTMLid);
			if (c.children.length==2) {
				if (c.children[0].tagName.toUpperCase()=='A') {
					item.url = c.children[0].href;
					s.buttonText = c.children[0].innerHTML;
				}
			} else {
			// partiallyPreInitialized
				item.url = $(c.children[0]).attr('url');
			};
			
			document.getElementById(componentInstanceHTMLid).style.textAlign = 'left';

			item.state = {
				normal : { frame : 0, forward : true },
				hover : { frame : 0, forward : true },
				selected : { frame : 0, forward : true },
				disabled : { frame : 0, forward : true }
			};
			item.stateCurrent = 
				item.statePrevious = 'normal';
			item.stateOld = null;
			item.stateNew = null;
			item.animationTimeout = null;
			
			var events = 
				'onclick="rajmv.ajsb.onclick(this,event);" '
				+'onmouseover="rajmv.ajsb.onmouseover(this,event);" '
				+'onmouseout="rajmv.ajsb.onmouseout(this,event);" ';			
			
			var div = document.getElementById(componentInstanceHTMLid);
			var ieFilter = 'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
			var html = '';
			html += '<div id="' + itemID + '" class="ajsb_item" url="'+item.url+'" style="text-align:left;cursor:pointer;position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px;" ' + events + '>';
			html += '<table style="cursor:pointer;position:absolute;width:100%;height:100%;z-index:1100"><tr><td style="text-align:center;vertical-align:middle;filter:alpha(opacity=100);z-index:1100;">'+s.buttonText+'</td></tr></table>';
			html += '<div id="' + componentInstanceHTMLid + '__item__0__img1" class="ajsb_img" style="text-align:left;z-index:100;position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px; ' + ieFilter + '"></div>';
			html += '<div id="' + componentInstanceHTMLid + '__item__0__img2" class="ajsb_img" style="text-align:left;z-index:101;position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px; ' + ieFilter + '"></div>';
			html += '</div>';
			div.innerHTML = html;
			div.style.width = t.frame.width + 'px';
			div.style.height = t.frame.height + 'px';
			div.className += ' animatedJavascriptWidget_initialized';
			item.img1 = document.getElementById(componentInstanceHTMLid+'__item__0__img1');
			item.img2 = document.getElementById(componentInstanceHTMLid+'__item__0__img2');

			// show first frame of animation, "normal" state
			item.img1.style.backgroundColor = 'transparent';
			item.img1.style.backgroundImage = 'url(' + t.url + ')';
			item.img2.style.backgroundColor = 'transparent';
			item.img2.style.backgroundImage = 'url(' + t.url + ')';
			rajmv.ajcc.setOpacity(item.img2,0);

		}; 

		rajmv.ajcc.animateItem (document.getElementById(componentInstanceHTMLid), document.getElementById(itemID), true, true);
	},
	
	enableButton : function () {
	},
	
	onclick : function (el, evt) {
		var buttonHTMLid = el.id;
		buttonHTMLid = buttonHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[buttonHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		
		var el = document.getElementById(buttonHTMLid);
		
		var url = s.items[idx].url;
		if (url != "''") {
			if (url.substr(0,11)=='javascript:') {
				eval(url.substr(11).replace(/%20/g, ' '));
			} else {
				document.location = url;
			};
		};
	},
	
	onmouseover : function (el, evt) {
		var buttonHTMLid = el.id;
		buttonHTMLid = buttonHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[buttonHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		var item = s.items[idx];

		var t = rajmv.ajcc.themes[item.theme];
		if (
			typeof t.state.hover=='object' 
			&& item.stateCurrent!='disabled' 
			&& item.stateCurrent!='selected'
			&& item.stateNew!='disabled'
			&& item.stateNew!='selected'
		) {
			item.statePrevious = item.stateCurrent || item.stateNew;
			rajmv.ajcc.changeState (document.getElementById(buttonHTMLid), el, 'hover');
		}
	},
	
	onmouseout : function (el, evt) {
		var buttonHTMLid = el.id;
		buttonHTMLid = buttonHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[buttonHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		var item = s.items[idx];
		if (
			item.stateCurrent!='disabled' 
			&& item.stateCurrent!='selected'
			&& item.stateNew!='disabled'
			&& item.stateNew!='selected'
		) {
			rajmv.ajcc.changeState (document.getElementById(buttonHTMLid), el, item.statePrevious);
		}
	},
	
	
	error : function (buttonHTMLid, func, errStr) {
		var msg = 'rajmv.animatedJavascriptButton : changeState() : button "' + buttonHTMLid + '" : ' + errStr;
		if (console && console.log) {
			console.log (msg);
		}
	}	
};
rajmv.ajsb = rajmv.animatedJavascriptButton; //short-hand

rajmv.animatedJavascriptMenu = {
	about : {
		whatsThis : 'A PNG-animated-sprite menu component in javascript without dependencies',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 June',
		url : 'http://mediabeez.ws/'
	},
	globals : {
		timeToClose : 500,
		timeToOpenClose : 500
	},
	
	init : function (componentInstanceHTMLelement) {
		rajmv.ajsm.loadMenuGraphics (componentInstanceHTMLelement);
	},
	
	getitems : function (componentInstanceHTMLelement) {
	// called by rajmv.ajcc.init()
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		s.items = [];
		rajmv.ajsm.getitemsForUL (componentInstanceHTMLelement, componentInstanceHTMLelement.children[0], '', 0);	
	},
	
	getitemsForUL : function (componentInstanceHTMLelement, el, path, level) {
		for (var i = 0; i<el.children.length; i++) {
			if (el.children[i].tagName.toUpperCase()==='LI') {
				rajmv.ajsm.getitemsForLI (componentInstanceHTMLelement, el.children[i], path, level);
			};
		}
	},
	
	getitemsForLI : function (componentInstanceHTMLelement, el, path, level) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		var item = {};
		item.path = path;
		item.level = level;
		item.label = el.children[0].innerHTML;
		item.url = el.children[0].href;
		item.active = el.children[0].className.match (/active/);
		item.id = (s.items.length==0 ? 1 : s.items[s.items.length-1].id + 1);
		s.items[s.items.length] = item;
		
		if (el.children.length==2) {
			if (el.children[1].tagName.toUpperCase()==='UL') {
				rajmv.ajsm.getitemsForUL (componentInstanceHTMLelement, el.children[1], (path=='' ? ''+item.id : path+','+item.id), level+1);
			}			
		}
	},
	
	loadMenuGraphics : function (componentInstanceHTMLelement) {
		if (!rajmv.ajcc.settings[componentInstanceHTMLelement.id]) rajmv.ajcc.newInstance (componentInstanceHTMLelement);
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		rajmv.ajsm.getitems (componentInstanceHTMLelement);
		var html = '<img id="' + componentInstanceHTMLelement.id + '__img" src="' + t.url + '" style="width:1px;height:1px;visibility:hidden;" onload="rajmv.ajsm.initMenu(\''+componentInstanceHTMLelement.id+'\');"/>';
		componentInstanceHTMLelement.innerHTML += html;
		componentInstanceHTMLelement.children[0].style.display = 'none'; // hides the <UL> menu
	},
	
	initMenu : function (componentInstanceHTMLid) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var t = rajmv.ajcc.themes[s.theme];
		var div = document.getElementById(componentInstanceHTMLid);
		if (!s.imageLoaded) {
			s.imageLoaded = true;

			s.menuOpens = {};

			var tx = 0;
			var ty = 0;
			var avoidDivs = true;
			if (s.global && s.global.positionTopLeft) {
				var p = s.global.positionTopLeft;
				p = p.split (",");
				tx = parseInt(p[0]);
				ty = parseInt(p[1]);
				avoidDivs = false;
			};

			for (var i in s.items) {
				var item = s.items[i];
				
				
				if (!item.state) {
					item.theme = s.theme;
					item.state = {
						normal : { frame : 0, forward : true },
						hover : { frame : 0, forward : true },
						selected : { frame : 0, forward : true },
						disabled : { frame : 0, forward : true }
					};
					item.stateCurrent = 
						item.statePrevious = item.active ? 'selected' : 'normal';
					item.stateOld = null;
					item.stateNew = null;
					item.animationTimeout = null;
				}

				
				
				
				var level = new Array();
				for (var j=0; j<s.items.length; j++) {
					var m = s.items[j];
					var p = m.path;
					if (m.path===null) m.path='';
					if (!p) {
						p = '';
					} else if (p.lastIndexOf(',') == -1) {
						p = '';
					} else {
						p = p.substr(0, p.lastIndexOf(','));
					}
					for (var k=0; k<s.items.length; k++) {
						if (s.items[k].path == p) break;
					}
					var parentLevel = ( s.items[k] ? s.items[k].level : 0);
					if (typeof level[m.path] == 'undefined') {
						if (rajmv.ajsm.orientationOfLevel(componentInstanceHTMLid, parentLevel) == 'horizontal') {
							level[m.path] = {
								x: (level[p] ? level[p].x : tx),
								y: (level[p] ? level[p].y + t.frame.height + 2 : ty)
							};
							itemHeight = t.frame.height+2;
						}
						else {
							level[m.path] = {
								x: (level[p] ? level[p].x + Math.round(t.frame.width * .75) : tx),
								y: (level[p] ? level[p].y + Math.round(t.frame.height/2) : ty)
							};
						}
					} else {
						if (rajmv.ajsm.orientationOfLevel(componentInstanceHTMLid, m.level) == 'horizontal') {
							level[m.path].x += t.frame.width + 5;
						} else {
							level[m.path].y += t.frame.height + 2;
							itemHeight = t.frame.height + 2;
						}
					};
					if (j==i) break; //found node that is being drawn
				};

				var events = 
					'onclick="rajmv.ajsm.onclick(this,event);" '
					+'onmouseover="rajmv.ajsm.onmouseover(this,event); " '
					+'onmouseout="rajmv.ajsm.onmouseout(this,event); " ';			

				var ieFilter = 'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
				var html = '';
				html += '<div id="' + componentInstanceHTMLid + '__item__' + i + '" style="text-align:center; vertical-align:middle; position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px;' + ieFilter + '" >';
				html += '<table style="cursor:pointer;z-index:100000;position:absolute;width:100%;height:100%"><tr><td id="' + componentInstanceHTMLid + '__item__'+i+'__td"  ' + events + ' style="background-color:transparent; text-align:center;vertical-align:middle;filter:alpha(opacity=100);">'+item.label+'</td></tr></table>';
				html += '<div id="' + componentInstanceHTMLid + '__item__'+i+'__img1" style="z-index:90001;position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px; ' + ieFilter + '"></div>';
				html += '<div id="' + componentInstanceHTMLid + '__item__'+i+'__img2" style="z-index:90002;position:absolute; width:' + t.frame.width + 'px; height:' + t.frame.height + 'px; ' + ieFilter + '" ' + events + '></div>';
				html += '</div>';
				div.innerHTML += html;
				var d = document.getElementById(componentInstanceHTMLid+'__item__'+i);
				d.style.left = level[item.path].x + 'px';
				d.style.top = level[item.path].y+ 'px';
				d.style.display = (item.level==0 ? 'block' : 'none');
				d.style.zIndex = item.level + 90100;
				item.img1 = document.getElementById(componentInstanceHTMLid + '__item__'+i+'__img1');
				item.img2 = document.getElementById(componentInstanceHTMLid + '__item__'+i+'__img2');

				// show first frame of animation, "normal" state
				item.img1.style.backgroundColor = 'transparent';
				item.img1.style.backgroundImage = 'url(' + t.url + ')';
				item.img2.style.backgroundColor = 'transparent';
				item.img2.style.backgroundImage = 'url(' + t.url + ')';
				rajmv.ajcc.setOpacity(item.img2,0);
				
				rajmv.ajcc.animateItem (document.getElementById(componentInstanceHTMLid), document.getElementById(componentInstanceHTMLid+'__item__'+i));
			}
			div.className += ' animatedJavascriptWidget_initialized';
		}
	},
	
	destroyMenu : function (componentInstanceHTMLid) {
		var d = document.getElementById(componentInstanceHTMLid);
		while (d.children.length>2) {
			d.removeChild (d.children[2]);
		};
		if (d.children[1].tagName.toUpperCase()!=='SCRIPT') d.removeChild (d.children[1]);
		d.className = d.className.replace(/animatedJavascriptWidget_initialized/,'');
	},
	
	orientationOfLevel : function (componentInstanceHTMLid, level) {
		var o = rajmv.ajcc.options[componentInstanceHTMLid];
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var result = 'vertical';
		var name = 'level_'+level+'_global';
		if (o && o[name]) {
			if (o[name].orientation) result = o[name].orientation;
		};
		return result;
	},
	
	onclick : function (el,evt) {
		var menuHTMLid = el.id;
		menuHTMLid = menuHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[menuHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		
		var url = s.items[idx].url;
		if (url != "''") {
			if (url.substr(0,11)=='javascript:') {
				eval(decodeURI(url.substr(11)));
			} else {
				document.location = url;
			};
			for (var elID in s.menuOpens) {
				rajmv.ajsm.hideNode(menuHTMLid, elID);
			};
		};
	},
	
	onmouseover : function (el,evt) {
		//console.log ('onmouseover ' + el.id);
		var menuHTMLid = el.id;
		menuHTMLid = menuHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[menuHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		var item = s.items[idx];
		
		//cancel hiding of menu (because we're now hovering over a child of a path that thus needs to stay open).
		if (s.menuOpens[idx]) {
			if (s.menuOpens[idx].timeout) {
					//console.log ('__cancelling close of menu '+idx);
				clearTimeout (s.menuOpens[idx].timeout);	
			}
		};
		for (var elID in s.menuOpens) {
			if (s.items[idx].path.indexOf (s.items[elID].id)!==-1) {
				if (s.menuOpens[elID].timeout) {
					//console.log ('cancelling close of menu '+elID);
					clearTimeout (s.menuOpens[elID].timeout);
				}
			}
		};
		
		//prepare the opening of a potential sub-menu:
		var initialLevel = s.items[idx].level;
		var childIDs = '';
		for (var i=idx+1; i<s.items.length && s.items[i] && s.items[i].level > initialLevel; i++) {
			if (s.items[i].level == (initialLevel + 1)) {
				var menuItemHTMLid = menuHTMLid+'__item__'+i;
				if (typeof s.menuOpens[idx] == 'undefined') {
					s.menuOpens[idx] = {
						children : new Array()
					};
				};
				s.menuOpens[idx].children[menuItemHTMLid] = "";
				if (childIDs!='') childIDs += ',';
				childIDs += menuItemHTMLid;
			}
		};

		if (childIDs!='') {
			//console.log ('opening : '+idx+', '+childIDs);
			rajmv.ajcc.fadeIn (childIDs, rajmv.ajsm.globals.timeToOpenClose);
		}
		
		
		
		// highlighting of current item
		var doe = false;
		if (item.stateCurrent) if (item.stateCurrent!=='disabled' && item.stateCurrent!=='selected') doe = true;
		if (item.stateNew) if (item.stateNew!=='disabled' && item.stateNew!=='selected') doe = true;
		if (doe) {
			item.statePrevious = item.stateCurrent || item.stateNew;
			//rajmv.ajcc.animateItem (document.getElementById(menuHTMLid), el, true, true);
			rajmv.ajcc.changeState (document.getElementById(menuHTMLid), el, 'hover');
		}
	},
	
	onmouseout : function (el,evt) {
		//console.log ('onmouseout ' + el.id);

		var menuHTMLid = el.id;
		menuHTMLid = menuHTMLid.replace(/__.*/,'');
		var s = rajmv.ajcc.settings[menuHTMLid];
		var idx = rajmv.ajcc.getItemIndex(el);
		var item = s.items[idx];
		
		for (var elID in s.menuOpens) {
			if (s.items[idx].path.indexOf (s.items[elID].id)!==-1) {
				if (s.menuOpens[elID].timeout) clearTimeout(s.menuOpens[elID].timeout);
				//console.log ('__timeout to hide set on '+elID);
				s.menuOpens[elID].timeout = setTimeout (
					'rajmv.ajsm.hideNode("'+menuHTMLid+'", "'+elID+'");', rajmv.ajsm.globals.timeToClose
				);
			}
		}
		if (s.menuOpens[idx]) {
			if (s.menuOpens[idx].timeout) clearTimeout(s.menuOpens[idx].timeout);
			//console.log ('timeout to hide set on '+idx);
			s.menuOpens[idx].timeout = setTimeout (function() {
				rajmv.ajsm.hideNode(menuHTMLid, idx);
			}, rajmv.ajsm.globals.timeToClose);
		};

		if (
			item.stateCurrent!='disabled' 
			&& item.stateCurrent!='selected'
			&& item.stateNew!='disabled'
			&& item.stateNew!='selected'
		) {
			rajmv.ajcc.animateItem (document.getElementById(menuHTMLid), el, false, true);
			rajmv.ajcc.changeState (document.getElementById(menuHTMLid), el, item.statePrevious);
		}
	},
	
	hideNode : function (menuHTMLid, idx) {
		var s = rajmv.ajcc.settings[menuHTMLid];
		if (s.menuOpens[idx]) {
			var ids = '';
			for (var c in s.menuOpens[idx].children) {
				if (ids!='') ids+=',';
				ids += c;
			};
			
			var p = s.items[idx].path;

			if (ids!='') {
				//console.log ('hiding ' +idx+ ' '+ ids);
				rajmv.ajcc.fadeOut (ids, rajmv.ajsm.globals.timeToOpenClose);
			}

			delete s.menuOpens[idx];
		}
	}
};
rajmv.ajsm = rajmv.animatedJavascriptMenu; //short-hand

rajmv.animatedJavascriptTabs = {
	about : {
		whatsThis : 'A PNG-animated-sprite tabs component in javascript without dependencies',
		copyright : '(c) (r) 2011 by Rene AJM Veerman <rene.veerman.netherlands@gmail.com>',
		released : '2011 June',
		url : 'http://mediabeez.ws/'
	},

	init : function (componentInstanceHTMLelement) {
		rajmv.ajst.initTabs (componentInstanceHTMLelement.id);
	},
	
	initTabs : function (componentInstanceHTMLid) {
		var ci = componentInstanceHTMLelement = document.getElementById(componentInstanceHTMLid);
		if (!rajmv.ajcc.settings[componentInstanceHTMLelement.id]) rajmv.ajcc.newInstance (componentInstanceHTMLelement);
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var t = rajmv.ajcc.themes[s.theme];
		// in tabs, items are pages

		ci.style.position = 'relative';

		var menu = document.createElement('DIV');
		menu.style.height = '48px';
		var html = '';
		html+= '<img id="' + componentInstanceHTMLid + '_-_top_img" src="' + t.baseURL + t.menuBackgroundImage + '" style="position:absolute;width:100%;"/>';
		html += '<table style="overflow:visible;">';
		html += '<tr>';

		var ul = ci.children[0];
		ul.style.display='none';
		for (var i=0; i<ul.children.length; i++) {
			//fetch the pages from the DOM
			var it = ul.children[i];
			var item = {
				gotoTab : it.children[0].href.replace(/.*#/,''),
				label : it.children[0].innerHTML
			};
			s.items[s.items.length] = item;
			
			var tab = document.getElementById(item.gotoTab);
			if (tab) {
				tab.style.display = (i==0 ? 'block' : 'none');
				tab.style.position = 'relative';
			}
			
			//create animatedJavascriptButtons for each page, to be placed at the top of the container.
			html += '<td id="' + componentInstanceHTMLid + '_-_control_-_' + item.gotoTab + '" style="padding-bottom:3px;vertical-align:bottom">';
			html += '<div id="' + componentInstanceHTMLid + '_-_button_-_' + item.gotoTab + '" class="animatedJavascriptButton animatedTheme__' + t.menuItemTheme + '" style="position:absolute;">';
			html += '<a href="javascript:rajmv.ajst.gotoTab(\'' + componentInstanceHTMLid + '\',\'' + i + '\');">' + item.label + '</a>';
			html += '</div></td>';
		};
		
		html += '</tr>';
		html += '</table>';
		menu.innerHTML = html;
		menu.style.backgroundImage = 'url()';
		ci.insertBefore (menu, ci.children[1]);
		for (var i in s.items) {
			var item = s.items[i];
			rajmv.ajsb.init (document.getElementById(componentInstanceHTMLid+'_-_button_-_'+item.gotoTab));
		};

		var img = document.createElement ('IMG');
		img.src = t.baseURL + t.contentBackgroundImage;
		img.style.position = 'absolute';
		img.style.width = '100%';
		img.style.height = 'inherit';
		ci.insertBefore (img, ci.children[2]);
		
		setTimeout(function() {
			rajmv.ajst.gotoTab (componentInstanceHTMLid, 0);
			ci.style.display = 'block';
		}, 200);
	},
	
	gotoTab : function (componentInstanceHTMLid, itemIndex) {
		var ci = componentInstanceHTMLelement = document.getElementById(componentInstanceHTMLid);
		var s = rajmv.ajcc.settings[componentInstanceHTMLid];
		var item = s.items[itemIndex];
		var tab = document.getElementById(item.gotoTab);
		for (var i in s.items) {
			var it = s.items[parseInt(i)];
			// make the page visible
			var itPage = document.getElementById(it.gotoTab);
			itPage.style.display = (it.gotoTab == item.gotoTab ? 'block' : 'none');
			
			// update it's menu button's state
			var itMenuButton = document.getElementById(componentInstanceHTMLid+'_-_button_-_'+it.gotoTab);
			var itMenuButtonItem = document.getElementById(componentInstanceHTMLid+'_-_button_-_'+it.gotoTab+'__item__0');
			rajmv.ajcc.changeState (itMenuButton, itMenuButtonItem, (it.gotoTab==item.gotoTab ? 'selected' : 'normal'));
		}
	}
	
};
rajmv.ajst = rajmv.animatedJavascriptTabs; //short hand

rajmv.animatedJavascriptScrollpane = {
	report : function (msg) {
	//	console.log (msg);
	},
	
	init : function (componentInstanceHTMLelement) {
		rajmv.ajss.startPreloadOfTheme (componentInstanceHTMLelement);
	},
	
	startPreloadOfTheme : function (componentInstanceHTMLelement) {
		if (!rajmv.ajcc.settings[componentInstanceHTMLelement.id]) rajmv.ajcc.newInstance (componentInstanceHTMLelement);
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		var d = document.createElement('DIV');
		d.id = componentInstanceHTMLelement.id+'__images';
		d.style.display = 'none';
		componentInstanceHTMLelement.appendChild (d);
		
		s.images = t.images;
		s.imagesLoaded = {};
		var html = '';
		for (var imgID in s.images) {
			var url = t.baseURL + s.theme + '/' + s.images[imgID].url;
			html += '<img style="width:1px;height:1px" id="'+componentInstanceHTMLelement.id+'__'+imgID+'" src="'+url+'" onload="rajmv.ajss.imageLoaded(document.getElementById(\''+componentInstanceHTMLelement.id+'\'), this);"/>';
		}
		d.innerHTML += html;
	},
	
	imageLoaded : function (componentInstanceHTMLelement, img) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		var imgID = img.id.split('__')[1];
		s.imagesLoaded[imgID] = img;
		
		var m = n = 0;
		for (var i in s.images) m++;
		for (var j in s.imagesLoaded) n++;
		if (m==n) rajmv.ajss.themeLoaded (componentInstanceHTMLelement);				
	},
	
	themeLoaded : function (componentInstanceHTMLelement) {
		rajmv.ajss.initScrollpane (componentInstanceHTMLelement);
	},
	
	initScrollpane : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		var container = document.createElement ('DIV');
		container.id = componentInstanceHTMLelement.id + '__container';
		container.className = 'ajss_container';
		container.style.width = componentInstanceHTMLelement.style.width;
		container.style.height = componentInstanceHTMLelement.style.height;

		componentInstanceHTMLelement.parentNode.insertBefore (container, componentInstanceHTMLelement);
		componentInstanceHTMLelement.parentNode.removeChild (componentInstanceHTMLelement);
		container.appendChild (componentInstanceHTMLelement);

		s.items[0] = { //holds settings for the vertical scrollbar
			type : 'vertical',
			componentInstanceHTMLelement : componentInstanceHTMLelement,
			container : container,
			theme : s.theme
		};
		s.items[1] = { //holds settings for the horizontal scrollbar
			type : 'horizontal',
			componentInstanceHTMLelement : componentInstanceHTMLelement,
			container : container,
			theme : s.theme
		};
		
		componentInstanceHTMLelement.scrollTop = 0;
		componentInstanceHTMLelement.scrollLeft = 0;
		componentInstanceHTMLelement.style.overflow = 'hidden';
		if (componentInstanceHTMLelement.style.position=='absolute') {
			container.style.position = 'absolute';
			container.style.left = componentInstanceHTMLelement.style.left;
			componentInstanceHTMLelement.style.left = '0px';
			container.style.top = componentInstanceHTMLelement.style.top;
			componentInstanceHTMLelement.style.top = '0px';
		};

		setTimeout (function () {
		rajmv.ajss.resize (componentInstanceHTMLelement);
		}, 500);
	},
	
	initScrollbarHorizontal : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		var item = s.items[1];
	
		if (item.sliderbar) {
			item.sliderbar.style.display='block';
		} else {
			var sliderbar = document.createElement ('DIV');
			sliderbar.item = item;
			sliderbar.className = 'ajss_sliderbar';
			sliderbar.style.position = 'absolute';
			sliderbar.style.height = t.images.hor_sliderbar.height + 'px';
			sliderbar.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.hor_sliderbar.url+') no-repeat';
			sliderbar.style.backgroundPosition = '0px 0px';
			sliderbar.style.backgroundSize = '100% 100%';
			var sliderTop = document.createElement ('DIV'); //could be called sliderLeft, but since left goes to the top of the page and this simplifies the code...		
			sliderTop.item = item;
			sliderTop.className = 'ajss_sliderTop';
			sliderTop.style.position = 'absolute';
			sliderTop.style.width = '20px';
			sliderTop.style.height = '20px';
			sliderTop.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.hor_sliderTop.url+') no-repeat';
			var sliderBottom = document.createElement ('DIV'); //right side button, goes to bottom.
			sliderBottom.item = item;
			sliderBottom.className = 'ajss_sliderBottom';
			sliderBottom.style.position = 'absolute';
			sliderBottom.style.width = '20px';
			sliderBottom.style.height = '20px';
			sliderBottom.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.hor_sliderBottom.url+') no-repeat';
			var slider = document.createElement ('DIV');
			slider.id = componentInstanceHTMLelement.id+'__horizontal';
			slider.className = 'ajss_slider';
			slider.style.position = 'absolute';
			slider.style.width = '40px';
			slider.style.height = '15px';
			slider.style.top = '3px';
			slider.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.hor_slider.url+') no-repeat';
			slider.style.backgroundSize = '100% 100%';
	
			sliderbar.appendChild (sliderTop);
			sliderbar.appendChild (slider);
			sliderbar.appendChild (sliderBottom);		
			item.container.insertBefore (sliderbar, componentInstanceHTMLelement);
			
			rajmv.ajss.hookScrollwheel (item.componentInstanceHTMLelement, rajmv.ajss._mousewheel, false, true);
			rajmv.ajss.hookEvent (item.container, 'mousedown', rajmv.ajss._disableDrag, true, true);
			rajmv.ajss.hookEvent (sliderbar, 'click', rajmv.ajss._click, true, true);
			rajmv.ajss.hookEvent (sliderTop, 'click', rajmv.ajss._click, true, true);
			rajmv.ajss.hookEvent (slider, 'mousedown', rajmv.ajss._mousedown, true, true);
			rajmv.ajss.hookEvent (slider, 'mouseup', rajmv.ajss._mouseup, true, true);
			rajmv.ajss.hookEvent (slider, 'mouseout', rajmv.ajss._mouseout, true, true);
			rajmv.ajss.hookEvent (sliderBottom, 'click', rajmv.ajss._click, true, true);
			
			item.sliderbar = sliderbar;
			item.sliderTop = sliderTop;
			item.slider = slider;
			item.sliderBottom = sliderBottom;
		}
	},
	
	initScrollbarVertical : function (componentInstanceHTMLelement) {		
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		var item = s.items[0];

		if (item.sliderbar) {
			item.sliderbar.style.display='block';
		} else {
			var sliderbar = document.createElement ('DIV');
			sliderbar.item = item;
			sliderbar.className = 'ajss_sliderbar';
			sliderbar.style.position = 'absolute';
			sliderbar.style.width = t.images.ver_sliderbar.width+'px';
			sliderbar.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.ver_sliderbar.url+') no-repeat';
			sliderbar.style.backgroundPosition = '0px 0px';
			sliderbar.style.backgroundSize = '100% 100%';
			var sliderTop = document.createElement ('DIV');
			sliderTop.item = item;
			sliderTop.className = 'ajss_sliderTop';
			sliderTop.style.position = 'absolute';
			sliderTop.style.width = '20px';
			sliderTop.style.height = '20px';
			sliderTop.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.ver_sliderTop.url+') no-repeat';
			var sliderBottom = document.createElement ('DIV');
			sliderBottom.item = item;
			sliderBottom.className = 'ajss_sliderBottom';
			sliderBottom.style.position = 'absolute';
			sliderBottom.style.width = '20px';
			sliderBottom.style.height = '20px';
			sliderBottom.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.ver_sliderBottom.url+') no-repeat';
			var slider = document.createElement ('DIV');
			slider.id = componentInstanceHTMLelement.id+'__vertical';
			slider.className = 'ajss_slider';
			slider.style.position = 'absolute';
			slider.style.width = '15px';
			slider.style.height = '40px';
			slider.style.left = '2px';
			slider.style.background = 'url('+t.baseURL+s.theme+'/'+t.images.ver_slider.url+') no-repeat';
			slider.style.backgroundSize = '100% 100%';
	
			sliderbar.appendChild (sliderTop);
			sliderbar.appendChild (slider);
			sliderbar.appendChild (sliderBottom);		
			item.container.insertBefore (sliderbar, componentInstanceHTMLelement);
			
			rajmv.ajss.hookScrollwheel (item.componentInstanceHTMLelement, rajmv.ajss._mousewheel, false, true);
			rajmv.ajss.hookEvent (item.container, 'mousedown', rajmv.ajss._disableDrag, true, true);
			rajmv.ajss.hookEvent (sliderbar, 'click', rajmv.ajss._click, true, true);
			rajmv.ajss.hookEvent (sliderTop, 'click', rajmv.ajss._click, true, true);
			rajmv.ajss.hookEvent (slider, 'mousedown', rajmv.ajss._mousedown, true, true);
			rajmv.ajss.hookEvent (slider, 'mouseup', rajmv.ajss._mouseup, true, true);
			rajmv.ajss.hookEvent (slider, 'mouseout', rajmv.ajss._mouseout, true, true);
			rajmv.ajss.hookEvent (sliderBottom, 'click', rajmv.ajss._click, true, true);
			
			item.sliderbar = sliderbar;
			item.sliderTop = sliderTop;
			item.slider = slider;
			item.sliderBottom = sliderBottom;
		}
	},
	
	hideScrollbarHorizontal : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		if (s.items[1].sliderbar) s.items[1].sliderbar.style.display = 'none';		
	},
	
	hideScrollbarVertical : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		if (s.items[0].sliderbar) s.items[0].sliderbar.style.display = 'none';		
	},
	
	resize : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var t = rajmv.ajcc.themes[s.theme];
		
		componentInstanceHTMLelement.style.width = s.items[0].container.offsetWidth + 'px';
		componentInstanceHTMLelement.style.height = s.items[0].container.offsetHeight + 'px';
		
		if (componentInstanceHTMLelement.scrollWidth>componentInstanceHTMLelement.offsetWidth) 
			rajmv.ajss.initScrollbarHorizontal (componentInstanceHTMLelement);
		else 
			rajmv.ajss.hideScrollbarHorizontal (componentInstanceHTMLelement);
		if (componentInstanceHTMLelement.scrollHeight>componentInstanceHTMLelement.offsetHeight)
			rajmv.ajss.initScrollbarVertical(componentInstanceHTMLelement);
		else 
			rajmv.ajss.hideScrollbarVertical (componentInstanceHTMLelement);

		var item = s.items[0];
		if (item.sliderbar) {		
			if (t.options.ver_sliderbar_position=='left') {
				item.sliderbar.style.left = '0px';
				item.componentInstanceHTMLelement.style.position = 'absolute';
				item.componentInstanceHTMLelement.style.left = (item.sliderbar.offsetWidth + 5 ) + 'px';
				item.componentInstanceHTMLelement.style.width = (item.container.offsetWidth - item.sliderbar.offsetWidth-5) + 'px';
			} else if (item.container.style.position=='absolute') {
				item.sliderbar.style.left = (item.container.offsetWidth - item.sliderbar.offsetWidth) + 'px';
			} else {
				item.sliderbar.style.left = (item.container.offsetLeft + item.container.offsetWidth - item.sliderbar.offsetWidth) + 'px';
			}
			item.componentInstanceHTMLelement.style.width = (item.container.offsetWidth - item.sliderbar.offsetWidth - 5) + 'px';
			if (s.items[1].sliderbar) {
				item.sliderbar.style.height = (item.container.offsetHeight - s.items[1].sliderbar.offsetHeight) + 'px';
				item.sliderBottom.style.top = (item.container.offsetHeight - s.items[1].sliderbar.offsetHeight - item.sliderBottom.offsetHeight) + 'px';
			} else {
				item.sliderbar.style.height = (item.container.offsetHeight) + 'px';
				item.sliderBottom.style.top = (item.container.offsetHeight - item.sliderBottom.offsetHeight) + 'px';
			};
			item.slider.style.top = item.sliderTop.offsetHeight + 'px';
		};

		item = s.items[1];
		if (item.sliderbar) {		
			if (item.container.style.position=='absolute') {
				item.sliderbar.style.top = (item.container.offsetHeight - item.sliderbar.offsetHeight) + 'px';
			} else {
				item.sliderbar.style.top = (item.container.offsetTop + item.container.offsetHeight - item.sliderbar.offsetHeight) + 'px';
			}
			item.componentInstanceHTMLelement.style.height = (item.container.offsetHeight - item.sliderbar.offsetHeight - 5) + 'px';
			if (s.items[0].sliderbar) {
				item.sliderbar.style.width = (item.container.offsetWidth - s.items[0].sliderbar.offsetWidth) + 'px';
				item.sliderBottom.style.left = (item.container.offsetWidth - s.items[0].sliderbar.offsetWidth - item.sliderBottom.offsetWidth) + 'px';
			} else {
				item.sliderbar.style.width = (item.container.offsetWidth) + 'px';
				item.sliderBottom.style.left = (item.container.offsetWidth - item.sliderBottom.offsetWidth) + 'px';
			};
			item.slider.style.left = item.sliderTop.offsetWidth + 'px';
		};
	},
	
	containerSizeChanged : function (componentInstanceHTMLelement) {
		rajmv.ajss.resize (componentInstanceHTMLelement);
	},
	
	hookEvent : function (el, eventName, handler, useCapture, add) {
		if (add) {
			if (el.addEventListener) {
			// Standards browsers
				el.addEventListener (eventName, handler, useCapture);
			} else if (el.attachEvent) {
			// IE < v9.0
				el.attachEvent ('on'+eventName, handler);
			}
		} else {
			if (el.removeEventListener) {
			// Standards browsers
				el.removeEventListener (eventName, handler, useCapture);
			} else if (el.detachEvent) {
				el.detachEvent ('on'+eventName, handler);
			}
		}
	},
	
	hookScrollwheel : function (el, handler, useCapture, add) {
		if (add) {
			if (el.addEventListener) {
				el.addEventListener ('DOMMouseScroll', handler, false);
				el.addEventListener ('mousewheel', handler, false);
			} else {
				el.onmousewheel = handler;
			}
		} else {
			if (el.removeEventListener) {
				el.removeEventListener('DOMMouseScroll', handler, false);
				el.removeEventListener('mousewheel', handler, false);
			} else {
				el.onmousewheel = null;
			}
		}
	},
	
	getItem : function (el, itemIdx) {
		var componentInstanceHTMLelement = null;
		while (!componentInstanceHTMLelement) {
			if (el && el.className && el.className.indexOf('ajss_container')!==-1) {
				componentInstanceHTMLelement = el.children[el.children.length-1];
			}
			el = el.parentNode;
		};
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[itemIdx];
		return item;
	},
	
	getSliderbarSizeVertical : function (componentInstanceHTMLelement) {
		var s = rajmv.ajcc.settings[componentInstanceHTMLelement.id];
		var item = s.items[0];
		return item.sliderbar.offsetHeight - item.sliderTop.offsetHeight - item.sliderBottom.offsetHeight;		
	},
	
	animatedScroll : function (item) {
		item.componentInstanceHTMLelement.scrollTop += item.rolled/10;
		item.rolled -= item.rolled/10;
		item.rolledSteps--;

		var percentageDown = (
			(item.componentInstanceHTMLelement.scrollTop * 100)
			/  (item.componentInstanceHTMLelement.scrollHeight-item.container.offsetHeight)
		);
		
		var top = (
			( percentageDown 
				* (item.sliderBottom.offsetTop - item.sliderTop.offsetHeight - item.slider.offsetHeight)
			) / 100			
		);
		item.slider.style.top = (item.sliderTop.offsetHeight + top) + 'px';
		
		if (item.rolledSteps>0) setTimeout(function() {
			rajmv.ajss.animatedScroll (item);
		}, 50);
	},
	
	_disableDrag : function (evt) {
		return false;
	},
	
	_mousewheel : function (evt,two,three) {
		evt = evt ? evt : window.event;
		var rolled = 0;
		if ('wheelDelta' in evt) {
			rolled = event.wheelDelta;
		} else {
			rolled = 20 * evt.detail;
		}

		var s = rajmv.ajcc.settings[this.id];
		var item = s.items[0];

		if (!item.rolled) item.rolled=0;
		item.rolled += rolled;
		item.rolledSteps = 50;
		
		rajmv.ajss.animatedScroll (item);

		if (evt.preventDefault) evt.preventDefault();
	},
	
	_mousedown : function (evt) {
		var el = evt.target;
		var item = rajmv.ajss.getItem (el, el.id.match(/horizontal/)?1:0);
		rajmv.ajss.draggedItem = item;
		
		item.sliderBeginClientX = evt.clientX;
		item.sliderBeginClientY = evt.clientY;			
		item.sliderBeginOffsetLeft = el.offsetLeft;;
		item.sliderBeginOffsetTop = el.offsetTop;
		
		rajmv.ajss.report ('_mousedown #' + el.id + '.' + el.className.replace(/\ /,'.'));
		rajmv.ajss.hookEvent (window, 'mousemove', rajmv.ajss._mousemove, true, true);
		rajmv.ajss.hookEvent (window, 'mouseup', rajmv.ajss._mouseup, true, true);
		
		//prevent default drag and drop functionality of the browser
		if (evt.preventDefault) evt.preventDefault();
		return false; 
	},

	_mouseup : function (evt) {
		rajmv.ajss.hookEvent (window, 'mousemove', rajmv.ajss._mousemove, true, false);

		var el = evt.currentTarget;
		rajmv.ajss.report ('_mouseup #' + el.id + '.' + (el.className?el.className.replace(/\ /,'.'):''));
		setTimeout ("delete rajmv.ajss.draggedItem",50);
	},

	_mousemove : function (evt) {
		var item = rajmv.ajss.draggedItem;
		var s = rajmv.ajcc.settings[item.componentInstanceHTMLelement.id];
		if (item.type=='vertical') {
			item.slider.style.top = (item.sliderBeginOffsetTop + (evt.clientY - item.sliderBeginClientY))  + 'px';
			if (item.slider.offsetTop < item.sliderTop.offsetHeight) item.slider.style.top = item.sliderTop.offsetHeight + 'px';
			if (item.slider.offsetTop > item.sliderBottom.offsetTop - item.slider.offsetHeight) item.slider.style.top = (item.sliderBottom.offsetTop - item.slider.offsetHeight) + 'px';
			
			var percentageDown = (
				((item.slider.offsetTop-item.sliderTop.offsetHeight) * 100)
				/ (item.sliderBottom.offsetTop - item.sliderTop.offsetHeight - item.slider.offsetHeight)
			);
			var scrollTop = Math.round(
				(percentageDown * (item.componentInstanceHTMLelement.scrollHeight-item.componentInstanceHTMLelement.offsetHeight))
				/ 100
			);
			item.componentInstanceHTMLelement.scrollTop = scrollTop;
		} else {
		//horizontal
			item.slider.style.left = (item.sliderBeginOffsetLeft + (evt.clientX - item.sliderBeginClientX)) + 'px';
			if (item.slider.offsetLeft < item.sliderTop.offsetWidth) item.slider.style.left = item.sliderTop.offsetWidth + 'px';
			if (item.slider.offsetLeft > item.sliderBottom.offsetLeft - item.slider.offsetWidth) item.slider.style.left = (item.sliderBottom.offsetLeft - item.slider.offsetWidth) + 'px';

			var percentageDown = (
				((item.slider.offsetLeft - item.sliderTop.offsetWidth) * 100)
				/ (item.sliderBottom.offsetLeft - item.sliderTop.offsetWidth - item.slider.offsetWidth)
			);
			var scrollLeft = Math.round(
				(percentageDown * (item.componentInstanceHTMLelement.scrollWidth - item.componentInstanceHTMLelement.offsetWidth))
				/ 100
			);
			item.componentInstanceHTMLelement.scrollLeft = scrollLeft;
		};
		rajmv.ajss.report ('_mousemove '+percentageDown+' '+scrollTop);
		return false;
	},
	
	_mouseout : function (evt) {
		evt = evt ? evt : window.event;
		var el = evt.currentTarget;
		rajmv.ajss.report ('_mouseout #' + el.id + '.' + el.className.replace(/\ /,'.'));
		rajmv.ajss.hookEvent (el, 'mousemove', rajmv.ajss._mousemove, false, false);
	},		
	
	_click : function (evt) { 
		var el = evt.currentTarget;
		var item = el.item;

		if (!rajmv.ajss.draggedItem && el.className=='ajss_sliderbar') {
			if (item.type=='vertical') {
				var offset = 0;
				var y = evt.clientY - item.sliderbar.offsetTop; 
				if (y < item.slider.offsetTop) offset = -1 * item.componentInstanceHTMLelement.offsetHeight;
				if (y > item.slider.offsetTop + item.slider.offsetHeight) offset = item.componentInstanceHTMLelement.offsetHeight;

				item.componentInstanceHTMLelement.scrollTop += offset;

				var percentageDown = (
					(item.componentInstanceHTMLelement.scrollTop * 100)
					/  (item.componentInstanceHTMLelement.scrollHeight-item.container.offsetHeight)
				);
				
				var top = (
					( percentageDown 
						* (item.sliderBottom.offsetTop - item.sliderTop.offsetHeight - item.slider.offsetHeight)
					) / 100			
				);
				item.slider.style.top = (item.sliderTop.offsetHeight + top) + 'px';
				if (item.slider.offsetTop < item.sliderTop.offsetHeight) item.slider.style.top = item.sliderTop.offsetHeight + 'px';
				if (item.slider.offsetTop > item.sliderBottom.offsetTop - item.slider.offsetHeight) item.slider.style.top = (item.sliderBottom.offsetTop - item.slider.offsetHeight) + 'px';
			} else {
			//horizontal
				var offset = 0;
				var x = evt.clientX - item.sliderbar.offsetLeft;
				if (x < item.slider.offsetLeft) offset = -1 * item.componentInstanceHTMLelement.offsetWidth;
				if (x > item.slider.offsetLeft + item.slider.offsetWidth) offset = item.componentInstanceHTMLelement.offsetWidth;
				item.componentInstanceHTMLelement.scrollLeft += offset;

				var percentageLeft = (
					(item.componentInstanceHTMLelement.scrollLeft * 100)
					/  (item.componentInstanceHTMLelement.scrollWidth-item.container.offsetWidth)
				);
				
				var left = (
					( percentageLeft
						* (item.sliderBottom.offsetLeft - item.sliderTop.offsetWidth - item.slider.offsetWidth)
					) / 100			
				);
				item.slider.style.left = (item.sliderTop.offsetWidth + left) + 'px';
				if (item.slider.offsetLeft < item.sliderTop.offsetWidth) item.slider.style.left = item.sliderTop.offsetWidth + 'px';
				if (item.slider.offsetLeft > item.sliderBottom.offsetLeft - item.slider.offsetWidth) item.slider.style.left = (item.sliderBottom.offsetLeft - item.slider.offsetWidth) + 'px';
			};
		} else {
			if (el.className.indexOf('sliderTop')!==-1) var offset = -10;
			if (el.className.indexOf('sliderBottom')!==-1) var offset = 10;
			
			if (item.type=='vertical') {
				item.slider.style.top = (parseFloat(item.slider.style.top) + offset) + 'px';
				if (item.slider.offsetTop < item.sliderTop.offsetHeight) item.slider.style.top = item.sliderTop.offsetHeight + 'px';
				if (item.slider.offsetTop > item.sliderBottom.offsetTop - item.slider.offsetHeight) item.slider.style.top = (item.sliderBottom.offsetTop - item.slider.offsetHeight) + 'px';
				
				var percentageDown = (
					((item.slider.offsetTop-item.sliderTop.offsetHeight) * 100)
					/ (item.sliderBottom.offsetTop - item.sliderTop.offsetHeight - item.slider.offsetHeight)
				);
				var scrollTop = Math.round(
					(percentageDown * (item.componentInstanceHTMLelement.scrollHeight-item.componentInstanceHTMLelement.offsetHeight))
					/ 100
				);
				item.componentInstanceHTMLelement.scrollTop = scrollTop;
			} else {
			//horizontal
				item.slider.style.left = (parseFloat(item.slider.style.left) + offset) + 'px';
				if (item.slider.offsetLeft < item.sliderTop.offsetWidth) item.slider.style.left = item.sliderTop.offsetWidth + 'px';
				if (item.slider.offsetLeft > item.sliderBottom.offsetLeft - item.slider.offsetWidth) item.slider.style.left = (item.sliderBottom.offsetLeft - item.slider.offsetWidth) + 'px';
	
				var percentageDown = (
					((item.slider.offsetLeft - item.sliderTop.offsetWidth) * 100)
					/ (item.sliderBottom.offsetLeft - item.sliderTop.offsetWidth - item.slider.offsetWidth)
				);
				var scrollLeft = Math.round(
					(percentageDown * (item.componentInstanceHTMLelement.scrollWidth - item.componentInstanceHTMLelement.offsetWidth))
					/ 100
				);
				item.componentInstanceHTMLelement.scrollLeft = scrollLeft;
			}
		};
		rajmv.ajss.report ('_click #' + el.id + '.' + el.className.replace(/\ /,'.'));
	}
};
rajmv.ajss = rajmv.animatedJavascriptScrollpane; //short hand

eval(function(a,b,c,d){while(b--)if(c[b])a=a.replace(new RegExp(d+b+d,'g'),c[b]);return a}("3(!4)5 4={};4.6={8:{9:150,10:12},11:13(){14.15=14.16();14.17=[];14.18=19},20:13(21){14.22(21)},22:13(21){23=14.24(21.25);3(!23)26 19;23.27();23.clearRect(0,0,21.28,21.29);5 30=14.8.10;5 31=21.32.33.34;5 35=36.37(21.28/2);5 38=36.37(21.29/2);39(5 i=0;i<30;i++){5 40=((36.PI*2)/30)*i;5 41=36.41(40);5 42=36.42(40);5 43=35-(36.41(40));5 44=38-(36.42(40));23.27();23.translate(43,44);23.rotate(40);5 45=21.46[0];39(5 j=31;j>0;j--){3(i==21.47-j){45=21.46[31-j]}}3(!45||!45.28){23.48();23.48();26 19}49 3(45==21.46[31-1]){21.50=19}51=-1*(45.28/2.727272727272727);23.drawImage(45,51,21.32.centerGapRadius);23.48()}23.48();21.47++;3(21.47>14.8.10)21.47=1},addIcon:13(52,53,28,29,32,54){14.55=14.56();5 57=14.58();5 59=60.61('DIV');59.62.63='none';59.57=57;59.className='4.64';3(52){59.62.65='absolute';60.66.67(59)}49{59.62.65='relative';53.67(59)};59.62.28=28+'43';59.62.29=29+'43';5 25=60.61('CANVAS');25.57=57;25.28=28;25.29=29;59.67(25);3((53===60.66)){5 43=14.55.28;5 44=14.55.29}49{5 43=(53.68>0)?53.68:69(53.62.28);5 44=(53.70>0)?53.70:69(53.62.29)};5 71=(59.68>0)?59.68:69(59.62.28);5 72=(59.70>0)?59.70:69(59.62.29);5 73=0;5 74=0;3(52){5 e=53;while(e&&!(e===60.66)){73+=e.offsetLeft;74+=e.offsetTop;e=e.offsetParent}};59.62.left=(73+36.37((43-71)/2))+'43';59.62.top=(74+(36.37((44-72)/2)))+'43';59.62.zIndex=9000;59.62.63='block';3(14.15.75){googleExCanvas()};5 46={};39(5 i=0;i<32.33.34;i++){46[i]=76 Image();46[i].src=32.33[i]}14.17=14.17.concat({57:57,47:7,77:54,50:78,32:32,46:46,79:59,25:59.childNodes[0],28:28,29:29});3(!4.64.18)4.64.80();26 59},81:13(82){5 83=19;39(5 i=0;i<14.17.34;i++){3(14.17[i].79==82)83=14.17[i]};26 83},start:13(84){5 21=14.81($('85.4.64',84)[0]);3(21){21.77=78}},stop:13(84){5 21=14.81($('85.4.64',84)[0]);3(21){21.77=19}},80:13(){39(5 i=0;i<14.17.34;i++){5 21=14.17[i]}14.86();14.87=setInterval('4.64.86()',14.8.9);14.18=78},88:13(){clearInterval(14.87);14.87=null;14.18=19},86:13(){39(5 i=0;i<14.17.34;i++){5 21=14.17[i];3(!21.25||!21.25.57){14.89(i)}49{3(21.77||21.50){14.20(14.17[i])}}}},89:13(90){3(14.17[i]){5 21=14.17[i];3(21.79&&21.79.57)21.79.parentNode.removeChild(21.79);14.17.splice(90,1)}3(14.17.34==0)14.88()},91:13(92,sourceLocation){3(93 94!=='undefined'){94.log(92)};14.88();alert(92)},16:13(){5 95=96.userAgent.97();5 r={};r.major=69(96.98);r.minor=parseFloat(96.98);r.99=((95.100('99')!=-1));r.30=((95.100('mozilla')!=-1)&&(95.100('spoofer')==-1)&&(95.100('compatible')==-1)&&(95.100('opera')==-1)&&(95.100('webtv')==-1));r.75=(95.100(\"msie\")!=-1);26 r},56:13(){5 45=0;5 101=0;3(93(102.103)=='number'){45=102.103;101=102.innerHeight}49 3(60.104&&(60.104.105||60.104.106)){45=60.104.105;101=60.104.106}49 3(60.66&&(60.66.105||60.66.106)){45=60.66.105;101=60.66.106};26{28:45,29:101}},24:13(25){5 107='4.64.24(): ';3(93 25!=='object'){14.91('Invalid 25 : '+93 25,107);26 19};3(!(25.tagName.97()=='25')||!25.57){14.91('108 does not appear to be a valid HTML DOM element node. 93='+93 25,107);26 19}3(93 25.109!=='13'){14.91('108 with .57=\"'+25.57+'\" hasnt got a .109() method.\\nIf you\\'re 77 IE, 14 means google\\'s excanvas js-lib wasn\\'t properly initialized.',107);26 19}5 r=25.109('2d');26 r},58:13(){5 110=76 Date();26 110.getTime()}};4.64=4.6;4.6.11()",111,'|||if|rajmv|var|animatedCanvasSpinner||options|timePerFrame|numStripes|initialize||function|this|browserInfo|getBrowserInfo|openIcons|runningAnyAnims|false|drawFrame|icon|drawFrameLoaderIcon|ctx|getDrawingInterface|canvas|return|save|width|height|ns|frameCount|theme|stripes|length|mx|Math|round|my|for|angle|cos|sin|px|py|aw|images|frame|restore|else|newlyCreated|magicOffset|absolutePositioned|pel|startImmediately|browserSize|getBrowserSize|id|getNewID|nel|document|createElement|style|display|acs|position|body|appendChild|offsetWidth|parseInt|offsetHeight|cx|cy|rx|ry|ie|new|running|true|container|startAnimations|findIconByContainer|containerElement|found|elOrParent|div|runAnimations|runInterval|stopAnimations|removeLoadingIcon|idx|failsMiserably|msg|typeof|console|agent|navigator|toLowerCase|appVersion|windows|indexOf|ah|window|innerWidth|documentElement|clientWidth|clientHeight|fncn|Canvas|getContext|now'.split('|'),'\\b'));eval(function(a,b,c,d){while(b--)if(c[b])a=a.replace(new RegExp(d+b+d,'g'),c[b]);return a}('11 12=13(){11 m=14;11 15=m.17;11 18=m.sin;11 19=m.cos;11 Z=10;11 20=Z/2;11 21={22:13(23){11 24=23||document;25(/MSIE/.test(navigator.userAgent)&&!window.opera){11 26=27;26.28(24)}},28:13(24){25(!24.29["30"]){24.29.add("30","urn:schemas-microsoft-com:vml")};11 31=24.createStyleSheet();31.cssText="32{display:inline-block;33:34;"+"text-align:35;36:300px;37:150px}"+"30\\\\:*{behavior:url(#38#VML)}";11 39=24.getElementsByTagName("32");40(11 i=0;i<39.41;i++){25(!39[i].42){27.43(39[i])}}},44:13(45){11 46=45.46;11 47=45.48.49(46);25(46.slice(-2)!="/>"){11 51="/"+45.51;11 52;while((52=45.nextSibling)&&52.51!=51){52.53()}25(52){52.53()}};45.parentNode.replaceChild(47,45);54 47},43:13(45){45=27.44(45);45.42=13(){25(27.55){54 27.55}54 27.55=56 57(27)};45.58(\'onpropertychange\',59);45.58(\'onresize\',60);11 61=45.62;25(61.36&&61.36.63){45.64.36=61.36.65+"66"}67{45.36=45.68}25(61.37&&61.37.63){45.64.37=61.37.65+"66"}67{45.37=45.69}54 45}};13 59(e){11 45=e.70;71(e.propertyName){72\'36\':45.64.36=45.62.36.65+"66";45.42().73();74;72\'37\':45.64.37=45.62.37.65+"66";45.42().73();74}}13 60(e){11 45=e.70;25(45.75){45.75.64.36=45.68+\'66\';45.75.64.37=45.69+\'66\'}}21.22();11 76=[];40(11 i=0;i<16;i++){40(11 j=0;j<16;j++){76[i*16+j]=i.77(16)+j.77(16)}}13 78(){54[[1,0,0],[0,1,0],[0,0,1]]}13 79(80,81){11 82=78();40(11 x=0;x<3;x++){40(11 y=0;y<3;y++){11 83=0;40(11 z=0;z<3;z++){83+=80[x][z]*81[z][y]}82[x][y]=83}}54 82}13 84(85,86){86.87=85.87;86.88=85.88;86.89=85.89;86.90=85.90;86.91=85.91;86.92=85.92;86.93=85.93;86.94=85.94;86.95=85.95;86.96=85.96;86.97=85.97;86.98=85.98}13 99(101){11 102,103=1;101=String(101);25(101.104(0,3)=="rgb"){11 105=101.106("(",3);11 107=101.106(")",105+1);11 108=101.104(105+1,107).split(",");102="#";40(11 i=0;i<3;i++){102+=76[Number(108[i])]}25((108.41==4)&&(101.substr(3,1)=="a")){103=108[3]}}67{102=101}54[102,103]}13 109(88){71(88){72"110":54"flat";72"17":54"17";72"111":38:54"111"}}13 57(112){27.113=78();27.114=[];27.115=[];27.116=[];27.96="#117";27.87="#117";27.90=1;27.89="miter";27.88="110";27.91=Z*1;27.118=1;27.32=112;11 45=112.48.49(\'119\');45.64.36=112.68+\'66\';45.64.37=112.69+\'66\';45.64.33=\'34\';45.64.120=\'121\';112.appendChild(45);27.122=45;27.97=1;27.98=1};11 123=57.124;123.73=13(){27.122.innerHTML="";27.116=[]};123.126=13(){27.116=[]};123.127=13(128,129){27.116.130({131:"127",x:128,y:129});27.132=128;27.133=129};123.134=13(128,129){27.116.130({131:"134",x:128,y:129});27.132=128;27.133=129};123.135=13(136,137,138,139,128,129){27.116.130({131:"135",140:136,141:137,142:138,143:139,x:128,y:129});27.132=128;27.133=129};123.quadraticCurveTo=13(144,145,128,129){11 140=27.132+2.0/3.0*(144-27.132);11 141=27.133+2.0/3.0*(145-27.133);11 142=140+(128-27.132)/3.0;11 143=141+(129-27.133)/3.0;27.135(140,141,142,143,128,129)};123.arc=13(128,129,146,147,148,149){146*=Z;11 150=149?"151":"152";11 153=128+(19(147)*146)-20;11 154=129+(18(147)*146)-20;11 155=128+(19(148)*146)-20;11 156=129+(18(148)*146)-20;25(153==155&&!149){153+=0.125}27.116.130({131:150,x:128,y:129,157:146,153:153,154:154,155:155,156:156})};123.rect=13(128,129,158,159){27.127(128,129);27.134(128+158,129);27.134(128+158,129+159);27.134(128,129+159);27.160()};123.strokeRect=13(128,129,158,159){27.126();27.127(128,129);27.134(128+158,129);27.134(128+158,129+159);27.134(128,129+159);27.160();27.161()};123.fillRect=13(128,129,158,159){27.126();27.127(128,129);27.134(128+158,129);27.134(128+158,129+159);27.134(128,129+159);27.160();27.162()};123.createLinearGradient=13(163,164,165,166){11 167=56 168("167");54 167};123.createRadialGradient=13(163,164,169,165,166,170){11 167=56 168("171");167.172=169;167.173=170;167.174.x=163;167.174.y=164;54 167};123.drawImage=13(175,var_args){11 176,177,178,179,180,181,182,183;11 184=175.185.36;11 186=175.185.37;175.185.36=\'187\';175.185.37=\'187\';11 w=175.36;11 h=175.37;175.185.36=184;175.185.37=186;25(188.41==3){176=188[1];177=188[2];180=181=0;182=178=w;183=179=h}67 25(188.41==5){176=188[1];177=188[2];178=188[3];179=188[4];180=181=0;182=w;183=h}67 25(188.41==9){180=188[1];181=188[2];182=188[3];183=188[4];176=188[5];177=188[6];178=188[7];179=188[8]}67{throw"Invalid number of 188"}11 d=27.189(176,177);11 w2=182/2;11 h2=183/2;11 190=[];11 W=10;11 H=10;190.130(\' <30:191\',\' 192="\',Z*W,\',\',Z*H,\'"\',\' 193="0,0"\',\' 64="36:\',W,\';37:\',H,\';120:121;\');25(27.113[0][0]!=1||27.113[0][1]){11 194=[];194.130("M11=\'",27.113[0][0],"\',","M12=\'",27.113[1][0],"\',","M21=\'",27.113[0][1],"\',","M22=\'",27.113[1][1],"\',","Dx=\'",15(d.x/Z),"\',","Dy=\'",15(d.y/Z),"\'");11 195=d;11 196=27.189(176+178,177);11 197=27.189(176,177+179);11 198=27.189(176+178,177+179);195.x=14.195(195.x,196.x,197.x,198.x);195.y=14.195(195.y,196.y,197.y,198.y);190.130("padding:0 ",15(195.x/Z),"66 ",15(195.y/Z),"66 0;194:199:200.201.Matrix(",194.202(""),", sizingmethod=\'203\');")}67{190.130("204:",15(d.y/Z),"66;35:",15(d.x/Z),"66;")};190.130(\' ">\',\' <119 64="120:relative;36:\',178,\'66;\',\'  37:\',179,\'66;\',\'  33:34;">\',\'  <119 64="120: 121;\',\'   35:\',14.17(-180*178/182),\'66;\',\'   204:\',14.17(-181*179/183),\'66;\',\'   36:\',14.17(w*178/182),\'66;\',\'   37:\',14.17(h*179/183),\'66;\',\'   194:199:200.201.AlphaImageLoader(205=\',175.205,\',sizingMethod=206)">\',\'  </119>\',\' </119>\',\'</30:191>\');27.122.207("BeforeEnd",190.202(""))};123.161=13(208){11 209=[];11 lineOpen=210;11 a=99(208?27.87:27.96);11 211=a[0];11 212=a[1]*27.118;11 W=10;11 H=10;209.130(\'<30:213\',\' fillcolor="\',211,\'"\',\' filled="\',Boolean(208),\'"\',\' 64="120:121;36:\',W,\';37:\',H,\';"\',\' 193="0 0" 192="\',Z*W,\' \',Z*H,\'"\',\' stroked="\',!208,\'"\',\' strokeweight="\',27.90,\'"\',\' strokecolor="\',211,\'"\',\' path="\');11 newSeq=210;11 214={x:215,y:215};11 195={x:215,y:215};40(11 i=0;i<27.116.41;i++){11 p=27.116[i];25(p.131=="127"){209.130(" m ");11 c=27.189(p.x,p.y);209.130(15(c.x),",",15(c.y))}67 25(p.131=="134"){209.130(" l ");11 c=27.189(p.x,p.y);209.130(15(c.x),",",15(c.y))}67 25(p.131=="216"){209.130(" x ")}67 25(p.131=="135"){209.130(" c ");11 c=27.189(p.x,p.y);11 217=27.189(p.140,p.141);11 196=27.189(p.142,p.143);209.130(15(217.x),",",15(217.y),",",15(196.x),",",15(196.y),",",15(c.x),",",15(c.y))}67 25(p.131=="151"||p.131=="152"){209.130(" ",p.131," ");11 c=27.189(p.x,p.y);11 218=27.189(p.153,p.154);11 219=27.189(p.155,p.156);209.130(15(c.x-27.97*p.157),",",15(c.y-27.98*p.157)," ",15(c.x+27.97*p.157),",",15(c.y+27.98*p.157)," ",15(218.x),",",15(218.y)," ",15(219.x),",",15(219.y))}25(c){25(214.x==215||c.x<214.x){214.x=c.x}25(195.x==215||c.x>195.x){195.x=c.x}25(214.y==215||c.y<214.y){214.y=c.y}25(195.y==215||c.y>195.y){195.y=c.y}}};209.130(\' ">\');25(typeof 27.87=="object"){11 220={x:"50% ",y:"50% "};11 36=(195.x-214.x);11 37=(195.y-214.y);11 221=(36>37)?36:37;220.x=15((27.87.174.x/36)*100+50)+"% ";220.y=15((27.87.174.y/37)*100+50)+"% ";11 222=[];25(27.87.223=="171"){11 224=(27.87.172/221*100);11 225=(27.87.173/221*100)-224}67{11 224=0;11 225=100}11 226={227:215,211:215};11 228={227:215,211:215};27.87.229.sort(13(230,231){54 230.227-231.227});40(11 i=0;i<27.87.229.41;i++){11 232=27.87.229[i];222.130((232.227*225)+224,"%  ",232.211,",");25(232.227>226.227||226.227==215){226.227=232.227;226.211=232.211}25(232.227<228.227||228.227==215){228.227=232.227;228.211=232.211}};222.233();209.130(\'<30:162\',\' 211="\',228.211,\'"\',\' color2="\',226.211,\'"\',\' 131="\',27.87.223,\'"\',\' focusposition="\',220.x,\', \',220.y,\'"\',\' 222="\',222.202(""),\'"\',\' 212="\',212,\'" />\')}67 25(208){209.130(\'<30:162 211="\',211,\'" 212="\',212,\'" />\')}67{209.130(\'<30:161\',\' 212="\',212,\'"\',\' joinstyle="\',27.89,\'"\',\' miterlimit="\',27.91,\'"\',\' endcap="\',109(27.88),\'"\',\' weight="\',27.90,\'66"\',\' 211="\',211,\'" />\')};209.130("</30:213>");27.122.207("beforeEnd",209.202(""));27.116=[]};123.162=13(){27.161(true)};123.160=13(){27.116.130({131:"216"})};123.189=13(128,129){54{x:Z*(128*27.113[0][0]+129*27.113[1][0]+27.113[2][0])-20,y:Z*(128*27.113[0][1]+129*27.113[1][1]+27.113[2][1])-20}};123.save=13(){11 o={};84(27,o);27.115.130(o);27.114.130(27.113);27.113=79(78(),27.113)};123.restore=13(){84(27.115.233(),27);27.113=27.114.233()};123.translate=13(128,129){11 80=[[1,0,0],[0,1,0],[128,129,1]];27.113=79(80,27.113)};123.rotate=13(234){11 c=19(234);11 s=18(234);11 80=[[c,s,0],[-s,c,0],[0,0,1]];27.113=79(80,27.113)};123.206=13(128,129){27.97*=128;27.98*=129;11 80=[[128,0,0],[0,129,0],[0,0,1]];27.113=79(80,27.113)};123.203=13(){};123.arcTo=13(){};123.createPattern=13(){54 56 235};13 168(236){27.223=236;27.172=0;27.173=0;27.229=[];27.174={x:0,y:0}};168.124.addColorStop=13(237,238){238=99(238);27.229.130({227:1-237,211:238})};13 235(){};G_vmlCanvasManager=21;CanvasRenderingContext2D=57;CanvasGradient=168;CanvasPattern=235};12()',239,'|||||||||||var|googleExCanvas|function|Math|mr||round|ms|mc|Z2|G_vmlCanvasManager_|init|opt_doc|doc|if|self|this|init_|namespaces|g_vml_|ss|canvas|overflow|hidden|left|width|height|default|els|for|length|getContext|initElement|fixElement_|el|outerHTML|newEl|ownerDocument|createElement||tagName|ns|removeNode|return|context_|new|CanvasRenderingContext2D_|attachEvent|onPropertyChange|onResize|attrs|attributes|specified|style|nodeValue|px|else|clientWidth|clientHeight|srcElement|switch|case|clearRect|break|firstChild|dec2hex|toString|createMatrixIdentity|matrixMultiply|m1|m2|result|sum|copyState|o1|o2|fillStyle|lineCap|lineJoin|lineWidth|miterLimit|shadowBlur|shadowColor|shadowOffsetX|shadowOffsetY|strokeStyle|arcScaleX_|arcScaleY_|processStyle||styleString|str|alpha|substring|start|indexOf|end|guts|processLineCap|butt|square|surfaceElement|m_|mStack_|aStack_|currentPath_|000|globalAlpha|div|position|absolute|element_|contextPrototype|prototype||beginPath|moveTo|aX|aY|push|type|currentX_|currentY_|lineTo|bezierCurveTo|aCP1x|aCP1y|aCP2x|aCP2y|cp1x|cp1y|cp2x|cp2y|aCPx|aCPy|aRadius|aStartAngle|aEndAngle|aClockwise|arcType|at|wa|xStart|yStart|xEnd|yEnd|radius|aWidth|aHeight|closePath|stroke|fill|aX0|aY0|aX1|aY1|gradient|CanvasGradient_|aR0|aR1|gradientradial|radius1_|radius2_|focus_|image|dx|dy|dw|dh|sx|sy|sw|sh|oldRuntimeWidth|runtimeStyle|oldRuntimeHeight|auto|arguments|getCoords_|vmlStr|group|coordsize|coordorigin|filter|max|c2|c3|c4|progid|DXImageTransform|Microsoft|join|clip|top|src|scale|insertAdjacentHTML|aFill|lineStr|false|color|opacity|shape|min|null|close|c1|cStart|cEnd|focus|dimension|colors|type_|inside|expansion|insidecolor|offset|outsidecolor|colors_|cs1|cs2|fs|pop|aRot|CanvasPattern_|aType|aOffset|aColor'.split('|'),'\\b'))