//////////////////////////////////////////////////////////////////////////////////

$(function(){
	$("#carousel2").cloudcarousel({			
		xpos:280,
		ypos:80,
		buttonleft: $('#but3'),
		buttonright: $('#but4'),				
		fps:30,
		autorotate: 'left',
		autorotatedelay: 3000,
		speed:0.2,
		mousewheel:true,
		bringtofront:true
	});	
});
// 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:'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) {					 
					 event.data.rotate(delta);
					 return false;
				 });
		}
		$(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];
	
		// 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;
			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;
			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.zindex = "" + (scale * 100)>>0;	// >>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';

			// 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		
		
		// 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);	
	}; // 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
			},options );									
			// create a controller for each carousel.		
			$(this).data('cloudcarousel', new controller( this, $('.cloudcarousel',$(this)), options) );
		});				
		return this;
	};

})(jquery);