Location: PHPKode > scripts > PHP Magnetic Poetry > php-magnetic-poetry/index.php
<?
/*******************************************************************************
 *  [ 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>
Return current item: PHP Magnetic Poetry