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); }