/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.7.0");
google.setOnLoadCallback(function()
{

  //get querystring
  var urlParams = {};
  (function () {
      var e,
          a = /\+/g,  // Regex for replacing addition symbol with a space
          r = /([^&;=]+)=?([^&;]*)/g,
          d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
          q = window.location.search.substring(1);

      while (e = r.exec(q))
         urlParams[d(e[1])] = d(e[2]);
  })();



  //if we are on the detail page, set the detail image
  if($('#detailphoto')) {
    if (urlParams['photo']) {
      //set detail photo source
      var imagePath = $('#detailphoto').children('img').attr("src");
      imagePath = imagePath.substring(0, imagePath.lastIndexOf('/'));

      $('#detailphoto').children('img').attr("src", "");
      $('#detailphoto').children('img').attr("src", imagePath + "/" + urlParams['photo'] + ".jpg");
      $('#detailphoto').children('img').show();

      //move the clicked thumbnail to front
      $('#th' + urlParams['photo']).css('z-index', 1000);
    } else {
      $('#detailphoto').children('img').show();
    }
  }

  //create image position text area if in align mode
  if("align" in urlParams) {
    $('body').append('<textarea name="imagepositions" id="imagepositions" cols="45" rows="5" style="position: absolute; top: 0px; left: 0px;"></textarea>')
  }


	// Set the Z-Index (used to display images on top while dragging)
	var zindexnr = 1;

	//get highest current z index
	$(".thumbnail").each(function (i) {
	  if(parseInt($(this).css('z-index')) > zindexnr) zindexnr = $(this).css('z-index');
	});


	// boolean to check if the user is dragging
	var dragging = false;

	// Show the thumbnail on top when clicked on
	$(".thumbnail").mouseup(function(e){
		if(!dragging) {
			// Bring thumbnail to the foreground
			zindexnr++;
			var cssObj = { 'z-index' : zindexnr };  // safari only
			$(this).css(cssObj);
		}
	});

	// Make the thumbnail draggable
	$(".thumbnail").draggable({
		start: function(event, ui) {
			dragging = true;
			zindexnr++;
			var cssObj = { 'z-index' : zindexnr };
			$(this).css(cssObj);
		},
		stop: function(event, ui) {
			var cssObj = { };
			$(this).css(cssObj);
			dragging = false;

			printImagePositions();
		}
	});


	//function to print the image positions if we are in align mode
	//use ?align as url param to enter align mode
	function printImagePositions() {
	  if(!"align" in urlParams) return;

	  var imageCss = '';

	  $(".thumbnail").each(function (i) {
	    var position = $(this).position();
      imageCss += '#' + $(this).attr('id') + ' { margin-top: ' + (position.top + parseInt($(this).css('margin-top'))) + 'px ; margin-left: ' + (position.left + parseInt($(this).css('margin-left'))) + 'px; z-index:' + (($(this).css('z-index') > 1000) ? $(this).css('z-index') - 1000 : $(this).css('z-index')) + ' }\n'
  	});

  	$("#imagepositions").val(imageCss);
	}

});