try
{

		window.addEvent
		(
			/*
				When the DOM is loaded event call-back function is triggered
			*/
			'domready',
			
			/*
				The event call-back function, initialization
			*/
			function()
			{
				/*
					the gallery object, along with the holding bin, controls the overall
					functionality of the application. The holding bin is an area for user
					to store their photos in a visual clip-board like manner while
					organizing photos.
				*/
				
				gallery.style_elements();
				gallery.show_toolbarTitle();
				gallery.show_toolbarPicture();
				gallery.makeDroppable();
				
				/*
					The holding bin is an area for user to store their photos in a visual
					clip-board like manner while organizing photos.
				*/
				var image_holding_bin = new holding_bin();
				image_holding_bin.makeImagesDraggable();
				image_holding_bin.makeDroppable();
				image_holding_bin.makeScrollable();
				
				/*
					places images in the bin
					
					(just put a few samples images in here so he gets the idea, it's not
						bug proof quite yet)
				*/
				$$('.photo_image').each
				(
					function(item)
					{
						itemMover.injectItemToArea(item, $('image-bin'));
					}
				)
				
				
				var list = $$('.image_option');
				
				list.each
				(
					function(element)
					{
						var fx = new Fx.Styles(element, {duration:200, wait:false});
						
						element.addEvent
						(
							'mouseenter',
							
							function()
							{
								fx.start
								(
									{
										'margin-left': 5,
										color: '#FFFFFF'
									}
								);
							}
						);
						
						element.addEvent
						(
							'mouseleave',
							
							function()
							{
								fx.start
								(
									{
										'margin-left': 0,
										'color': '#000000'
									}
								);
							}
						);
					}
				);
				
			}
		);

}

catch(e)
{
	alert(e);
}

	/*

	*/

try
{
	/*
		the image holding bin
	*/
	
	var holding_bin = new Class
	(
	{

		/*
			
		*/
		makeImagesDraggable: function()
		{
			$$('.photo_image').each
			(
				function(photo_image)
				{
					new Drag.Move
					(
						photo_image,
						{
							'droppables': $$('#image-bin', '.image_container')
						}
					);
					
					photo_image.setStyle('z-index', 10000);
					
					photo_image.addEvent
					(
						'emptydrop',
						
						function()
						{
							this.setStyle('background-color', '#faec8f');
						}
					)
				}
			);
		},
		
		makeScrollable: function()
		{
			var scrolly = new Scroller('bin-container', {area: 40, velocity: 1});
			 
			$('bin-container').addEvent('mouseover', scrolly.start.bind(scrolly));
			$('bin-container').addEvent('mouseout', scrolly.stop.bind(scrolly));
		},
		
		/*
			
		*/
		makeDroppable: function()
		{
			$$('#image-bin').each
			(
				function(holding_bin, index)
				{
					holding_bin.addEvents
					(
						{
							'over': function(element, obj)
							{
								element.setStyle('border', '2px solid #FF0000');
							},
							
							'leave': function(element, obj)
							{
								element.setStyle('border', '1px solid #000000');
							},
							
							'drop': function(element, obj)
							{
								element.setStyle('border', '1px solid #000000');
								
								/*
									calculate and expand the width of the photo drop area to keep
									scrolling horizontally instead of stacking elements vertically
								*/
								var photo_count = 1;
								
								$$('#image-bin div').each
								(
									function(photo_image)
									{
										photo_count++;
									}
								)
								
								var image_width = 100 + 30;
								var image_spacing = 4;
								var calculated_width = photo_count * (image_width + image_spacing);
								
								if (calculated_width < window.getWidth())
								{
									var new_width = window.getWidth();
								}
								else
								{
									var new_width = calculated_width + 'px';
								}
								
								this.setStyle('width', new_width);
								
								/*
									clone the element being dropped, it will later be modified to
									fit into the holding bin and injected into the DOM
								*/
								//var bound_item = element.clone();
								
								//element.remove();
								
								/*
									set new styling rules for the bound item, make it float to the
									left and remove it from absolute positioning before placing it
									inside the hold bin's node
								*/
								
								element.addEvent
								(
									'emptydrop',
									
									function()
									{
										alert('bound_item.addEvent: empty-drop');
										element.remove();
									}
								);
								
								element.setStyle('position', 'static');
								element.setStyle('float', 'left');
								
								itemMover.injectItemToArea(element, holding_bin)
							}
						}
					);
				}
			);
			
			
		}
	}
	);

}
catch(e)
{
	alert(e);
}


