$(document).ready(function(){
	
	(function($) {
		var cache = [];
	  	// Arguments are image paths relative to the current page.
	 	$.preLoadImages = function() {
	   	var args_len = arguments.length;
	    for (var i = args_len; i--;) {
	      var cacheImage = document.createElement('img');
	      cacheImage.src = arguments[i];
	      cache.push(cacheImage);
	   	}
	  }
	})(jQuery)
	
	jQuery.preLoadImages(
	
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/smultron.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/mango.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/blabar.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/vanilj.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/passion.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/hallon.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/jordgubb.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/fladerblom.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/lime.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/honung.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/rabarber.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/bjornbar.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/apple.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/granatapple.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/krusbar.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/apelsin.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/svartvinbar.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/lingon.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/hjortron.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/paron.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/banan.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/citron.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/havtorn.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/kiwi.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/ananas.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/kanel.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/persika.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/vindruvor.png",
		"http://de-1705.d.ipeer.se/blanda/wp-content/themes/blanda/images/fruits/rodvinbar.png"
	);

	
	$('.scroll-pane').jScrollPane({
		scrollbarWidth: '8'
	});

	/*
	*--------------------------------------------------------------------------
	* selectors
	*--------------------------------------------------------------------------
	* These are the selectors that correspond to elements on the campaign page,
	* they handle different events such as trashing elements.
	*/

	$(".trasher").live("click", trash_this);
	$("#open-send").live("click", open_send);
	$("#open-rules").live("click", open_rules);
	$(".close-form").live("click", close_overlay);
	<!-- Begin
URL = window.location.href;
ishtm = (URL.indexOf('.htm') > -1); // true if URL contains .htm
ishtml = (URL.indexOf('.html') > -1);
isshtml = (URL.indexOf('.shtml') > -1);
isphtml = (URL.indexOf('#tdomf_form2') > -1);
//  End -->

if (isphtml) {
	$("#form-holder").css({
		display: "block"
	});
	$("body").append("<div id='overlay'></div>");
}

	bind_tooltip('send');
	

	/*
	*--------------------------------------------------------------------------
	* draggables & droppables
	*--------------------------------------------------------------------------
	* These are the core functions of the application, this is where the magic
	* happens. The draggable makes sure the element specified can be dragged.
	* The droppable makes sure the given element can handle elements being
	* dropped on it. It also handles all the extra features such as determining
	* what element was dropped, give it the right id and tell the trash can that
	* an element can now be trashed, these are just a few among other features.
	*/

	/*
	*--------------------------------------------------------------------------
	* Specifications - draggable
	*--------------------------------------------------------------------------
	* @ revert: if the item isn't dropped on a eligeble element, this tells it 
	*   to return to it's original position.
	*
	* @ cancel: if the limit is reached, (default = 3). This class will be added
	*   which makes it impossible to drag any more elements.
	*
	* @ helper: clones the actual element being dragged, in order to keep the 
	*   element at it's original position, in case we want to drag another of 
	*   the same type.
	*/

	$(".pick-me").draggable({
		revert: 'invalid',
		cancel: '.limit-reached',
		helper: 'clone',
		appendTo: 'body' 

	});
	
	/*
	*--------------------------------------------------------------------------
	* Specifications - droppable
	*--------------------------------------------------------------------------
	* @ drop: when an item is dropped, this function is called to handle the event.
	*
	* @ tolerance: in order for the drop to be concidered valid, the whole draggable
	*   element must be within the droppable element.
	*
	*/
	
	$("#plate").droppable({
  		drop: function(event, ui) {
  		
  			// if the current item has already been dropped, just return.
  			if(ui.draggable.hasClass("dropped")){
  				return;
  			}
  			
  			var id = ui.draggable.attr("id").replace("pick_", "");
  			var current_size = get_dropped_amount();
  			
			var occupied = [];
			var free_id = 0;
		
			$(".dropped").each(function(){
				occupied[this.id.replace("dropped_", "")] = null;
			});
		
			for(i=1; i <= get_limit(); i++){
  				if(!(i in occupied)){
  					free_id = i;
  					break;
  				}
  			}

  			// append the dropped element to the plate and initiate the draggable() for it.
  			$("#plate").append("<div id='dropped_"+free_id+"' class='dropped item_"+id+"'></div>");
  			
  			var plate_offset = $("#plate").offset();
			
			// position the dropped element within the frame of the plate
			var mouse_y = event.pageY-plate_offset.top
			var mouse_x = event.pageX-plate_offset.left;
			
			position_dropped_element(mouse_y, mouse_x, free_id);
					
  			// we need to initiate a draggable for the dropped element since
  			// we can move it, but we have special rules applied for it.
  			init_dropped_drag();
  			
  			// size when the item has been dropped.
  			var new_size = get_dropped_amount();
  			
  			if(new_size > 0){
  				$("#helper-bacteria").hide();
  			}
  			
  			//if the limit has been reached, we make sure no other items can be added.
  			if(new_size >= get_limit()){
  				$(".pickable").addClass("limit-reached");
  				bind_tooltip('limit');
  			}
  			
  			// append the trash can for this specific element
  			$("#trash-can").append("<div class='trash-me icon_"+id+"'><span id='trash_"+free_id+"' class='trasher'></span></div>");
  			
  		},
  		tolerance: 'fit'
	});
});

