fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic UpdaterYUI().use('yql', 'node', 'anim', 'dd', 'dd-plugin', 'dd-drop-plugin', 'slider', 'stylesheet', 'event-delegate', function(Y) {

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater //Get a reference to the wrapper to use later and add a loading class to it.

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater var wrapper = Y.one('#yui-main .yui-g ul').addClass('loading');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Set it's height to the height of the viewport so we can scroll it.

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); });

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater //Make the YQL query.

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.YQL('SELECT * FROM flickr.photos.search(100) WHERE (text="yuiconf") AND (safe_search = 1) AND (media = "photos")', function(e) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (e.query) {

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater var photos = e.query.results.photo;

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Walk the returned photos array

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.each(photos, function(v, k) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Create our URL

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg',

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Create the image and the LI

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'),

a8d090b3625c57bddfb815ad0fd987e265e8e1f8Automatic Updater //Get the image from the LI

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater img = li.get('firstChild');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Append the li to the wrapper

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.appendChild(li);

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //This little hack moves the tall images to the bottom of the list

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //So they float better ;)

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater img.on('load', function() {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Is the height longer than the width?

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater this.addClass(c);

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (c === 'tall') {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Move it to the end of the list.

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater this.get('parentNode.parentNode').removeChild(this.get('parentNode'));

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.appendChild(this.get('parentNode'));

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater this.get('parentNode').removeClass('loading');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Get all the newly added li's

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.all('li').each(function(node) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Plugin the Drag plugin

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater this.plug(Y.Plugin.Drag, {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater offsetNode: false

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Plug the Proxy into the DD object

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater this.dd.plug(Y.Plugin.DDProxy, {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater resizeFrame: false,

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater moveOnEnd: false,

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater borderStyle: 'none'

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Create and render the slider

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater var sl = new Y.Slider({

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater length: '200px', value: 40, max: 70, min: 5

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }).render('.horiz_slider');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Listen for the change

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater sl.after('valueChange',function (e) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Insert a dynamic stylesheet rule:

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater var sheet = new Y.StyleSheet('image_slider');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater sheet.set('#yui-main .yui-g ul li', {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater width: (e.newVal / 2) + '%'

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Remove the DDM as a bubble target..

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater sl._dd.removeTarget(Y.DD.DDM);

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Remove the wrappers loading class

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.removeClass('loading');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.one('#ft').removeClass('loading');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Listen for all mouseup's on the document (selecting/deselecting images)

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.delegate('mouseup', function(e) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (!e.shiftKey) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //No shift key - remove all selected images

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.all('img.selected').removeClass('selected');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Check if the target is an image and select it.

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (e.target.test('#yui-main .yui-g ul li img')) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater e.target.addClass('selected');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }, document, '*');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Listen for all clicks on the '#photoList li' selector

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.delegate('click', function(e) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Prevent the click

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater e.halt();

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Remove all the selected items

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Add the selected class to the one that one clicked

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater e.currentTarget.addClass('selected');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //The "All Photos" link was clicked

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (e.currentTarget.hasClass('all')) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Remove all the hidden classes

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.all('li').removeClass('hidden');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater } else {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Another "album" was clicked, get it's id

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater var c = e.currentTarget.get('id');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Hide all items by adding the hidden class

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.all('li').addClass('hidden');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Now, find all the items with the class name the same as the album id

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //and remove the hidden class

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater wrapper.all('li.' + c).removeClass('hidden');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }, document, '#photoList li');

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Stop the drag with the escape key

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.one(document).on('keyup', function(e) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //The escape key was pressed

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if ((e.keyCode === 27) || (e.charCode === 27)) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //We have an active Drag

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater if (Y.DD.DDM.activeDrag) {

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //Stop the drag

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater Y.DD.DDM.activeDrag.stopDrag();

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater }

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater });

fc2381b901eb162810f54a11cc512b95f55a60dfAutomatic Updater //On the drag:mouseDown add the selected class

Y.DD.DDM.on('drag:mouseDown', function(e) {

var img = e.target.get('node').one('img');

//If it's a gesture event, then we need to act differently

if (Y.DD.Drag.START_EVENT.indexOf('gesture') === 0) {

if (img.hasClass('selected')) {

img.removeClass('selected');

} else {

img.addClass('selected');

}

} else {

img.removeClass('selected');

}

});

//On drag start, get all the selected elements

//Add the count to the proxy element and offset it to the cursor.

Y.DD.DDM.on('drag:start', function(e) {

var img = e.target.get('node').one('img').addClass('selected');

//How many items are selected

var count = wrapper.all('img.selected').size();

//Set the style on the proxy node

e.target.get('dragNode').setStyles({

height: '25px', width: '25px'

}).set('innerHTML', '<span>' + count + '</span>');

//Offset the dragNode

e.target.deltaXY = [25, 5];

});

//We dropped on a drop target

Y.DD.DDM.on('drag:drophit', function(e) {

//get the images that are selected.

var imgs = wrapper.all('img.selected'),

//The xy position of the item we dropped on

toXY = e.drop.get('node').getXY();

imgs.each(function(node) {

//Clone the image, position it on top of the original and animate it to the drop target

node.get('parentNode').addClass(e.drop.get('node').get('id'));

var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');

Y.one('body').appendChild(n);

n.setXY(node.getXY());

new Y.Anim({

node: n,

to: {

height: 20, width: 20, opacity: 0,

top: toXY[1], left: toXY[0]

},

from: {

width: node.get('offsetWidth'),

height: node.get('offsetHeight')

},

duration: .5

}).run();

});

//Update the count

var count = wrapper.all('li.' + e.drop.get('node').get('id')).size();

e.drop.get('node').one('span').set('innerHTML', '(' + count + ')');

});

//Add drop support to the albums

Y.all('#photoList li').each(function(node) {

if (!node.hasClass('all')) {

//make all albums Drop Targets except the all photos.

node.plug(Y.Plugin.Drop);

}

});

});