//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////

(function($) {

	// START Reflection object.
	// Creates a reflection for underneath an image.
	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
	// The position and size of the reflection gets updated by updateAll() in Controller.
	function Reflection(img, reflHeight, opacity) {				
		
		var	reflection, cntx, imageWidth = img.width, imageHeight = img.height, gradient, parent;
	
		parent = $(img.parentNode);
		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];

		if ( !reflection.getContext &&  $.browser.msie) {
			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
			reflection.src = img.src;			
			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
			
		} else {							
			cntx = reflection.getContext("2d");
			try {
				$(reflection).attr({width: imageWidth, height: reflHeight});
				cntx.save();
				cntx.translate(0, imageHeight-1);
				cntx.scale(1, -1);				
				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
				cntx.restore();
				cntx.globalCompositeOperation = "destination-out";
				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				cntx.fillStyle = gradient;
				cntx.fillRect(0, 0, imageWidth, reflHeight);				
			} catch(e) {			
				return;
			}		
		}
		$(reflection).css({top: '3000px'});
				
	}	//END Reflection object

	// START Item object.
	// A wrapper object for items within the carousel.
	var	Item = function(imgIn, options)
	{								
		this.orgWidth = imgIn.width;			
		this.orgHeight = imgIn.height;		
		this.image = imgIn;
		this.reflection = null;					
		this.alt = imgIn.alt;
		this.title = imgIn.title;
		this.imageOK = false;		
		this.options = options;				
						
		this.imageOK = true;	

		if (this.options.reflHeight > 0)
		{													
			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
		}
		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
	};// END Item object
	
	
	// Controller object.
	// This handles moving all the items, dealing with mouse clicks etc.	
	var Controller = function(container, images, options)
	{						
		var	funcSin = Math.sin, funcCos = Math.cos, ctx=this;
		this.controlTimer = 0;
		this.stopped = false;
		//this.imagesLoaded = 0;
		this.container = container;
		this.xRadius = options.xRadius;
		this.yRadius = options.yRadius;
		this.showFrontTextTimer = 0;
		this.numberOfImages = options.numberOfImages;
		this.imagesToDisplay = options.imagesToDisplay;
		this.frontImage = options.frontImage;
		this.nextCoverLeft = options.nextCoverLeft;
		this.nextCoverRight = options.nextCoverRight;
		this.backgroundColor = options.backgroundColor;
		if (options.xRadius === 0)
		{
			this.xRadius = ($(container).width()/2.3);
		}
		if (options.yRadius === 0)
		{
			this.yRadius = ($(container).height()/6);
		}
		this.xCentre = options.xPos;
		this.yCentre = options.yPos;
		this.frontIndex = 0;	// Index of the item at the front
		
		// Start with the first item at the front.
		this.rotation = this.destRotation = Math.PI/2;
		this.rotateCount = 0;
		this.replaceCount = 0;
		this.frontIndices = new Array();
		this.frontIndices[0] = 0;
		this.timeDelay = 1000/options.FPS;
								
		// Turn on the infoBox
		if(options.altBox !== null)
		{
			$(options.altBox).css('display','block');	
			$(options.titleBox).css('display','block');	
		}

		// Turn on relative position for container to allow absolutely positioned elements
		// within it to work.
		$(container).css({ position:'relative', overflow:'hidden'} );
	
		$(options.buttonLeft).css('display','inline');
		$(options.buttonRight).css('display','inline');
		
		// Setup the buttons.
		$(options.buttonLeft).bind('mouseup',this,function(event){
			event.data.rotate(-1);	
			return false;
		});
		$(options.buttonRight).bind('mouseup',this,function(event){															
			event.data.rotate(1);	
			return false;
		});
		
		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
		if (options.mouseWheel)
		{
			$(container).bind('mousewheel',this,function(event, delta) {
					delta = (delta > 0) ? 1 : -1;					 
					event.data.rotate(delta);
					return false;
				 });
		}
		$(container).bind('mouseover click',this,function(event){
			
			clearInterval(autoRotateTimer); // Stop auto rotation if mouse over.
			var	text = $(event.target).attr('alt');		
			// If we have moved over a carousel item, then show the alt and title text.
		
			if ( text !== undefined && text !== null )
			{
					
				clearTimeout(event.data.showFrontTextTimer);			
				$(options.altBox).html( ($(event.target).attr('alt') ));
				$(options.titleBox).html( ($(event.target).attr('title') ));							
				if ( options.bringToFront && event.type == 'click' )				
				{
					var	idx = $(event.target).data('itemIndex');	
					var frontIndex = event.data.frontIndex;
					//var	diff = idx - frontIndex;
					var     diff = (idx - frontIndex) % this.imagesToDisplay;
					if (Math.abs(diff) > this.imagesToDisplay / 2) {
						diff += (diff > 0 ? -this.imagesToDisplay : this.imagesToDisplay);
					}
					event.data.rotate(-diff);
				}
			}
		});

		$(container).bind('resized',this,function(event){
			var	context = event.data;
			var isMSIE = $.browser.msie;
			var cwidth = $(container).width()/2;
			var mod = $(container).width() % 2;
			mod = (isMSIE) ? (1 - mod) : mod;
			var bottomheight, sbheight, tmptext;

	      		bottomheight = document.body.offsetHeight - document.getElementById("on").offsetHeight - document.getElementById("koptekst").offsetHeight;

	      		sbheight = Math.max(0.1 * bottomheight, 45);

	      		carouselheight = bottomheight - sbheight - 8;

	      		document.getElementById('carousel1').style.height = carouselheight + 'px';
	      		document.getElementById('osb').style.height = sbheight + 'px';
	      		document.getElementById('isb').style.height = '45px';
	      		document.getElementById('isb').style.marginTop = '-20px';

			var tcw = document.getElementById("tmiddle").clientWidth;
			tch = carouselheight;

			context.xRadius = 0.52 * tcw;
			context.xCentre = 0.5 * tcw;

			context.yRadius = 0.73797371*tch-209.11956;
			context.yCentre = 0.19584827*tch-33.664589;

			ctop = 0.11497229*tch-5.6685119;

			context.placeImage(11,cwidth-8,ctop);
			context.placeImage(12,cwidth+2-mod,ctop);

			document.getElementById("bgcover1").style.left = (cwidth-4)+'px';
			document.getElementById("bgcover1").style.top = ctop + 'px';

			document.getElementById("bgcover2").style.left = (cwidth+1-mod)+'px';
			document.getElementById("bgcover2").style.top = ctop + 'px';

			document.getElementById('but1').style.top = (carouselheight/2) - 20 + 'px';
			document.getElementById('but2').style.top = (carouselheight/2) - 20 + 'px';

	   		var tsize, tsize1, tsize2;
	   		tsize1 = measureText($(afltitel).text(), 1.1, "ainfo");
	   		tsize2 = measureText(aflinfo, 1.1, "ainfo");
	   		tsize = (tsize1 > tsize2) ? tsize2 : tsize1;

	   		document.getElementById("ainfo").style.fontSize = tsize + 'em';

//	   		tsize = measureText($("#stukmsg").text(), 1.2, "tmiddle");
//	   		document.getElementById("stukmsg").style.fontSize = tsize + 'em';

	      		tmptext = document.getElementById("cmsg1").innerHTML;
	      		tsize1 = measureText(tmptext, 1.0, "ainfo");
	      		document.getElementById("cmsg1").style.fontSize = tsize1 + 'em';
	      		tmptext = document.getElementById("cmsg2").innerHTML;
	      		tsize2 = measureText(tmptext, 1.0, "ainfo");
	     		document.getElementById("cmsg2").style.fontSize = tsize2 + 'em';

			context.updateAll();
		});

		// If we have moved out of a carousel item (or the container itself),
		// restore the text of the front item in 1 second.
		$(container).bind('mouseout',this,function(event){
				var	context = event.data;				
				clearTimeout(context.showFrontTextTimer);				
				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
				context.autoRotate();	// Start auto rotation.
		});

		// Prevent items from being selected as mouse is moved and clicked in the container.
		$(container).bind('mousedown',this,function(event){	
			
			event.data.container.focus();
			return false;
		});
		container.onselectstart = function () { return false; };		// For IE.

		this.innerWrapper = $(container).wrapInner('<div id=wrapper style="position:absolute;width:100%;height:100%;"/>').children()[0];
	
		// Shows the text from the front most item.
		this.showFrontText = function()
		{	
			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
		};
						
		this.go = function(direction)
		{				
			if(this.controlTimer !== 0) { return; }
			var	context = this;
			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
		};
		
		this.stop = function()
		{
			clearTimeout(this.controlTimer);
			this.controlTimer = 0;
			this.frontIndices[0] = this.frontIndices[this.rotateCount];
			this.rotateCount = 0;
			this.replaceCount = 0;
			if (huidigepagina == 'home')
			{
				document.getElementById("tbl").style.backgroundColor = this.backgroundColor;
	      			document.getElementById("osb").style.visibility = "visible";
				document.getElementById("but1").style.visibility = "visible";
				document.getElementById("but2").style.visibility = "visible";
				document.getElementById("ainfo").style.visibility = "visible";
				document.getElementById("bgcover1").style.visibility = "visible";
				document.getElementById("bgcover2").style.visibility = "visible";
				document.getElementById("cmsg1").style.visibility = "visible";
				document.getElementById("cmsg2").style.visibility = "visible";
				if ((aflinfo != '') && (!onzichtbaar)) { refreshintro(); makevisible() };
	      			document.getElementById('cborder').style.top = parseFloat(items[this.frontIndices[0]].image.style.top)-6+'px';
	      			document.getElementById('cborder').style.left = parseFloat(items[this.frontIndices[0]].image.style.left)-6+'px';
	      			document.getElementById("cborder").style.visibility = "visible";
			}
		};
		
		
		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
		this.rotate = function(direction)
		{
			if ((replaced) && (document.getElementById("infodiv").style.visibility == 'hidden'))
			{
				replaced = false;
				var context = this;
				this.rotateCount += 1;
				this.frontIndex -= direction;
				this.frontIndex %= this.imagesToDisplay;
				this.frontIndices[this.rotateCount] = this.frontIndices[this.rotateCount-1] - direction;
				this.frontIndices[this.rotateCount] = (this.frontIndices[this.rotateCount] < 0) ? (this.frontIndices[this.rotateCount] + this.imagesToDisplay) : this.frontIndices[this.rotateCount];
				this.frontIndices[this.rotateCount] %= this.imagesToDisplay;
				this.destRotation += ( Math.PI / this.imagesToDisplay ) * ( 2*direction );
				this.showFrontText();
				this.go(direction);
				setTimeout(function(){context.replace(direction);},this.timeDelay+20);
				setTimeout(function(){newImg(direction);},this.timeDelay-10);
			}
		};


		this.autoRotate = function()
		{
			if ( options.autoRotate !== 'no' )
			{
				clearInterval(autoRotateTimer);
				var	dir = (options.autoRotate === 'right')? 1 : -1;
				autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
			}
		};

		// Replace the left or right back item
		this.replace = function(direction)
		{
			var itemIndex;
			var context = this;
			imageCount += 1;
			this.replaceCount += 1;
			var isMSIE = $.browser.msie;
			var cwidth = $(container).width()/2;
			var mod = $(container).width() % 2;
			mod = (isMSIE) ? (1 - mod) : mod;
			if (direction < 0)
			{
				itemIndex = this.frontIndices[this.replaceCount] + 5;
				itemIndex %= this.imagesToDisplay;
				$('#cimg'+(this.imagesToDisplay+2)).empty();
				$('#cimg'+(this.imagesToDisplay+2)).append( $('#cimg'+(itemIndex+1)+'>img'),$('#cimg'+(itemIndex+1)+'>canvas') );

				context.placeImage(itemIndex,cwidth+2-mod,ctop);

				$('#cimg'+(itemIndex+1)).append( $('#cimg'+(this.imagesToDisplay+1)+'>img'),$('#cimg'+(this.imagesToDisplay+1)+'>canvas') );
				$('#cimg'+(this.imagesToDisplay+1)).empty();
				items[this.imagesToDisplay+1] = items[itemIndex];
				items[itemIndex] = items[this.imagesToDisplay];
			}
			else
			{
				itemIndex = this.frontIndices[this.replaceCount] - 5;
				itemIndex = (itemIndex < 0) ? (itemIndex + this.imagesToDisplay) : itemIndex;
				$('#cimg'+(this.imagesToDisplay+1)).empty();
				$('#cimg'+(this.imagesToDisplay+1)).append( $('#cimg'+(itemIndex+1)+'>img'),$('#cimg'+(itemIndex+1)+'>canvas') );

				context.placeImage(itemIndex,cwidth-8-mod,ctop);

				$('#cimg'+(itemIndex+1)).append( $('#cimg'+(this.imagesToDisplay+2)+'>img'),$('#cimg'+(this.imagesToDisplay+2)+'>canvas') );
				$('#cimg'+(this.imagesToDisplay+2)).empty();
				items[this.imagesToDisplay] = items[itemIndex];
				items[itemIndex] = items[this.imagesToDisplay+1];	
			}
			setTimeout(function(){context.prefetch(direction);},1);
		};

		// Prefetch the next left or right item
		this.prefetch = function(direction)
		{
			var itd = this.imagesToDisplay;
			var context = this;
			var isMSIE = $.browser.msie;
			var cwidth = $(container).width()/2;
			var mod = $(container).width() % 2;
			mod = (isMSIE) ? (1 - mod) : mod;
			if (direction < 0)
			{
				indexNextImageLeft -= 1;
				indexNextImageLeft = (indexNextImageLeft < laagsteaflnr) ? this.numberOfImages : indexNextImageLeft;

				indexNextImageRight -= 1;
				indexNextImageRight = (indexNextImageRight < laagsteaflnr) ? this.numberOfImages : indexNextImageRight;

				imgtoload[0] = 'images/c'+indexNextImageLeft+'th.jpg';
				var tmpObj = $({}).imageLoader({
				    images: imgtoload,
				    async: true,
				    complete: function(e, ui) {
					var data = tmpObj.imageLoader('getData');
					var nextImageLeft = data[0].img;
					nextImageLeft.className = 'cloudcarousel';
					nextImageLeft.id = 'cover'+indexNextImageLeft;
					nextImageLeft.height = '200';
					nextImageLeft.width = '126';
					nextImageLeft.style.visibility = 'hidden';
					if (huidigepagina == 'home')
					{
						document.getElementById("cimg"+(itd+1)).appendChild(nextImageLeft);
					}
					images.push(nextImageLeft);

					if (huidigepagina == 'home')
					{
					   items[itd] = new Item( nextImageLeft, options );
					   context.placeImage(itd,cwidth-8,ctop);
					}

					replaced = true;
				    }
				});
			}
			else
			{
				indexNextImageRight += 1;
				indexNextImageRight = (indexNextImageRight > this.numberOfImages) ? laagsteaflnr : indexNextImageRight;

				indexNextImageLeft += 1;
				indexNextImageLeft = (indexNextImageLeft > this.numberOfImages) ? laagsteaflnr : indexNextImageLeft;

				var itd = this.imagesToDisplay;
				imgtoload[0] = 'images/c'+indexNextImageRight+'th.jpg';
				var tmpObj = $({}).imageLoader({
				    images: imgtoload,
				    async: true,
				    complete: function(e, ui) {
					var data = tmpObj.imageLoader('getData');
					nextImageRight = data[0].img;
					nextImageRight.className = 'cloudcarousel';
					nextImageRight.id = 'cover'+indexNextImageRight;
					nextImageRight.height = '200';
					nextImageRight.width = '126';
					nextImageRight.style.visibility = 'hidden';
					if (huidigepagina == 'home')
					{
						document.getElementById("cimg"+(itd+2)).appendChild(nextImageRight);
					}
					images.push(nextImageRight);

					if (huidigepagina == 'home')
					{
					   items[itd+1] = new Item( nextImageRight, options );
					   context.placeImage(itd+1,cwidth+2,ctop);
					}

					replaced = true;
				    }
				});
			}
		};

		this.placeImage = function(index,left,top)
		{
			var	img = items[index].image;
			var w = img.width = items[index].orgWidth * 0.5 * options.minScale;
			var h = img.height = items[index].orgHeight * 0.5 * options.minScale;
			var	isMSIEbutNot9 = (($.browser.msie) && ($.browser.version.split(".")[0] < 9));
			img.style.position = 'absolute';
			img.style.left = left + 'px' ;
			img.style.top = top + 'px';
			img.style.visibility = 'visible';
			img.style.zIndex = '2';
			if (items[index].reflection !== null)
			{										
				var reflHeight = options.reflHeight * 0.5 * options.minScale;		
				var style = items[index].reflection.element.style;
				style.left = left + 'px' ;
				style.top = top + h + options.reflGap * 0.5 * options.minScale + 'px';
				style.width = w + 'px';
				if (isMSIEbutNot9)
				{									
					style.filter.finishy = (reflHeight / h * 100);
				}
				else
				{								
					style.height = reflHeight + 'px';
				}
			}
		}

		// This is the main loop function that moves everything.
		this.updateAll = function()
		{
			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
			var smallRange = (1-minScale) * 0.5;
			var	w,h,x,y,scale,item,sinVal;
			
			var	change = (this.destRotation - this.rotation);				
			var	absChange = Math.abs(change);

			this.rotation += change * options.speed;
			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
			var	itemsLen = this.imagesToDisplay;
			var	spacing = (Math.PI / itemsLen) * 2; 
			//var	wrapStyle = null;
			var	radians = this.rotation;
			var	isMSIEbutNot9 = (($.browser.msie) && ($.browser.version.split(".")[0] < 9));

			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
			this.innerWrapper.style.display = 'none';		
			
			var	style;
			var	px = 'px', reflHeight;
			var context = this;
			for (var i = 0; i<itemsLen ;i++)
			{
				item = items[i];
								
				sinVal = funcSin(radians);
				
				scale = ((sinVal+1) * smallRange) + minScale;

				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);

				if (item.imageOK)
				{
					var	img = item.image;
					w = img.width = item.orgWidth * scale;					
					h = img.height = item.orgHeight * scale;
					img.style.left = x + px ;
					img.style.top = y + px;
					img.style.visibility = 'visible';
					img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.floor(). Firefox doesn't like fractional decimals in z-index.
					if (item.reflection !== null)
					{										

						reflHeight = options.reflHeight * scale;						
						style = item.reflection.element.style;
						style.left = x + px;
						style.top = y + h + options.reflGap * scale + px;
						style.width = w + px;

						if (isMSIEbutNot9)
						{									
							style.filter.finishy = (reflHeight / h * 100);
						}
						else
						{								
							style.height = reflHeight + px;
						}
					}					
				}
				radians += spacing;
			}
			// Turn display back on.					
			this.innerWrapper.style.display = 'block';

			// If we have a preceptable change in rotation then loop again next frame.
			if ( absChange >= 0.001 )
			{
				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
			}else
			{
				// Otherwise just stop completely.			
				this.stop();
			}
		}; // END updateAll

		var isMSIE = $.browser.msie;
		var cwidth = $(container).width()/2;
		var mod = $(container).width() % 2;
		mod = (isMSIE) ? (1 - mod) : mod;
		var replaced = true;
		var imgtoload = new Array();
		var tmptext;

		var imageCount = this.imagesToDisplay+2;

		ctop = 0.11497229*tch-5.6685119;

		var indexNextImageLeft = this.nextCoverLeft;
		var indexNextImageRight = this.nextCoverRight;

		var newdiv = document.createElement('div');
		newdiv.id = 'cimg'+(this.imagesToDisplay+1);
		document.getElementById("wrapper").appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.id = 'cimg'+(this.imagesToDisplay+2);
		document.getElementById("wrapper").appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.id = 'bgcover1';
		newdiv.style.visibility = 'hidden';
		newdiv.style.position = 'absolute';
		newdiv.style.height = '5px';
		newdiv.style.width = '3px';
		newdiv.style.zIndex = '1';
		newdiv.style.left = (cwidth-4)+'px';
		newdiv.style.top = ctop + 'px';
		newdiv.style.backgroundColor = '#CC5551';
		document.getElementById("wrapper").appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.id = 'bgcover2';
		newdiv.style.visibility = 'hidden';
		newdiv.style.position = 'absolute';
		newdiv.style.height = '5px';
		newdiv.style.width = '3px';
		newdiv.style.zIndex = '1';
		newdiv.style.left = (cwidth+1-mod)+'px';
		newdiv.style.top = ctop + 'px';
		newdiv.style.backgroundColor = '#CC5551';
		document.getElementById("wrapper").appendChild(newdiv);

		var framediv = document.createElement('div');
		framediv.id = 'cborder';
		framediv.className = 'cioborder';
		framediv.style.visibility = 'hidden';
		framediv.style.position = 'absolute';
		framediv.style.height = '208px';
		framediv.style.width = '136px';
		framediv.style.zIndex = '100';

		newdiv = document.createElement('div');
		newdiv.className = 'cmborder';
		newdiv.style.display = 'block';
		newdiv.style.height = '1px';
		newdiv.style.width = '136px';
		newdiv.style.top = '0px';
		newdiv.style.left = '0px';
		framediv.appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.className = 'cmborder';
		newdiv.style.display = 'inline';
		newdiv.style.cssFloat = 'left';
		newdiv.style.styleFloat = 'left';
		newdiv.style.height = '206px';
		newdiv.style.width = '1px';
		framediv.appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.className = 'cioborder';
		newdiv.style.display = 'inline';
		newdiv.style.cssFloat = 'left';
		newdiv.style.styleFloat = 'left';
		newdiv.style.height = '204px';
		newdiv.style.width = '132px';
		framediv.appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.className = 'cmborder';
		newdiv.style.display = 'inline';
		newdiv.style.cssFloat = 'right';
		newdiv.style.styleFloat = 'right';
		newdiv.style.height = '206px';
		newdiv.style.width = '1px';
		framediv.appendChild(newdiv);

		newdiv = document.createElement('div');
		newdiv.className = 'cmborder';
		newdiv.style.display = 'inline';
		newdiv.style.cssFloat = 'left';
		newdiv.style.styleFloat = 'left';
		newdiv.style.height = '1px';
		newdiv.style.width = '136px';
		framediv.appendChild(newdiv);

		document.getElementById("wrapper").appendChild(framediv);

	        tmptext = document.getElementById("cmsg1").innerHTML;
	        tsize1 = measureText(tmptext, 1.0, "ainfo");
	        document.getElementById("cmsg1").style.fontSize = tsize1 + 'em';
	        tmptext = document.getElementById("cmsg2").innerHTML;
	        tsize2 = measureText(tmptext, 1.0, "ainfo");
	        document.getElementById("cmsg2").style.fontSize = tsize2 + 'em';

		// Check if images have loaded. We need valid widths and heights for the reflections.
		this.checkImagesLoaded = function()
		{
			var	i;
			for(i=0;i<this.imagesToDisplay;i++) {
				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
				{
					return;					
				}				
			}
			for(i=0;i<this.imagesToDisplay;i++) {
				 items.push( new Item( images[i], options ) );	
				 $(images[i]).data('itemIndex',i);
			}
			// If all images have valid widths and heights, we can stop checking.			
			clearInterval(this.tt);
			this.showFrontText();

			indexNextImageLeft += 1;
			indexNextImageRight += 1;
			this.prefetch(-1);

			indexNextImageLeft -= 1;
			indexNextImageRight -= 1;
			this.prefetch(1);

			this.autoRotate();
			this.updateAll();
			
		};

		this.tt = setInterval( function(){ctx.checkImagesLoaded();},25);	
	}; // END Controller object
	
	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
	$.fn.CloudCarousel = function(options) {
			
		this.each( function() {			
			
			options = $.extend({}, {
							   reflHeight:0,
							   reflOpacity:0.5,
							   reflGap:0,
							   minScale:0.5,
							   xPos:0,
							   yPos:0,
							   xRadius:0,
							   yRadius:0,
							   altBox:null,
							   titleBox:null,
							   FPS: 30,
							   autoRotate: 'no',
							   autoRotateDelay: 1500,
							   speed:0.2,
							   mouseWheel: false,
							   bringToFront: false,
							   numberOfImages: 62,
							   imagesToDisplay: 11,
							   frontImage: 62,
							   nextCoverLeft: 1,
							   nextCoverRight: 2,
							   backgroundColor: "#FFFFFF"
			},options );									
			// Create a Controller for each carousel.
			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
		});				
		return this;
	};

})(jQuery);