<CFOUTPUT><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jedi Challenge</title>
</head>
<body>
<!---
To do this, I treat it as a "deck of cards", calculating the position of each card
on the grid, and then shuffling the deck ...
--->
<!--- Let the user decide the number of slices --->
<FORM method="post" action="#cgi.script_name#">
Select number of tiles:
<SELECT name="tiles"><CFLOOP from="1" to="20" index="x"><option value="#x#" <CFIF IsDefined("form.tiles") and form.tiles eq X>SELECTED</CFIF>>#x*x# (#x# x #x# grid)</CFLOOP></SELECT><input type="Submit">
</FORM>
<CFIF Not isDefined("form.tiles")><CFSET form.tiles=10></CFIF>
<!--- Load the image ---->
<!--- <CFIMAGE action="INFO" source="http://www.drg1.com/hillary_clinton.jpg" structname="imageinfo"> --->
<CFIMAGE action="INFO" source="http://www.drg1.com/hillary_clinton.jpg" structname="imageinfo">
<!--- Build the "Deck" --->
<CFSET Deck = "">
<CFSET xStart = 0>
<CFSET xOld = -1>
<CFLOOP from="1" to="#form.tiles#" index="x1">
<!--- Calc the start and end of the X range for this box --->
<CFSET xStart = xOld + 1>
<CFSET xEnd = int(xStart + imageinfo.width/#form.tiles#)>
<!--- Get set for a new set of Y --->
<CFSET yStart = 0>
<CFSET yOld = -1>
<!--- Loop to create 10 * Y --->
<CFLOOP from="1" to="#form.tiles#" index="y1">
<!--- Calc the start and end of the X range for this box --->
<CFSET yStart = yOld + 1>
<CFSET yEnd = int(yStart + imageinfo.height/#form.tiles#)>
<!--- saving as X Coord - X Width | Y Coord - Y Width
Did this to handle odd pixel amounts (ie 555 pixels in 10 slices,
some should be 55 some should be 56) ------------------------------------>
<CFSET Deck = ListAppend(Deck, "#xStart#-#xEnd-xStart#|#yStart#-#yEnd-yStart#")>
<CFSET yOld = yEnd>
</CFLOOP>
<CFSET xOld = xEnd>
</CFLOOP>
<!--- Display original image and shuffling of the deck --->
<TABLE>
<TR>
<TD valign=top><IMG src="hillary_clinton.jpg"></TD>
<TD width=50> </TD>
<TD valign=top><DIV style="height: 350px; width=150px; overflow: auto;"><strong>Pre-Shuffle</strong><BR>#replace(Deck,",","<BR>","ALL")#</DIV></TD>
<!--- Shuffle the Deck --->
<CFSET Deck2 = "">
<CFLOOP From="#form.tiles*form.tiles#" to="1" index="x" step="-1">
<CFSET R = RandRange(1,x)>
<CFSET Deck2 = ListAppend(Deck2, ListGetAt(Deck, R))>
<CFSET Deck = ListDeleteAt(Deck, R)>
</CFLOOP>
<TD width=50> </TD>
<TD valign=top><DIV style="height: 350px; width=150px; overflow: auto;"><strong>Post-Shuffle</strong><BR>#replace(Deck2,",","<BR>","ALL")#</DIV></TD>
</TR>
</TABLE>
<!--- Load the image ------------------------------->
<CFIMAGE action="READ" source="http://www.drg1.com/hillary_clinton.jpg" name="theimage">
<!--- Redraw the image ------------------------------->
<strong>Tiles are mixed widths because images generally don't slice evenly:</strong><BR>
<TABLE cellpadding=0 cellspacing=0 border=0>
<CFLOOP from="0" to="#form.tiles*form.tiles-form.tiles#" step="#form.tiles#" index="x">
<TR>
<CFLOOP from="1" to="#form.tiles#" index="y">
<TD>
<cfset myImage=ImageNew(theimage)>
<CFSET pair=ListGetAt(deck2, x+y)>
<cfset ImageCrop(myImage,ListGetAt(Pair,1,"|-"),ListGetAt(Pair,3,"|-"),ListGetAt(Pair,2,"|-"),ListGetAt(Pair,4,"|-"))>
<cfimage action="WRITETOBROWSER" source="#myimage#" format="jpg"/>
</TD>
</CFLOOP>
</TR>
</CFLOOP>
</TABLE>
<BR><BR><BR>
<iframe src="challengesource.cfm" width="1000" height="600"></iframe>
</body>
</html>
</CFOUTPUT>