<?
/*******************************************************************************
* [ magnetic poetry ] *
* *
* hide@address.com *
* *
* see install.txt for help *
* *
* credits: *
* evan webb <hide@address.com> - original contention resolution idea *
* *
*******************************************************************************/
// set my fridge
$myfridge = "pedram";
//
// should not have to modify anything beyond this line
//
// include database config file
include("magnetic_poetry.inc.php");
// create our list of words and count how many there are
$word_list = `ls words | xargs echo | tr ' ' ':'`;
$num_words = `ls words | wc -l`;
// if no fridge is specified, lets redirect
if (!isset($fridge))
$fridge = $myfridge;
if (isset($data)) {
//
// data preperation
//
$timestamp = date("m/d/y H:i:s");
$ip_address = $REMOTE_ADDR;
// remove trailing ':' ... javascript is dirty
$clean_data = substr($data, 0, strlen($data) - 1);
//
// it's database time
//
mysql_connect($mysql_server, $mysql_rw_username, $mysql_rw_password)
or die ("poetry: could not connect to database server.");
mysql_select_db($mysql_database)
or die ("poetry: unable to open database for data storage.");
// grab the current fridge
$sql_query = "SELECT data FROM $mysql_table WHERE fridge = '$fridge'";
// execute it
$result = mysql_query($sql_query)
or die ("poetry: unable to retrieve data from table.");
// grab the row
$row = mysql_fetch_array($result);
//echo "newdata: $clean_data<p>";
//echo "curdata: $row[0]<p>";
//echo "oridata: $original_positions<p>";
//exit();
// create an array of the current, new, and original fridge data
$new_data = explode(":", $clean_data);
$cur_data = explode(":", $row[0]);
$ori_data = explode(":", $original_positions);
// this is where we store the final word coordinates
$data = "";
// in an attempt to minimize word position contention we only want to save
// the positions of words that were changed
for ($i = 0; $i < $num_words; $i++) {
if ($new_data[$i] == $ori_data[$i])
$data .= $cur_data[$i] . ":";
else
$data .= $new_data[$i] . ":";
}
$clean_data = substr($data, 0, strlen($data) - 1);
// the sql statement
$sql_query = "UPDATE $mysql_table SET data = '$clean_data', timestamp = '$timestamp', ip_address = '$ip_address' WHERE fridge = '$fridge'";
// execute it
mysql_query($sql_query)
or die ("poetry: unable to write data to table.");
//
// ok we're done updating, redirect to main page
//
header("Location: $PHP_SELF?fridge=$fridge");
}
?>
<html>
<head>
<title>redhive.com: magnetic poetry</title>
<style type="text/css">
a:link {color: #990000; text-decoration: none;}
a:visited {color: #990000; text-decoration: none;}
a:hover {color: #990000; text-decoration: none;}
<?
for ($i = 0; $i < $num_words; $i++)
printf ("#word%d {position:absolute; zIndex:1; left:0; top:%d;}\n", $i, 5 * $i);
?>
</style>
<script language="JavaScript">
/*
magnetic poetry javascript rundown:
- determine if browser if usable
- establish event handling (catch mouse clicks/movement)
- handle word selection
- bring word to front (z-index)
- determine which word was selected (set selectedWord)
- handle dragging
- update selectedWord coordinates
- handle dropping
- set selectedWord to null
- drop word to background (z-index)
*/
//
// figure out what kind of browser we're dealing with and if it's usable
//
var isNS = (document.layers) ? true : false;
var isIE = (document.all) ? true : false;
//
// handle the netscape resize bug
//
if (isNS)
window.onResize = fixMe;
function fixMe() {
document.location = document.location;
}
//
// globals
//
var selectedWord = null; // currently select word
var coordX, coordY; // selected words coordinates
//
// moves a word to another postion
//
function moveWord (wordToMove, x, y) {
if (isNS) {
movingWord = document.layers[wordToMove];
movingWord.left = x;
movingWord.top = y;
}
if (isIE) {
movingWord = document.all(wordToMove).style;
movingWord.pixelLeft = x;
movingWord.pixelTop = y;
}
}
//
// figure out which word was clicked on
//
function whichWord (event) {
if (isNS) { // netscape
var clickPosX = event.pageX;
var clickPosY = event.pageY;
var currentWord;
for (i = 0; i < <?=$num_words?>; i++) {
currentWord = document.layers['word' + i];
if ((clickPosX > currentWord.left) && (clickPosX < currentWord.left + currentWord.clip.width) && (clickPosY > currentWord.top) && (clickPosY < currentWord.top + currentWord.clip.height)) {
selectedWord = currentWord;
return;
}
}
}
if (isIE) { // internet explorer
var theWord = window.event.srcElement;
selectedWord = theWord.parentElement.style;
return;
}
// if we're here it means the user didn't click on a word
selectedWord = 0;
return;
}
//
// figure out where the cursor is relative to the word
//
function selectWord (event) {
whichWord(event);
if (selectedWord) {
selectedWord.zIndex = 100;
if (isNS) {
coordX = event.pageX - selectedWord.left;
coordY = event.pageY - selectedWord.top;
}
if (isIE) {
coordX = window.event.offsetX;
coordY = window.event.offsetY;
}
}
return false;
}
//
// update word coordinates on screen
//
function dragWord (event) {
if (selectedWord) {
if (isNS) {
//alert("X: " + event.pageX + " Y: " + event.pageY);
selectedWord.left = event.pageX - coordX;
selectedWord.top = event.pageY - coordY;
}
if (isIE) {
//alert("X: " + window.event.clientX + " Y: " + window.event.clientY);
<? // ok let me explain the following nonsense
// apparently microsoft can't even keep standards within their own products
// in windows ie we need to compensate for any window scrolling
// mac ie is smarter and handles window scrolling like netscape
if (ereg("Mac_PowerPC", $HTTP_USER_AGENT)) {
echo "selectedWord.pixelLeft = window.event.clientX - coordX;\n";
echo "selectedWord.pixelTop = window.event.clientY - coordY;\n";
}
else {
echo "selectedWord.pixelLeft = document.body.scrollLeft + window.event.clientX - coordX;\n";
echo "selectedWord.pixelTop = document.body.scrollTop + window.event.clientY - coordY;\n";
}
?>
return false;
}
}
}
//
// drop the word
//
function dropWord() {
selectedWord.zIndex = 1;
selectedWord = null;
}
//
// establishes event handling
//
function eventHandler() {
if (isNS)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP | Event.KEYPRESS);
if (isNS || isIE) {
document.onmousedown = selectWord;
document.onmousemove = dragWord;
document.onmouseup = dropWord;
document.onkeypress = saveWords;
}
}
//
// initializing function called by onload()
// moves layers to appropriate positions and calls eventHandler()
//
function initMagneticPoetry() {
eventHandler();
<?
// database connectivity
mysql_connect($mysql_server, $mysql_ro_username, $mysql_ro_password)
or die ("poetry: could not connect to database server.");
mysql_select_db($mysql_database)
or die ("poetry: unable to open database for data retrieval.");
// the sql statement
$sql_query = "SELECT * FROM $mysql_table WHERE fridge = '$fridge'";
// execute it
$result = mysql_query($sql_query)
or die ("poetry: unable to retrieve data from table.");
// grab the row
$row = mysql_fetch_array($result);
// if there is data for that fridge, handle it
if ($row) {
// split the data into x,y coordinate pairs
$coord_pairs = explode(":", $row["data"]);
// write the javascript layer move routines
for ($i = 0; $i < $num_words; $i++) {
if ($coord_pairs[$i]) {
echo "moveWord('word$i', $coord_pairs[$i]);\n";
$original[$i] = $coord_pairs[$i];
}
else {
$y += 5;
echo "moveWord('word$i', 0, $y);\n";
$original[$i] = "0,$y";
}
}
$original_positions = implode(":", $original);
}
?>
}
//
// save the current word coordinates into the database
// we are looking for SHIFT + S (key code 83)
//
function saveWords (event) {
if (isNS)
theKey = event.which;
if (isIE)
theKey = window.event.keyCode;
if (theKey == 83) {
if (isNS)
var newLocation = "<?=$PHP_SELF?>?fridge=<?=$fridge?>&original_positions=<?=$original_positions?>&data=";
if (isIE)
var newLocation = "<?=$PHP_SELF?>?fridge=<?=$fridge?>&data=";
for (i = 0; i < <?=$num_words?>; i++) {
if (isNS) {
currentWord = document.layers['word' + i];
newLocation = newLocation + currentWord.left + "," + currentWord.top + ":";
}
if (isIE) {
layerID = "word" + i;
currentWord = document.all(layerID).style;
newLocation = newLocation + currentWord.pixelLeft + "," + currentWord.pixelTop + ":";
}
}
location.href = newLocation;
}
}
</script>
</head>
<body background="images/fridge.gif" bgcolor="#FFFFFF" marginwidth="0" marginheight="0" text="#000000" onLoad="initMagneticPoetry()">
<center>
<font face="arial" size="1">
<font color="#990000">red</font>hive.com magnetic poetry<br>
there are currently <?=$num_words?> words to play with.<br>
last save: <?=$row["timestamp"]?> by <?=$row["ip_address"]?><br>
fridge surface area is 2000x2000 pixels. (scroll to see everything)<br>
press shift + s to save.<br>
contact: <a href="mailto:hide@address.com">hide@address.com</a><br>
</font>
</center>
<img src="images/spacer.gif" width="2000" height="1">
<img src="images/spacer.gif" width="1" height="2000">
<?
$words = explode(":", $word_list, $num_words);
for ($i = 0; $i < $num_words; $i++) {
$words[$i] = str_replace(":", "", $words[$i]);
printf ("<div id=\"word%d\"><img src=\"words/$words[$i]\" border=\"0\"></div>\n", $i);
}
?>
</body>
</html>