$(function() {
	
	/// handiger in te delen door "function cycleGallery"
	/// als class op te slaan in eigen .js-file
	/// en "new cycleGallery" te callen
	/// vanuit included .js-file relevant voor pagina

	/// tussenoplossing:
	
	// carousel in content
	if( $('.folder.gallery',$(".pagecontent")).length ){
	
		// new carousel
		new cycleGallery({
			'container':	$(".pagecontent"),
			'holder':		$('.folder.gallery'),
			'node':			".folder.item"
		});
	}
	
	// carousel op homepage
	if( $("#gallery").length ){
	
		// new carousel
		new cycleGallery({
			'container':	$("#gallery").show(),
			'holder':		$("ul",'#gallery'),
			'node':			"li"
		});
	}
	
	
	/*	
	var hovered = false;
	
	$('.gallerycarousel .li.frontslide:not(.hover)').live('mouseover', function(event) {

		if(!hovered)
		{
			
			$(this).addClass("hover");
			
			$('span.title',this)
			.animate({opacity: 0.75})
			.slideDown('slow',function(){ 
			
				hovered = true;
			});
			
			wc('item open');
				
		}
	});

	$('.gallerycarousel .li.frontslide span.title').live('mouseout', function(event) {
		
		$(this).parent().parent().removeClass("hover");
		
		$(this)
		.slideUp('slow',function(){ 
			
			hovered = false;
				
		}).animate({opacity: 1});
		
		wc('item closed');
	
	});
	*/
	
});
		
// galleryitems overlay met info
(function($) {
	
	var flipping = false;
	var flipspeed = 200;
	var height;
	var width;
	var node;
	
	$.fn.extend({
		
		// bind
		loadObjectOverlay: function(options) {
		
			options = $.extend({
				opacity: 0.5
			}, options);
			
			var image = $('.media img:first',this);
			
			$(image)
			.before( 
				$('<div/>')
				.css({
					'position':'absolute',
					'overflow':'hidden',
					'width':'0px',
					zIndex:4000,
					backgroundImage:'url("'+site_base_url+'gui/icons/wait.gif")'
				})
				.addClass('objectinfo')
				.bind('mouseleave', function() {
					$(image).mouseOut();
				})
				
			)
			.bind('mouseover', function() {
				$(image).mouseOver(this);
			});
			
		},
		
		// start loading & flipping
		mouseOver: function() {
			
			//$("#gallery")
			//.find('.media img:first')
			//.unflip();
			
			if( $(this).closest('li.frontslide').length){
					
				if(!flipping){
					
					var objectUrl = this.parent().parent().attr("href") + ' .objectinfo';
					
					// verander XHR target
					objectUrl = objectUrl.replace('/project/','/objectinfo/');
					
					flipping = true;
					
					height = this.height();
					width = this.width();
					src = this.attr('src');
					
					$(this)
					.flip()
					.prev('.objectinfo')
					.css({
						height: height+"px",
						'left': (width / 2) + 'px',
						'display':'inline-block'
					})
					/* projectpage load AJAX */
					.load(
					
						objectUrl,
						
						{},
						
						function(xhr_result)
						{
							wc('xhr load klaar');
							
							var title = $('.title',
								$(this)
								.parent()
								.parent()
								.parent()
							)
							.clone();
							
							//wc( title );
				
							$(this)
							.prepend( 
								$(title)
								.css({
									width:(width-12)+'px'
								})
							)
							.css({
								backgroundImage:'url("'+site_base_url+'gui/background.gallery.information.gif")'
							});
						}
					);
					
				};
			
			};
			
		},
		
		// start flip
		flip: function(){
			
			$(this)
			.addClass('flipped') // hier al?
			.css({'background-color':'transparent'})
			.animate({ 
				width: "0px",
				paddingLeft: (width / 2) + 'px',
				height: height+"px"
			}, flipspeed,function(){
				
				$(this)
				
				.animate({ 
					width:'0px',
					paddingLeft: '0px',
					height: height+"px"
				}, flipspeed,function(){
					
					$(this).addClass('flipped');
					
				})
				
				
				.prev('.objectinfo')
				.animate({ 
					width: width +"px",
					'left': '0px',
					//'padding-left': (width / 2) + 'px',
					height: height+"px"
				}, flipspeed,function(){
					//alert('half');
					
					//flipping = false;
				})
			
			})
			.next()
			.animate({ 
				width: "0px",
				marginLeft:(width / 2) + 'px'
			}, (flipspeed),function(){
				
				$(this)
				.after(
					$('<img/>')
					.attr('src',site_base_url+'gui/background.gallery.information.reflection.png')
					.attr('id','inforeflection')
					.css({
						'background-color':'transparent',
						'position':'absolute',
						'left':(width/2) +'px',
						'height':'50px',
						'top':(height) +'px'
					})
					.animate({ 
						width: width+"px",
						height:'50px',
						left:'0px'
					}, (flipspeed),function(){
						
					
					})
					
				)
			
			})
			.parent()
			.parent()
			.parent()
			.addClass('flipped')
			.css({'background-color':'transparent'});
			
			return $(this);
		
		},
		
		mouseOut: function() {
			
			$(this)
			.stop()
			.unflip()
			//.prev('.objectinfo')
			//.stop();
			
			flipping = false;
			
		},
		
		// unflip
		unflip: function(){
			
			/*
			$(this)
			.removeAttr('height')
			.removeAttr('width')
			.css({
				'background-color':'#fff',
				width: 'auto',
				height: 'auto',
				paddingLeft: '0px'
			})
			.animate({ 
				paddingLeft: '0px'
			}, 10,function(){
				
				$(this)
				.removeClass('flipped')
				.prev('.objectinfo')
				.css({
					width: "0px",
					'left': '0px'
				});
				
				flipping = false;
			
			})
			.next()
			.css( {width:width+'px',marginLeft:'0px'} )
			.parent()
			.parent()
			.parent()
			.css({'background-color':'#fff'});
			*/
			
			$(this)
			.prev('.objectinfo')
			.animate({ 
				left: (width/2)+'px',
				width: '0px'
			}, (flipspeed),function(){
				
				$(this)
				.next()
				.css({
					paddingLeft: (width/2)+'px'
				})
				.animate({ 
					paddingLeft: '0px',
					width: (width)+'px'
				}, (flipspeed),function(){
				
					$(this)
					.removeAttr('height')
					.removeAttr('width')
					.css({
						'background-color':'#fff',
						width: 'auto',
						height: 'auto'
					})
					.removeClass('flipped')
					.parent()
					.parent()
					.parent()
					.removeClass('flipped')
					.css({'background-color':'#fff'});
					
					flipping = false;
					
				})
				
				
			})
			.next()
			.next()
			.next()
			.animate({ 
				width: '0px',
				marginLeft:(width/2)+'px'
			}, (flipspeed),function(){
			
				$(this)
				.prev()
				.animate({ 
					width: (width)+'px',
					marginLeft:'0px'
				}, (flipspeed),function(){
					
				});
				
				$(this).remove();
			})
			
			
			
			return $(this);
			
		}
	});

})(jQuery);