function trash_this(event){
	var id = this.id.replace("trash_", "");
	$("#dropped_"+id).remove();
	$(this).parent().remove();
	
	if(get_dropped_amount() < get_limit()){
		$(".pickable").removeClass("limit-reached");
		$(".tooltip").remove();
		
  	}
}

function init_dropped_drag(){
	$(".dropped").draggable({
		containment: '#plate'
	});
}

function get_dropped_amount(){
	return $(".dropped").size();
}

function open_send(event){
	event.preventDefault();
	
	if($(this).hasClass("unclickable")){
       return false;
	}
	
	var plate_offset = $("#fruit-menu").offset();
	$("#form-holder").css({
		display: "block"
	});
	
	$("body").append("<div id='overlay'></div>");
	
	var classes = [];
	var fruits = '';
	var offsets = '';
	var current_offset = '';
	var offset = $("#plate").offset();
	
	$(".dropped").each(function(){
		
		// get fruit ids
		classes = $(this).attr("class").split(" ");
		$.each(classes, function(key, value){
			if(value.indexOf("item_") === 0){
				fruits += value.replace("item_", "")+",";
			}
		});
		
		// get fruits coords
		// subtracting the offset of the parent element, which is the plate.
		// this is because when we're repositioning the elements in the actual post
		// we need to position them in relation to their parent (the plate).
		current_offset = $(this).offset();
		offsets += (current_offset.top-offset.top)+","+(current_offset.left-offset.left)+"&";
	});

	fruits = fruits.substr(0,fruits.length-1);
	offsets = offsets.substr(0,offsets.length-1);
	$("#customfields-h-4-h").val(fruits);
	$("#customfields-h-5-h").val(offsets);
	
	
}

function open_rules(event){
	event.preventDefault();
	
	if($(this).hasClass("unclickable")){
       return false;
	}
	
	var plate_offset = $("#fruit-menu").offset();
	$("#form-holder-rules").css({
		display: "block"
	});
	
	$("body").append("<div id='overlay'></div>");
}

function close_overlay(){
	$("#form-holder").hide();
	$("#form-holder-rules").hide();
	$("#overlay").remove();
}

function bind_tooltip(call){
		
	if(call == 'limit'){
		$(".limit-reached").hover(
		
		function () {
		 	if(!$(this).hasClass("limit-reached")){
		 		return false;
		 	}
		   		
			var offset = $(this).offset();
			var message = 'Du har redan valt 3 smaker, var vänlig ta bort någon för att lägga till en ny.';
			position_tooltip(offset, message);
		}, 
		function () {
			if(!$(this).hasClass("limit-reached")){
		 		return false;
		 	}
		 		
		    $(".tooltip").remove();
		 	}
		);
	}
	else if(call == 'send'){
		$("#open-send").hover(
		
		function () {
		 
			if($(this).hasClass("unclickable")){
				var offset = $(this).offset();
				var message = 'Du måste lägga till de goda bakterierna innan du kan spara din favoritsmak.';
				position_tooltip(offset, message);
			} 
			
			return;
		
		}, 
		function () {
			
		 	if($(this).hasClass("unclickable")){
				$(".tooltip").remove();
			}
			
			return
		}
		);

	}
}

function position_dropped_element(mouse_y, mouse_x, free_id){

	var base = 75;
			
	var pos_y = 0;
	var pos_x = 0;
			
	if((mouse_y > 170 && mouse_y < 210) && mouse_x > 170 && mouse_x < 210){
		pos_y = base - parseInt(Math.random()*20);
		pos_x = base + parseInt(Math.random()*20);
	}
	else if(mouse_y < 190 && mouse_x < 190){
		pos_y = base - parseInt(Math.random()*75);
		pos_x = base - parseInt(Math.random()*75);
	}
	else if(mouse_y < 190 && mouse_x > 190){
		pos_y = parseInt(Math.random()*75);
		pos_x = base + parseInt(Math.random()*75);
	}
	else if(mouse_y > 190 && mouse_x < 190){
		pos_y = base+parseInt(Math.random()*75);
		pos_x = base-parseInt(Math.random()*75);
	}
	else if(mouse_y > 190 && mouse_x > 190){
		pos_y = base+parseInt(Math.random()*75);
		pos_x = base+parseInt(Math.random()*75);
	}
	
	$("#dropped_"+free_id).css({
		top: pos_y,
		left: pos_x
	});

}

function position_tooltip(offset, message){
	
	$("body").append("<div class='tooltip'><p>"+message+"</p></div>");
	
	$(".tooltip").css({
		top: offset.top-50,
		left: offset.left
	});
}

function get_limit(){
	
	return 3;
}