<!doctype html>
<html>
<head>
<title>Drag and Drop Basics - RJM Programming</title>

<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<style>
h1, form {
margin-left: 40px;
}

li {
list-style-type: none;
float: left;
margin: 0 16px 16px 0;
}

.sortlist {
width: 130px;
}

ul {
width: 800px;
}

#RandomFlickrImages {
width: 800px;
}

#header {
background-color: #E4ECF9;
border-top: 1px blue solid;
margin-top: 10px;
color: #36C;
font-size: 18px;
}

#loadDialog {
float: right;
text-align: center;
padding: 0 10px;
font-size: 10px;
}
</style>
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>

<script type="text/javascript">

if (document.URL.indexOf('https:') != -1) location.href=document.URL.replace('https:','http:');

YAHOO.namespace("container");

var imgArray = new Array();
var nextImg = 0;
var numShow = 10;
var numSoFar = 0;
var ourtd;
var jj;

// Don't execute any code until the DOM is ready!
$(document).ready(function(){

// Feed jQuery JSON function call to Flickr, get photo details
$.getJSON("//api.flickr.com/services/feeds/photos_public.gne?id=59164050@N03&format=json&jsoncallback=?", displayImages);

function displayImages(data) {
// Start putting together the HTML string
var htmlString = "<h1>Slideshow Builder of RJM Programming rmetimages at Flickr</h1><ul id='ul1' class='draglist'>";
var ii=0;
var onc="";
htmlString = "";

// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// Want square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
imgArray[nextImg] = new Image();
imgArray[nextImg].src = (item.media.m);
imgArray[nextImg].title = item.title;
onc = "window.open('" + item.link + "','_blank');";
imgArray[nextImg].alt = onc;
nextImg++;
// Here's where we piece together the HTML
htmlString = ''; // += '<li id="li' + ii + '" class="sortlist">';
htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
htmlString += '" width="128" height="96" alt="' + item.title + '" />';
// htmlString += '</li>';
$('#li' + ii).html(htmlString);
ii++;
});
htmlString += ''; //'</ul>';
}

// The end of our jQuery function
});


</script>
</head>
<body class="yui-skin-sam">
<!--div id="images"> </div-->
<h1>Slideshow Builder of RJM Programming rmetimages at Flickr</h1>
<div id='RandomFlickrImages'>
<div id='header'><a href='#' id='loadDialog'>edit</a></div>
<ul id='ul1' class='draglist'>
<li id="li0" class="sortlist"></li>
<li id="li1" class="sortlist"></li>
<li id="li2" class="sortlist"></li>
<li id="li3" class="sortlist"></li>
<li id="li4" class="sortlist"></li>
<li id="li5" class="sortlist"></li>
<li id="li6" class="sortlist"></li>
<li id="li7" class="sortlist"></li>
<li id="li8" class="sortlist"></li>
<li id="li9" class="sortlist"></li>
<li id="li10" class="sortlist"></li>
<li id="li11" class="sortlist"></li>
<li id="li12" class="sortlist"></li>
<li id="li13" class="sortlist"></li>
<li id="li14" class="sortlist"></li>
<li id="li15" class="sortlist"></li>
<li id="li16" class="sortlist"></li>
<li id="li17" class="sortlist"></li>
<li id="li18" class="sortlist"></li>
<li id="li19" class="sortlist"></li>
</ul>
<br clear="all" />
</div>

<script type="text/javascript">


function init() {
var hs = function() {
YAHOO.log("Dialog submitted", "warn");
this.hide();
}
var hc = function() {
YAHOO.log("Dialog cancelled", "warn");
this.hide();
}

YAHOO.container.dialog1 = new YAHOO.widget.Dialog("dlg",
{ width: "380px",
fixedcenter: true,
visible: false,
constraintoviewport: true,
buttons:[
{text: "Submit", handler: hs, isDefault: true},
{text: "Cancel", handler: hc}
],
effect: {effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.25}
}
);

YAHOO.container.dialog1.render();

document.getElementById("loadDialog").onclick = function() {
YAHOO.log("Border dialog starting now");
YAHOO.container.dialog1.show();
}

var mlr = new YAHOO.widget.LogReader("logArea");

}

(function() {
var liCArray = new Array();
var liArray = new Array();
for (var ii=0; ii<20; ii++) {
liCArray[ii] = "li" + ii;
}
YAHOO.util.Event.onDOMReady(function() {
for (var i=0; i<20; i++) {
liArray[i] = new YAHOO.util.DD(liCArray[i]);
}
init();
});
})();


</script>

<div id="dlg">
<form name='dlgForm' action='#'>
  <select id='slide' name='slide' onchange=' document.getElementById(this.value).innerHTML = document.getElementById(this.value).innerHTML.replace("g t", "g style=border-color:red;border-width:5px;border-style:solid; t"); '>
<option value=''>Optionally select slide ID to put border around below ...</option>
<option value='li0'>1</option>
<option value='li1'>2</option>
<option value='li2'>3</option>
<option value='li3'>4</option>
<option value='li4'>5</option>
<option value='li5'>6</option>
<option value='li6'>7</option>
<option value='li7'>8</option>
<option value='li8'>9</option>
<option value='li9'>10</option>
<option value='li10'>11</option>
<option value='li11'>12</option>
<option value='li12'>13</option>
<option value='li13'>14</option>
<option value='li14'>15</option>
<option value='li15'>16</option>
<option value='li16'>17</option>
<option value='li17'>18</option>
<option value='li18'>19</option>
<option value='li19'>20</option>
</select>
</form>
</div>

<div id="logArea"></div>
</body>
</html>