$(document).ready(function() {	
			bublightbox.init();
			
			
	});
	
	var bublightbox = (function() {
		var pictures = new Array(),
		touchCls,
		currentFace = "front",
		angle = 0,
		currentPicture = 0;
		return {			
			init: function(){
				
				$('body').prepend('<div id="bublightbox_overlay"></div><div id="bublightbox_nav"><a href="#" class="bublightbox_next">next</a><a href="#" class="bublightbox_previous">prev</a><a href="#" id="bublightbox_close">close</a></div><div id="bublightbox"><div id="bublightbox_wrapper"><div id="bublightbox_front"></div><div id="bublightbox_back"></div></div></div>');
				
				console.log("height:"+$(window).height());
				console.log("width:"+$(window).width());
				$('.bublightbox').each(function(e) {
					pictures.push($(this).attr('href'));
				});	
				touchCls = new touchClass(document.getElementById('bublightbox_nav'));
				
				
			
				$('.bublightbox').click(function(e) {
					var index = $('.bublightbox').index($(this));
					console.log(index);
					bublightbox.show(index);
					return false;
				});	
				
				$('.bublightbox_next').click(function(e) {
					bublightbox.next();
					return false;
				});
				
				$('.bublightbox_previous').click(function(e) {
					bublightbox.previous();
					return false;
				});
				
				$('#bublightbox_close').click(function(e) {
					bublightbox.hide();
					return false;
				});
				
				
					
			},
			hide: function(){
				$('#bublightbox_overlay').animate({opacity:0},{duration:300, complete: function(){
					$('#bublightbox_overlay').css("display","none");
					$('#bublightbox_front, #bublightbox_back').html("");
				}});
				$('#bublightbox, #bublightbox_nav').css({"display":"none", "opacity":0});
			},
			show: function(id){
				currentPicture = id;
				 $('#bublightbox_front, #bublightbox_back').html("");
								
				if($('html').hasClass('no-csstransforms3d')){						
					$('#bublightbox_front, #bublightbox_back').css("display","none");
					$('#bublightbox_'+currentFace).css("display","block");
				}
				
				$('#bublightbox_overlay').css('display','block');
				$('#bublightbox_overlay').animate({opacity:0.9},{duration:300});
				$('#bublightbox, #bublightbox_nav').css({"display":"block", "opacity":1});
				
				$("<img/>") 
			    .attr("src", pictures[id])
			    .load(function() {
			        var imgW = this.width;   
			        var imgH = this.height; 
			        $('#bublightbox_'+currentFace).html($('.hidden').eq(id).html());			        
			        $('#bublightbox_'+currentFace).css({"width": imgW, "height": imgH,"margin-top":-imgH/2, "margin-left": -imgW/2});			        
			        
					
			    });					
				
			},
			previous: function(){
				if(currentPicture == 0){
					currentPicture = pictures.length;
				}
					currentPicture--;					
					angle+=180;
					if($('html').hasClass('no-csstransforms3d')){
						$('#bublightbox_'+currentFace).html("");
						$('#bublightbox_'+currentFace).css("display","none");
					}
					if(currentFace == "front"){
						currentFace = "back";													
					}else if(currentFace == "back"){
						currentFace = "front";						
					}
					$('#bublightbox_'+currentFace).html("");
					if($('html').hasClass('no-csstransforms3d')){						
						$('#bublightbox_'+currentFace).css("display","block");
					}
					
					$("<img/>") 
					    .attr("src", pictures[currentPicture])
					    .load(function() {
					        var imgW = this.width;   
					        var imgH = this.height; 
					        $('#bublightbox_'+currentFace).html($('.hidden').eq(currentPicture).html());			        
			        		$('#bublightbox_'+currentFace).css({"width": imgW, "height": imgH,"margin-top":-imgH/2, "margin-left": -imgW/2});						
					});	
					$('#bublightbox_wrapper').css("-webkit-transform","rotateY("+angle+"deg)");
					
				
			},
			next: function(){
				if(currentPicture == pictures.length-1){
					currentPicture = -1;
				}
					currentPicture++;					
					angle-=180;
					if($('html').hasClass('no-csstransforms3d')){
						$('#bublightbox_'+currentFace).html("");
						$('#bublightbox_'+currentFace).css("display","none");
					}
					if(currentFace == "front"){
						currentFace = "back";													
					}else if(currentFace == "back"){
						currentFace = "front";						
					}
					$('#bublightbox_'+currentFace).html("");
					if($('html').hasClass('no-csstransforms3d')){						
						$('#bublightbox_'+currentFace).css("display","block");
					}
					
					$("<img/>") 
					    .attr("src", pictures[currentPicture])
					    .load(function() {
					        var imgW = this.width;   
					        var imgH = this.height; 
					        
					         $('#bublightbox_'+currentFace).html($('.hidden').eq(currentPicture).html());			        
			        		$('#bublightbox_'+currentFace).css({"width": imgW, "height": imgH,"margin-top":-imgH/2, "margin-left": -imgW/2});							
					});	
					
					$('#bublightbox_wrapper').css("-webkit-transform","rotateY("+angle+"deg)");
					
				
			}
			
		}			
	})();
	
	

	

	function touchClass(el, name) {
		this.name = name;
		this.element = el;
		this.scale = 1.0;
		this.rotation = 0;
		this.startX = 0;
		this.startY = 0;
		this.offsetY = 0;
		this.offsetX = 0;
		this.position = '0,0';
		this.angle = 0;
		
		
		if( window.Touch ){
			this.element.addEventListener('touchstart', this, false);
		}		
	}

	touchClass.prototype = {
		handleEvent: function(e) {
			switch(e.type) {
				case 'touchstart': this.onTouchStart(e); break;
				case 'touchmove': this.onTouchMove(e); break;
				case 'touchend': this.onTouchEnd(e); break;
				case 'gesturechange': this.onGestureChange(e); break;				
			}
		},

		onTouchStart: function(e) {
			
			
			this.moved = false;		
		    e.preventDefault();	
			this.startX = e.changedTouches[0].clientX;
			this.startY = e.changedTouches[0].clientY;
					
			this.offsetX = 0;
			this.offsetY = 0;
		
			this.element.addEventListener('touchmove', this, false);
			this.element.addEventListener('touchend', this, false);
			this.element.addEventListener('gesturechange', this, false);			
		},		

		onTouchMove: function(e) {
			
			this.moved = true;
			
			console.log(this.offsetX);
			this.offsetX = e.changedTouches[0].clientX - this.startX;
			
		},
		
		onGestureChange: function(e) {
			
			
			// Only interpret gestures when tracking one object.  Otherwise, interpret raw touch events
			// to move the tracked objects.
				
		},

		onTouchEnd: function(e) {
			if(this.offsetX > 40){
				bublightbox.previous();
				
			}else if(this.offsetX < -40){
				bublightbox.next();
				
			}
			
						
			
			this.element.removeEventListener('touchmove', this, false);
			this.element.removeEventListener('touchend', this, false);
			this.element.removeEventListener('mouseup', this, false);
			this.element.removeEventListener('mousemove', this, false); 
			this.angle = this.rotation;
			
			if( !this.moved) {
					// Place your code here or use the click simulation below
					var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
					if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
	
					var theEvent = document.createEvent('MouseEvents');
					theEvent.initEvent('click', true, true);
					theTarget.dispatchEvent(theEvent);
			}
			
		}
	};