try
{

		var gallery =
		{
			style_elements: function()
			{
				Rounded('toolbar_round', 6, 6,6,6)
				Rounded('rounded', 3, 3, 3, 3)
			},
			
			show_toolbarTitle: function()
			{
				var toolbar_fx = new Fx.Style('tool-bar', 'opacity').set(.5);
				var toolbar_transition = new Fx.Transition(Fx.Transitions.Bounce.easeOut, 5);
				
				var slide_into_view = new Fx.Style('tool-bar', 'top', {transition: toolbar_transition.easeIn});
				slide_into_view.start(-70, 15);
			},
			
			show_toolbarPicture: function()
			{
				var toolbar_fx = new Fx.Style('picture-bar', 'opacity').set(.5);
				var toolbar_transition = new Fx.Transition(Fx.Transitions.Bounce.easeOut, 5);
				
				/*
					change height property to be a percentage of the window, allowing it
					to adapt as the user resizes the browser window
				*/
				var slide_into_view = new Fx.Style('picture-bar', 'top', {'unit':'%', transition: toolbar_transition.easeIn});
				slide_into_view.start(110, 85);
			},
			
			/*
			
			*/
			makeDroppable: function()
			{
				$$('.image_container').each
				(
					function(image_container)
					{
						image_container.addEvents
						(
							{
								'drop': function(element, obj)
								{
									/*
										make sure there aren't any other photos already there
									*/
									if (! image_container.getElements('div[class=photo_image]').length)
									{
										image_container.setStyle('border', '1px dotted #999999');
										

										//var bound_item = element.clone();
										
										//element.remove();
									
										itemMover.injectItemToArea(element, image_container)
									}
									
									/**/
								},
								
								'over': function(element, object)
								{
									/*
										make sure there aren't any other photos already there
									*/
									if (! image_container.getElements('div[class=photo_image]').length)
									{
										image_container.setStyle('border', '1px solid #FF0000');
									}
								},

								'leave': function(element, object)
								{
									image_container.setStyle('border', '1px dotted #999999');
								}
							}
						);
					}
				);
			}
		}
		
		var itemMover =
		{
			injectItemToArea: function(bound_item, container)
			{
				/*
					set new styling rules for the bound item, make it float to the
					left and remove it from absolute positioning before placing it
					inside the hold bin's node
				*/
				bound_item.setStyle('position', 'static');
				bound_item.setStyle('float', 'left');
				bound_item.inject(container);
				
				/*
					add a mousedown event which will transform the element
					into a free-ranging draggable object, essentially taking it
					out of the holding in and letting it be placed by the user
				*/
				bound_item.addEvent
				(
					'mousedown',
					
					function(mousedown_event)
					{
						mouse_event = new Event(mousedown_event).stop();
						
						var element = mouse_event.target;
						
						/*
							get the item's absolute positioning. we need
							information for injecting a clone of the element back
							into the documeny body; just making it draggable again
							is not enough, it is still bound to it's parent
							container element.
						*/
						var element_abs_pos = findPos(mouse_event.target);
						var abs_pos_left = element_abs_pos[0];
						var abs_pos_top = element_abs_pos[1];
						
						/*
							clone the element being dropped, it will later be modified to
							fit into the holding bin and injected into the DOM
						*/
						
						document.title = element.id;
						
						/*
						element.setStyles
						(
							{
								'position': 'absolute',
								'left': abs_pos_left,
								'top': abs_pos_top
							}
						)
						*/
						
						element.inject(document.body);
						
						element.makeDraggable
						(
							{
								'droppables': $$('#image-bin', '.image_container')
							}
						)
						
						/*
							associate the original drag event with the new cloned
							element that is no longer bound by the holding bin
						*/
						//element.start(mouse_event);

					}
				);
			}
		}

}

catch(e)
{
	alert(e);
}

try
{
	/*
		findPos method from quirksmode:
		http://www.quirksmode.org/js/findpos.html
	*/
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curleft,curtop];
	}
	
	}
	
	catch(e)
	{
	alert(e);
	}