//////////////////////////////////////////////////////////////////////////////////
// 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.width, 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;
			}		
		}
		// Store a copy of the alt and title attrs into the reflection
		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
				
	}	//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	items = [], 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.autoRotateTimer = 0;
		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.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:'absolute', 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) {					 
				 event.data.rotate(delta);
				 return false;
			 });
		}
		
		
		
		$('.thumb li').bind('click',this,function(event){		
			
			
			//console.log();
			event.data.rotateTo(event.currentTarget.firstChild.id);
			//window.clearInterval(event.data.autoRotateTimer);	
			//console.log(event.data.autoRotateTimer);
			//var	dir = (options.autoRotate === 'right')? 1 : -1;
			//event.data.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
		});
		/*
		$(container).bind('mouseover click',this,function(event){
			
			clearInterval(event.data.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) % images.length;
                    if (Math.abs(diff) > images.length / 2) {
                        diff += (diff > 0 ? -images.length : images.length);
                    }
                    
					event.data.rotate(-diff);
				}
			}
		});
		// 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 style="position:absolute;width:100%;height:100%;"/>').children()[0];
	
		this.rotateTo = function(iPos) {
			if (typeof(this.bRotatingTo) == 'undefined' || this.bRotatingTo == false) this.bRotatingTo = true;
				else return;
			
			
			//console.log(iLastScreen);	
			iCarPos = iLastGameFocus;
			if (iCarPos < 0) iCarPos = aGameScreens.length+iCarPos;
			//if (iCarPos > aGameScreens.length-1) iCarPos = iCarPos-aGameScreens.length-1;
			
				
			var iRotation = iCarPos+iPos;	
			//if (iRotation <0) iRotation = aGameScreens.length+iRotation;
			if (iRotation <0) this.bBackwards = true;	
				else this.bBackwards = false;	
			this.rotate(iRotation);
			
			//iLastScreen += iLastScreen;
			
			clearInterval(this.autoRotateTimer);
			clearInterval(this.stopRotateTimeout);	
			var bla = this;
			//bla.bRotatingTo = false;
			this.stopRotateTimeout = setTimeout(function(){bla.startAutorotate();},2000);
		}
		
		this.startAutorotate = function() {
			var	dir = (options.autoRotate === 'right')? 1 : -1;
			//this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
		}
		
		
		
		// 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()
		{				
			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;				
		};
		
		
		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
		this.rotate = function(direction)
		{	
			this.frontIndex -= direction;
			this.frontIndex %= items.length;
			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
			this.showFrontText();
			this.go();			
		};
		
		
		this.autoRotate = function()
		{			
			if ( options.autoRotate !== 'no' )
			{
				var	dir = (options.autoRotate === 'right')? 1 : -1;
				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
			}
		};
		
		// 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;
			//console.log('change: '+change);
			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
			var	itemsLen = items.length;
			var	spacing = (Math.PI / itemsLen) * 2; 
			//var	wrapStyle = null;
			var	radians = this.rotation;
			var	isMSIE = $.browser.msie;
		
			// 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;
			var aSequence = [];
			
			var iTmpRadians = radians;
			// -------------
			for (var i = 0; i<itemsLen ;i++) {
				sinVal = funcSin(radians);
				aSequence.push(sinVal);
				radians += spacing;
			}
			
			radians = iTmpRadians;
			
			//console.log(aSequence);
			if (typeof(iAchterstePhoneIndex) == 'undefined') iAchterstePhoneIndex = 2;
			if (typeof(iVoorstePhoneIndex) == 'undefined') iVoorstePhoneIndex = 2;
			//var iAchterstePhone = 0, iLastGameFocus = 0;
			
			var iSameCount = 0, iLowest = 9999, iHighest = -99999;
			for (var i=0;i<aSequence.length;i++) {
				if (aSequence[i] < iLowest) {iAchterstePhoneIndex = i;iLowest = aSequence[i];}
				if (aSequence[i] > iHighest) {iVoorstePhoneIndex = i;iHighest = aSequence[i];}
			}
			if (iSameCount > 1) iAchterstePhoneIndex = 2;
			
			if (typeof(this.iPrevAchterstePhoneIndex) == 'undefined') this.iPrevAchterstePhoneIndex = 999;
			
			if (this.iPrevAchterstePhoneIndex != iAchterstePhoneIndex) {
				//console.log('aSequence: '+aSequence);
				//console.log('iAchterstePhoneIndex: '+iAchterstePhoneIndex+' iVoorstePhoneIndex: '+iVoorstePhoneIndex);
				
				
				var iNextAchtersteId = aScreensActive[iVoorstePhoneIndex]+2;
				if (iNextAchtersteId > aGameScreens.length-1) iNextAchtersteId = iNextAchtersteId-aGameScreens.length;
				if (iNextAchtersteId < 0) iNextAchtersteId = aGameScreens.length + iNextAchtersteId;
				//console.log('iNextAchtersteId: '+iNextAchtersteId);
				
				
				document.getElementById('gamescreen_'+aScreensActive[iAchterstePhoneIndex]).style.display = 'none';
				aScreensActive[iAchterstePhoneIndex] = iNextAchtersteId;
				//console.log('aScreensActive: '+aScreensActive);
				this.iPrevAchterstePhoneIndex = iAchterstePhoneIndex;
				//console.log('---');
			}
			/*
			
			
			console.log('iLastGameFocus(GSindex): '+iLastGameFocus+' iAchterstePhone: '+iAchterstePhone+' aScreensActive: '+aScreensActive);
			if (1==1){//iAchterstePhone != this.iLastAchterstePhone) {
				//this.iLastAchterstePhone = iAchterstePhone;
				//iLastScreen = aScreensActive[iAchterstePhone];
				//if (change>0) iLastScreen++;
					//else if (change<0)  iLastScreen--;
				//console.log(aScreensActive);
				//iLastScreen = aScreensActive[iAchterstePhone];
				
				
				if (!this.bBackwards) iNextBackScreen = iLastGameFocus+2;
				//	else if (this.bBackwards)  iLastScreen++;
					
					
				console.log('iNextBackScreen: '+iNextBackScreen);	
				if (iNextBackScreen > aGameScreens.length-1) iNextBackScreen = 0;
				if (iNextBackScreen < 0 ) iNextBackScreen = aGameScreens.length-1;
				
				document.getElementById('gamescreen_'+aScreensActive[iAchterstePhone]).style.display = 'none';
				aScreensActive[iAchterstePhone] = iNextBackScreen;
				
				
				//iLastGameFocus = 
			}*/
			
			// -----------------
			
			for (var i = 0; i<itemsLen ;i++)
			{
				
				
				oGameScreen = document.getElementById('gamescreen_'+aScreensActive[i]);
				oGameScreen.style.display = 'inline';
				item = items[i];				
				sinVal = funcSin(radians);
				
				aSequence.push(sinVal);
				
				scale = ((sinVal+1) * smallRange) + minScale;
				
				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
		
				xScreen = this.xCentre + (( (funcCos(radians) * this.xRadius) - (iGameScreenWidth*0.5)) * scale);
				yScreen = this.yCentre + (( (sinVal * this.yRadius/3)  ) * scale);		
		
		
				if (item.imageOK)
				{
					var	img = item.image;
					w = img.width = item.orgWidth * scale;					
					h = img.height = item.orgHeight * scale;
					
					oGameScreen.style.width = (iGameScreenWidth * scale)+'px';		
					oGameScreen.style.height = (iGameScreenHeight * scale)+'px';	
					
					
					oGameScreen.style.left = (xScreen)+'px';		
					oGameScreen.style.top = (yScreen)+'px';	
					
					oGameScreen.style.zIndex = "" + ((scale * 100)>>0)*4;	
					
					img.style.left = x + px ;
					img.style.top = y + px;
					img.style.zIndex = "" + ((scale * 100)>>0)*4;	// >>0 = Math.foor(). 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 (isMSIE)
						{											
							style.filter.finishy = (reflHeight / h * 100);				
						}else
						{								
							style.height = reflHeight + px;															
						}																													
					}					
				}
				radians += spacing;
			}
			// Turn display back on.					
			this.innerWrapper.style.display = 'block';
			
			
			
			//var iHeaderIndex = iLastScreen-2;
			//if (iHeaderIndex < 0) iHeaderIndex = aGameScreens.length-1;
			
			if (aGameHeaders[aScreensActive[iVoorstePhoneIndex]] != '') var sImage = '<img src="'+aGameHeaders[aScreensActive[iVoorstePhoneIndex]]+'" />';
				else var sImage = '';
			document.getElementById('gameTopHeader').innerHTML = sImage;
			
			
			
			// 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();
				this.bBackwards = false;
				// Klaar met de loop
				// Achterste image updaten
				
				//console.log(this.destRotation);
				
				/*
				
				var iAchterstePhone = 0;
				for (var i=0;i<aSequence.length;i++) {
					if (aSequence[i] < aSequence[iAchterstePhone]) iAchterstePhone = i;
				}
				
				iLastScreen++;
				if (iLastScreen > aGameScreens.length-1) iLastScreen = 0;
				
				document.getElementById('gamescreen_'+aScreensActive[iAchterstePhone]).style.display = 'none';
				aScreensActive[iAchterstePhone] = iLastScreen;
				*/
				this.bRotatingTo = false;
				
			}
		}; // END updateAll		
		
		// Create an Item object for each image	
