$(document).ready(function(){
// Executed once all the page elements are loaded

	//var preventClick=false;
	
	//$(".pic a").bind("click",function(e){
	//	/* This function stops the drag from firing a click event and showing the lightbox */
	//	if(preventClick)
	//	{
	//		e.stopImmediatePropagation();
	//		e.preventDefault();
	//	}
//	});

	/*$(".pic").draggable({
		/* Converting the images into draggable objects *//*
		containment: 'parent',
		start: function(e,ui){
			/* This will stop clicks from occuring while dragging *//*
			preventClick=true;
		},
		
		stop: function(e, ui) {
			/* Wait for 250 milliseconds before re-enabling the clicks *//*
			setTimeout(function(){ preventClick=false; }, 250);
		}
	});*/


	$('.pic').mousedown(function(e){
								 
		/* Executed on image click */
		
		var maxZ = 0;
		
		/* Find the max z-index property: */
		
		$('.pic').each(function(){
			var thisZ = parseInt($(this).css('zIndex'))
			if(thisZ>maxZ) maxZ=thisZ;
		});
		
		/* Clicks can occur in the picture container (with class pic) and in the link inside it */
		if($(e.target).hasClass("pic"))
		{
			/* Show the clicked image on top of all the others: */
			$(e.target).css({zIndex:maxZ+1});
		}
		else $(e.target).closest('.pic').css({zIndex:maxZ+1});
	});
	
	/* Converting all the links to a fancybox gallery */
//	$("a.fancybox").fancybox({
//		zoomSpeedIn: 300,
//		zoomSpeedOut: 300,
//		overlayShow:false
//	});
//	

//	/* Converts the div with id="modal" into a modal window  */
//	$("#modal").dialog({
//		bgiframe: true,
//		modal: true,
//		autoOpen:false,
//		buttons: {
//				Ok: function() {
//					$(this).dialog('close');
//				}
//			}
//	});
	
//	if(location.hash.indexOf('#pic-')!=-1)
//	{
		/* Checks whether a hash is present in the URL */
		/* and shows the respective image */
//		$(location.hash+' a.fancybox').click();
//	}
	
/*NEW*/

    $('.pic').each(function(index) {$(this).rotate((Math.ceil(Math.random()*80))-40);});

    $("#gallery .pic").mouseover(function(){
    	$(this).draggable({
        //  Regular settings for jQuery.UI.draggable function.
        containment: "#container",
	//	containment: "#gallery", Hmmm, more fun seeing the pics end up on other pages! Changed to #container instead
        scroll: false,
		addClasses: false,
		refreshPositions: false,
		stack: ".pic",
		iframeFix: true,
		refreshPositions: true,
		appendTo: 'body',
        // start and stop. We add in the momentum functions here.
        start: function(e, ui) {
            dragMomentum.start(this.id, e.clientX, e.clientY, e.timeStamp);
         },
        stop: function(e, ui) {
            dragMomentum.end(this.id, e.clientX, e.clientY, e.timeStamp);
			$(this).removeClass("ui-draggable");

        }  
     });
	 });
});  // end document ready

var dragMomentum = new function () {    
    var howMuch = 200;  // change this for greater or lesser momentum
    var minDrift = 1; // minimum drift after a drag move
    var easeType = 'easeOutQuad';
    
    //  The standard ease types are 'linear' and 'swing'
    //  To use special ease types, you need this plugin:  
    //  jquery.easing.1.3.js  http://gsgd.co.uk/sandbox/jquery/easing/
    //  special ease types:  'linear',  'swing',  'easeInQuad',  
    //  'easeOutQuad',  'easeInOutQuad',  'easeInCubic',  
    //  'easeOutCubic',  'easeInOutCubic',  'easeInQuart',
    //  'easeOutQuart',  'easeInOutQuart', 'easeInQuint',
    //  'easeOutQuint',  'easeInOutQuint',  'easeInSine',  
    //  'easeOutSine',  'easeInOutSine',  'easeInExpo',  
    //  'easeOutExpo',  'easeInOutExpo',  'easeInCirc',  
    //  'easeOutCirc',  'easeInOutCirc',  'easeInElastic',
    //  'easeOutElastic',  'easeInOutElastic',  'easeInBack',
    //  'easeOutBack',  'easeInOutBack',  'easeInBounce',
    //    'easeOutBounce',  'easeInOutBounce'
    //  Also see this page for a great display of the easing types.
    //  http://jqueryui.com/demos/effect/#easing
    
    //  No user options below this point.

    var dXa =[0];
    var dYa =[0];
    var dTa =[0];
    
    this.start = function (elemId, Xa, Ya, Ta)  {
          dXa[elemId] = Xa;
        dYa[elemId] = Ya;
        dTa[elemId] = Ta;
        
      }; // END dragmomentum.start()

    this.end = function (elemId, Xb, Yb, Tb)  {        
        var Xa = dXa[elemId];
        var Ya = dYa[elemId];
        var Ta = dTa[elemId];
        var Xc = 0;
        var Yc = 0;

        var dDist = Math.sqrt(Math.pow(Xa-Xb, 2) + Math.pow(Ya-Yb, 2));
        var dTime = Tb - Ta;
        var dSpeed = dDist / dTime;
        dSpeed=Math.round(dSpeed*100)/100;

        var distX =  Math.abs(Xa - Xb);
        var distY =  Math.abs(Ya - Yb);

        var dVelX = (minDrift+(Math.round(distX*dSpeed*howMuch / (distX+distY))));
        var dVelY = (minDrift+(Math.round(distY*dSpeed*howMuch / (distX+distY))));

        var position = $('#'+elemId).position();
        var locX = position.left;
        var locY = position.top;
        
        if ( Xa > Xb ){  // we are moving left
            Xc = locX - dVelX;
        } else {  //  we are moving right
            Xc = locX + dVelX;
        }
    
        if ( Ya > Yb ){  // we are moving up
            Yc = (locY - dVelY);
        } else {  // we are moving down
            Yc = (locY + dVelY);
        }
        
        var newLocX = Xc + 'px';
        var newLocY = Yc + 'px';
        
        $('#'+elemId).animate({ left:newLocX, top:newLocY }, 1000, easeType );

    }; // END  dragmomentum.end()

};  // END dragMomentum