// 3d carousel class
function cycleGallery(options) {
	
	var container = options.container;
	var holder = options.holder;
	var node = options.node;
	
	//filter nodes zonder image
	$(node,holder).filter(function(index) {
		return $('img',this).length == 0;
	}).remove();
	
	// hebben we nodes?
	if( $(node,container).length ){
		
		//$(container).addClass('gallerycarousel');
		$(holder).wrapAll('<div class="gallerycarousel" />');
		$(holder,$(container)).addClass('ul');
		$(node,$(holder)).addClass('li');
		
		if ($.browser.msie && $.browser.version.substr(0,1)<9) {
			//alert('IE '+ $.browser.version.substr(0,1))
			$(container).addClass('ie');
		}
		
		var begin = 1; // startnode
		
		// list aanvuller (max/min 18)
		//var visible = 5;
		var amount = 18;
		var count = $(node,container).length;
		var inode = count;
		for(var i=count;i<amount;i++){
			inode = inode >= count-1 ? 0 : inode+1;
			var lnode = $(node,container)[inode];
			$(lnode).clone().appendTo(holder);
		}
		
		// galleryitems overlay met info
		$(node,$(holder)).each(function(){ 
			$(this).loadObjectOverlay();
		});
				
		// camera
		var camera = new Camera3D();
		camera.init(0,0,0,256);
		
		// 3D object
		var item = new Object3D(container);
		
		// verdeelde circle
		var parts = new Array();
		for (var i = amount - 1; i >= 0; i--)
		{
			//Figure out where each point lies on the circle
			parts.push( i * Math.PI * 2 / amount );
		}
		parts.reverse();
		item.addChild(new Ring(145,amount));
		
		var scene = new Scene3D();
		scene.addToScene(item);
		
		// ff reflection hier
		$('img', '.gallerycarousel').reflect({height:0.45,opacity:0.8});
		
		// pijltjes interface
		var navleft = 	$('<img/>')
					.attr('src',site_base_url+'gui/gallery.nav.left.png')
					.css({
						position:'absolute',
						left:'-265px',
						top:'-10px',
						'zIndex':4000
					})
					.click(function(){
					
						$('.media img.flipped',container)
						.each(function(){
							$(this).unflip();
						});
						
						jumpRotate(parts[1]);
					})
					.mouseover(function(e){
						mouseOver = false;
					});
		var navright = 	$('<img/>')
					.attr('src',site_base_url+'gui/gallery.nav.right.png')
					.css({
						position:'absolute',
						left:'245px',
						top:'-10px',
						'zIndex':4000
					})
					.click(function(){
						
						$('.media img.flipped',container)
						.each(function(){
							$(this).unflip();
						});
						
						jumpRotate(-parts[1]);
					})
					.mouseover(function(e){
						mouseOver = false;
					});
		
		$(navleft).prependTo('.gallerycarousel');
		$(navright).prependTo('.gallerycarousel');		
		
		
		// startrotatie (eerste node vooraan)
		axisRotation.y = parts[begin];
		
		// render scene
		scene.renderCamera(camera,options);
		
		// move functie (click)
		var steps = 6;
		var prt = 0;
		var interval,angle,end;
		var jumpRotate = function(distance){
			
			if(prt == 0){
			
				end = axisRotation.y;
				end += distance;
				end = end;
			
				angle = distance;
				interval = distance / steps;
				
				rotateIt();
			}
					
		};
		
		var rotateIt = function(){
			
			var tween = Math.abs(prt - (steps/2)) +1;
			var tweenv = interval / steps;
			
			//wc(tween);
			
			if(Math.abs(prt*interval) >= Math.abs(angle)){
			
				prt = 0;
				
			} else {
				
				var simrot = axisRotation.y;
				simrot += interval;
				
				var dorot = false;
				if((interval > 0) && simrot < end){
					dorot = true;
				}
				if((interval < 0) && simrot > end){
					dorot = true;
				}
				
				if( dorot ){
					axisRotation.y += interval;
				} else {
					axisRotation.y = end;
				}
				scene.renderCamera(camera,options);
				
				setTimeout(rotateIt,60);
				
				prt++;
			}
			
		};
		
	}
	
}