//		func = function(){return;ctx.updateAll();} ;

		// Check if images have loaded. We need valid widths and heights for the reflections.
		this.checkImagesLoaded = function()
		{
			var	i;
			for(i=0;i<images.length;i++) {
				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
				{
					return;					
				}				
			}
			for(i=0;i<images.length;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();
			this.autoRotate();	
			this.updateAll();
			
		};

		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
		
		
		if (typeof(options.bTurnOnce) != 'undefined') setTimeout( function(){ctx.rotate(1);},5000);	
		//console.log(options);
		
	}; // 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) {
		aScreensActive = [0,(aGameScreens.length-1),(aGameScreens.length-2),1];

// Screens neerleggen
var eBox = document.createElement('div');
eBox.className = 'gameScreenBox';
eBox.style.display = 'none';

for (var i=0;i<aGameScreens.length;i++) {
	var oScreen = document.createElement('img');
	oScreen.src = aGameScreens[i];
	
	oScreen.id = 'gamescreen_'+(i);
	oScreen.style.display = 'none';
	oScreen.style.height = '200px';
	
	oScreen.style.position = 'absolute';
	
	if (typeof(bGamePage) != 'undefined' && bGamePage == true) {
		oScreen.name = aGameAlias[i];
		oScreen.style.cursor = 'pointer';
		oScreen.onclick = function(){document.location.href = '/'+this.name;}
	}
	
	eBox.appendChild(oScreen);
}	
$('#contentwrapper').append(eBox);
		this.bBackwards = false;	
		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: true
			},options );									
			// Create a Controller for each carousel.		
			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
		});				
		return this;
	};
	
	//console.log(this);

})(jQuery);


var iLastGameFocus = 0;
//var aScreensActive = [0,1,2,3];
var aScreensActive = [0,6,2,1];