$(document).ready(function(){
        $('#image_frame-user').hide();

		$('a#user-images').click(function(){
			$('#image_frame').hide();
			$('#image_frame-user').show();
			return false;
			
		});
	
		$('a#our-images').click(function(){
			$('#image_frame-user').hide();
			$('#image_frame').show();
			return false;
		});
});


$(document).ready(function(){
	/* 
		there is the image gallery and thene there is the calendar days
	   	defined as droppable areas
	*/
	var $image_gallery = $('#image_frame');
	var $image_gallery_user = $('#image_frame-user');
	var $calendar_box = $('div.box');
	var $chart_box = $('div.chart-box');
	
	$('img.dragableBox', $image_gallery).draggable({
		helper: 'clone',
		cursor: 'move'
	});
	
	$('img.dragableBox', $image_gallery_user).draggable({
		helper: 'clone',
		cursor: 'move'
	});
	
	$calendar_box.droppable({
		accept: 'img',
		drop: function(ev, ui) {
			var src = $(ui.draggable).attr("src");
			$(this).append('<img class="droppedImage" src="' + src + '" width="25" height="25" />');
			// A change has happened. Make sure the user saves before closing the page.
			YesPrompt();
			$(function(){
				$('.droppedImage').draggable({
					cursor: 'move',
					helper: 'clone'
				});
			});
		}

	});
	
	
	$chart_box.droppable({
		accept: 'img',
		drop: function(ev, ui) {
			var src = $(ui.draggable).attr("src");
			$(this).append('<img class="droppedImage" src="' + src + '" width="45" height="45" />');
			// A change has happened. Make sure the use saves before closing the page.
			YesChartPrompt();
			$(function(){
				$('.droppedImage').draggable({
					cursor: 'move',
					helper: 'clone'
				});
			});
		}

	});
	
	
	$image_gallery.droppable({
		accept: 'img.droppedImage',
		drop: function(ev, ui){
			deleteImage(ui.draggable);
		}
	});
	
	$image_gallery_user.droppable({
		accept: 'img.droppedImage',
		drop: function(ev, ui){
			deleteImage(ui.draggable);
		}
	});
	
	function deleteImage($item){
		var $image_item = $item;
		$image_item.remove();
	}
});