Maple Story Party Organizer<title> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ background-color:#ffffff; } #footer{ height:30px; vertical-align:middle; text-align:right; clear:both; padding-right:3px; background-color:#317082; margin-top:2px; width:790px; } #footer form{ margin:0px; margin-top:2px; } #dhtmlgoodies_dragDropContainer{ /* Main container for this script */ width:790px; height:375px; //border:1px solid #317082; background-color:#FFF; -moz-user-select:none; } #dhtmlgoodies_dragDropContainer ul{ /* General rules for all <ul> */ margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right: 7px; padding:2px; } #dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */ list-style-type:none; height:15px; background-color:#FFFF99; border:1px solid #000; padding:2px; margin-bottom:2px; cursor:pointer; font-size:13px; line-height:15px; } li#indicateDestination{ /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */ border:1px dotted #600; background-color:#FFF; } #dhtmlgoodies_dragDropContainer ul li.warrior{ /* Correctly moved item */ background-color:#E8311E; color:#FFF; } #dhtmlgoodies_dragDropContainer ul li.magician{ /* Item moved to wrong box */ background-color:#0989F3; color:#FFF; } #dhtmlgoodies_dragDropContainer ul li.archer{ /* Item moved to wrong box */ background-color:#0DAF01; color:#FFF; } #dhtmlgoodies_dragDropContainer ul li.theif{ /* Item moved to wrong box */ background-color:#D88A13; color:#FFF; } #dhtmlgoodies_dragDropContainer ul li.pirate{ /* Item moved to wrong box */ background-color:#762EEC; color:#FFF; } /* Warrior: E8311E Magician: 0989F3 Archer: 0DAF01 Theif: D88A13 Pirate: 762EEC */ /* LEFT COLUMN CSS */ div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */ float:left; padding-left:10px; padding-right:10px; /* CSS HACK */ width: 180px; /* IE 5.x */ width/* */:/**/160px; /* Other browsers */ width: /**/160px; } #dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */ height:690px; } div#dhtmlgoodies_listOfItems div{ border:1px solid #999; } div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */ margin-left:10px; /* Space at the left of list - the arrow will be positioned there */ } #dhtmlgoodies_listOfItems div p{ /* Heading above left column */ margin:0px; font-weight:bold; padding-left:12px; background-color:#317082; color:#FFF; margin-bottom:5px; } /* END LEFT COLUMN CSS */ #dhtmlgoodies_dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */ background-color:#E2EBED; border:1px solid #317082; } /* Start main container CSS */ div#dhtmlgoodies_mainContainer{ /* Right column DIV */ width:590px; float:left; } #dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */ float:left; margin-right:10px; margin-bottom:10px; margin-top:0px; border:1px solid #999; /* CSS HACK */ width: 172px; /* IE 5.x */ width/* */:/**/170px; /* Other browsers */ width: /**/170px; } #dhtmlgoodies_mainContainer div ul{ margin-left:10px; } #dhtmlgoodies_mainContainer div p{ /* Heading above small boxes */ margin:0px; padding:0px; padding-left:12px; font-weight:bold; background-color:#317082; color:#FFF; margin-bottom:5px; } #dhtmlgoodies_mainContainer ul{ /* Small box in right column ,i.e <ul> */ width:152px; height:80px; border:0px; margin-bottom:0px; overflow:hidden; } #dragContent{ /* Drag container */ position:absolute; width:150px; height:15px; display:none; margin:0px; padding:0px; z-index:2000; } #dragDropIndicator{ /* DIV for the small arrow */ position:absolute; width:7px; height:10px; display:none; z-index:1000; margin:0px; padding:0px; } </style> <style type="text/css" media="print"> div#dhtmlgoodies_listOfItems{ display:none; } body{ background-color:#FFF; } img{ display:none; } #dhtmlgoodies_dragDropContainer{ border:0px; width:100%; } </style> <script type="text/javascript"> /************************************************************************************************************ (C) www.dhtmlgoodies.com, December 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ /* VARIABLES YOU COULD MODIFY */ var boxSizeArray = [6,6,6,6,6,6,6]; // Array indicating how many items there is rooom for in the right column ULs var arrow_offsetX = -5; // Offset X - position of small arrow var arrow_offsetY = 0; // Offset Y - position of small arrow var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow var arrow_offsetY_firefox = -7; // Firefox - offset Y small arrow var verticalSpaceBetweenListItems = 3; // Pixels space between one <li> and next // Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li var initShuffleItems = false; // Shuffle items before staring var indicateDestionationByUseOfArrow = true; // Display arrow to indicate where object will be dropped(false = use rectangle) var lockedAfterDrag = false; /* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */ /* END VARIABLES YOU COULD MODIFY */ var dragDropTopContainer = false; var dragTimer = -1; var dragContentObj = false; var contentToBeDragged = false; // Reference to dragged <li> var contentToBeDragged_src = false; // Reference to parent of <li> before drag started var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged var destinationObj = false; // Reference to <UL> or <LI> where element is dropped. var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped var ulPositionArray = new Array(); var mouseoverObj = false; // Reference to highlighted DIV var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1; var destinationBoxes = new Array(); var indicateDestinationBox = false; //**** var classArray = []; //stores int value for to represent class var nameArray = []; //stores string from text input var partyArray = new Array(6); // 6 parties for(i=0; i<partyArray.length; i++) partyArray[i] = new Array(6); //partyArray[x][y] = party x member y //**** function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop; } return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft; } return returnValue; } function cancelEvent() { return false; } function initDrag(e) // Mouse button is pressed down on a LI { if(document.all)e = event; if(lockedAfterDrag && this.parentNode.id!='allItems')return; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); dragTimer = 0; dragContentObj.style.left = e.clientX + sl + 'px'; dragContentObj.style.top = e.clientY + st + 'px'; contentToBeDragged = this; contentToBeDragged_src = this.parentNode; contentToBeDragged_next = false; if(this.nextSibling){ contentToBeDragged_next = this.nextSibling; if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling; } timerDrag(); return false; } function everythingIsCorrect() { alert('Congratulations! Everything is correct'); } function timerDrag() { if(dragTimer>=0 && dragTimer<10){ dragTimer++; setTimeout('timerDrag()',10); return; } if(dragTimer==10){ dragContentObj.style.display='block'; dragContentObj.appendChild(contentToBeDragged); } } function moveDragContent(e) { if(dragTimer<10){ if(contentToBeDragged){ if(contentToBeDragged_next){ contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); }else{ contentToBeDragged_src.appendChild(contentToBeDragged); } } return; } if(document.all)e = event; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); dragContentObj.style.left = e.clientX + sl + 'px'; dragContentObj.style.top = e.clientY + st + 'px'; if(mouseoverObj)mouseoverObj.className=''; destinationObj = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox)indicateDestinationBox.style.display='none'; var x = e.clientX + sl; var y = e.clientY + st; var width = dragContentObj.offsetWidth; var height = dragContentObj.offsetHeight; var tmpOffsetX = arrow_offsetX; var tmpOffsetY = arrow_offsetY; if(!document.all){ tmpOffsetX = arrow_offsetX_firefox; tmpOffsetY = arrow_offsetY_firefox; } for(var no=0;no<ulPositionArray.length;no++){ var ul_leftPos = ulPositionArray[no]['left']; var ul_topPos = ulPositionArray[no]['top']; var ul_height = ulPositionArray[no]['height']; var ul_width = ulPositionArray[no]['width']; if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){ var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length; if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--; if(noExisting<boxSizeArray[no-1] || no==0){ dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px'; var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI'); for(var liIndex=0;liIndex<subLi.length;liIndex++){ var tmpTop = getTopPos(subLi[liIndex]); if(!indicateDestionationByUseOfArrow){ if(y<tmpTop){ destinationObj = subLi[liIndex]; indicateDestinationBox.style.display='block'; subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]); break; } }else{ if(y<tmpTop){ destinationObj = subLi[liIndex]; dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px'; dragDropIndicator.style.display='block'; break; } } } if(!indicateDestionationByUseOfArrow){ if(indicateDestinationBox.style.display=='none'){ indicateDestinationBox.style.display='block'; ulPositionArray[no]['obj'].appendChild(indicateDestinationBox); } }else{ if(subLi.length>0 && dragDropIndicator.style.display=='none'){ dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px'; dragDropIndicator.style.display='block'; } if(subLi.length==0){ dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px' dragDropIndicator.style.display='block'; } } if(!destinationObj)destinationObj = ulPositionArray[no]['obj']; mouseoverObj = ulPositionArray[no]['obj'].parentNode; mouseoverObj.className='mouseover'; return; } } } } function checkAnswers() { for(var no=0;no<destinationBoxes.length;no++){ var subLis = destinationBoxes[no].getElementsByTagName('LI'); if(subLis.length<boxSizeArray[no])return; for(var no2=0;no2<subLis.length;no2++){ if(subLis[no2].className=='wrongAnswer')return; } } everythingIsCorrect(); } /* End dragging Put <LI> into a destination or back to where it came from. */ function dragDropEnd(e) { if(dragTimer==-1)return; if(dragTimer<10){ dragTimer = -1; return; } dragTimer = -1; if(document.all)e = event; if(destinationObj){ var groupId = contentToBeDragged.getAttribute('groupId'); if(!groupId)groupId = contentToBeDragged.groupId; var destinationToCheckOn = destinationObj; if(destinationObj.tagName!='UL'){ destinationToCheckOn = destinationObj.parentNode; } var answerCheck = false; if(destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')contentToBeDragged.className=''; if(destinationObj.tagName=='UL'){ destinationObj.appendChild(contentToBeDragged); }else{ destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj); } mouseoverObj.className=''; destinationObj = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox){ indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } contentToBeDragged = false; if(answerCheck)checkAnswers(); CountParties(); displayPartyPrint(); return; } if(contentToBeDragged_next){ contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); }else{ contentToBeDragged_src.appendChild(contentToBeDragged); } contentToBeDragged = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox){ indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } mouseoverObj = false; } /* Preparing data to be saved */ function saveDragDropNodes() { var saveString = ""; var uls = dragDropTopContainer.getElementsByTagName('UL'); for(var no=0;no<uls.length;no++){ // LOoping through all <ul> var lis = uls[no].getElementsByTagName('LI'); for(var no2=0;no2<lis.length;no2++){ if(saveString.length>0)saveString = saveString + ";"; saveString = saveString + uls[no].id + '|' + lis[no2].innerHTML; } } document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>'; } function initDragDropScript() { dragContentObj = document.getElementById('dragContent'); dragDropIndicator = document.getElementById('dragDropIndicator'); dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer'); document.documentElement.onselectstart = cancelEvent;; var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI> var itemHeight = false; for(var no=0;no<listItems.length;no++){ listItems[no].onmousedown = initDrag; listItems[no].onselectstart = cancelEvent; if(!itemHeight)itemHeight = listItems[no].offsetHeight; if(MSIE && navigatorVersion/1<6){ listItems[no].style.cursor='hand'; } } var mainContainer = document.getElementById('dhtmlgoodies_mainContainer'); var uls = mainContainer.getElementsByTagName('UL'); itemHeight = itemHeight + verticalSpaceBetweenListItems; for(var no=0;no<uls.length;no++){ uls[no].style.height = itemHeight * boxSizeArray[no] + 'px'; destinationBoxes[destinationBoxes.length] = uls[no]; } var leftContainer = document.getElementById('dhtmlgoodies_listOfItems'); var itemBox = leftContainer.getElementsByTagName('UL')[0]; document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div var ulArray = dragDropTopContainer.getElementsByTagName('UL'); for(var no=0;no<ulArray.length;no++){ ulPositionArray[no] = new Array(); ulPositionArray[no]['left'] = getLeftPos(ulArray[no]); ulPositionArray[no]['top'] = getTopPos(ulArray[no]); ulPositionArray[no]['width'] = ulArray[no].offsetWidth; ulPositionArray[no]['height'] = ulArray[no].clientHeight; ulPositionArray[no]['obj'] = ulArray[no]; } if(initShuffleItems){ var allItemsObj = document.getElementById('allItems'); var initItems = allItemsObj.getElementsByTagName('LI'); for(var no=0;no<(initItems.length*10);no++){ var itemIndex = Math.floor(Math.random()*initItems.length); allItemsObj.appendChild(initItems[itemIndex]); } } if(!indicateDestionationByUseOfArrow){ indicateDestinationBox = document.createElement('LI'); indicateDestinationBox.id = 'indicateDestination'; indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } } window.onload = initDragDropScript; function getCheckedValue(radioObj) { if(!radioObj) return ""; var radioLength = radioObj.length; if(radioLength == undefined) if(radioObj.checked) return radioObj.value; else return ""; for(var i = 0; i < radioLength; i++) { if(radioObj[i].checked) { return radioObj[i].value; } } return ""; } function setCheckedValue(radioObj, newValue) { if(!radioObj) return; var radioLength = radioObj.length; if(radioLength == undefined) { radioObj.checked = (radioObj.value == newValue.toString()); return; } for(var i = 0; i < radioLength; i++) { radioObj[i].checked = false; if(radioObj[i].value == newValue.toString()) { radioObj[i].checked = true; } } } function submitenter(myfield,e) { var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; else return true; if (keycode == 13) { addplayer(); return false; } else return true; } function CountParties() { var PartySize= [0,0,0,0,0,0,0]; var uls = dragDropTopContainer.getElementsByTagName('UL'); for(var no=0;no<uls.length;no++){ // LOoping through all <ul> var lis = uls[no].getElementsByTagName('LI'); for(var no2=0;no2<lis.length;no2++){ if(uls[no].id=="box1")PartySize[0]++; if(uls[no].id=="box2")PartySize[1]++; if(uls[no].id=="box3")PartySize[2]++; if(uls[no].id=="box4")PartySize[3]++; if(uls[no].id=="box5")PartySize[4]++; if(uls[no].id=="box6")PartySize[5]++; } } document.getElementById("party1").innerHTML ="Party 1 ("+PartySize[0]+")"; document.getElementById("party2").innerHTML ="Party 2 ("+PartySize[1]+")"; document.getElementById("party3").innerHTML ="Party 3 ("+PartySize[2]+")"; document.getElementById("party4").innerHTML ="Party 4 ("+PartySize[3]+")"; document.getElementById("party5").innerHTML ="Party 5 ("+PartySize[4]+")"; document.getElementById("party6").innerHTML ="Party 6 ("+PartySize[5]+")"; var total = PartySize[0]+PartySize[1]+PartySize[2]+PartySize[3]+PartySize[4]+PartySize[5]; document.getElementById("totalplayers").innerHTML ="Total players in all parties: <b>"+total+"</b>"; displayClass(); } function displayClass() { //alert("Hello Display Class"); document.getElementById("playerW").innerHTML = ""; document.getElementById("playerM").innerHTML = ""; document.getElementById("playerB").innerHTML = ""; document.getElementById("playerT").innerHTML = ""; document.getElementById("playerP").innerHTML = ""; for(var i=0; i<classArray.length; i++) { if(classArray[i] =="1") document.getElementById("playerW").innerHTML += nameArray[i]+"<br>"; if(classArray[i] =="2") document.getElementById("playerM").innerHTML += nameArray[i]+"<br>"; if(classArray[i] =="3") document.getElementById("playerB").innerHTML += nameArray[i]+"<br>"; if(classArray[i] =="4") document.getElementById("playerT").innerHTML += nameArray[i]+"<br>"; if(classArray[i] =="5") document.getElementById("playerP").innerHTML += nameArray[i]+"<br>"; } } function displayPartyPrint() { printPartyPlayer('dhtmlgoodies_p1','party1print',1); printPartyPlayer('dhtmlgoodies_p2','party2print',2); printPartyPlayer('dhtmlgoodies_p3','party3print',3); printPartyPlayer('dhtmlgoodies_p4','party4print',4); printPartyPlayer('dhtmlgoodies_p5','party5print',5); printPartyPlayer('dhtmlgoodies_p6','party6print',6); } function printPartyPlayer(id1, id2, num) { var parties = false; party = document.getElementById(id1); var listItems = party.getElementsByTagName('LI'); // Get array containing all <LI> document.getElementById(id2).innerHTML = ("P"+num+": "); for(var i=0; i<listItems.length; i++) { document.getElementById(id2).innerHTML += nameArray[listItems[i].id]; if(i!=listItems.length-1) document.getElementById(id2).innerHTML += ", "; } } function editplayer(id) //Display player to be edited info { if(id > 30) id= 30; if(id < 1 ) id= 1; if(nameArray[id] == null) { document.getElementById("addign").value= ""; } else { document.getElementById("addign").value= nameArray[id]; setCheckedValue(document.forms['inputForm'].elements['uClass'], classArray[id]) } return ""; } function addplayer() //Changes or adds player { var node= 0; node = document.getElementById("numign").value; if(node > 30) node= 30; if(node < 1 ) node= 1; var nodename = node; classArray[node] = getCheckedValue(document.forms['inputForm'].elements['uClass']); var ign = document.getElementById("addign").value; document.getElementById(nodename).innerHTML ="<b>"+node+"</b>: "+ign; nameArray[node] = ign; //alert(ign + " is a " + classArray[node]); if(classArray[node] == 1) document.getElementById(node).className = 'warrior'; if(classArray[node] == 2) document.getElementById(node).className = 'magician'; if(classArray[node] == 3) document.getElementById(node).className = 'archer'; if(classArray[node] == 4) document.getElementById(node).className = 'theif'; if(classArray[node] == 5) document.getElementById(node).className = 'pirate'; if(node>=30)node=1;else node++; document.getElementById("numign").value=node; displayClass(); displayPartyPrint(); editplayer(node); document.forms['inputForm'].elements['addign'].focus(); } </script> </head> <body> <form style="margin: 0px 0px 0px 0px;" name="inputForm" id="inputForm"> #<input type="text" id="numign" name="numign" value="1" style="width: 25px;" onkeyup="editplayer(this.value);"></input> IGN<input type="text" id="addign" name="addign" onKeyPress="return submitenter(this,event)"></input> Warrior<input type="radio" value="1" name="uClass" id="uClassW" checked="true"> Magician<input type="radio" value="2" name="uClass" id="uClassM"> Bowmen<input type="radio" value="3" name="uClass" id="uClassB"> Theif<input type="radio" value="4" name="uClass" id="uClassT"> Pirate<input type="radio" value="5" name="uClass" id="uClassP"> <input type="button" value="Add Player" onclick="addplayer();"></input> </form> <div id="dhtmlgoodies_dragDropContainer"> <div id="dhtmlgoodies_listOfItems"> <div> <p>Player List</p> <ul id="allItems"> <li id="1"><b>1:</b></li> <li id="2"><b>2:</b></li> <li id="3"><b>3:</b></li> <li id="4"><b>4:</b></li> <li id="5"><b>5:</b></li> <li id="6"><b>6:</b></li> <li id="7"><b>7:</b></li> <li id="8"><b>8:</b></li> <li id="9"><b>9:</b></li> <li id="10"><b>10:</b></li> <li id="11"><b>11:</b></li> <li id="12"><b>12:</b></li> <li id="13"><b>13:</b></li> <li id="14"><b>14:</b></li> <li id="15"><b>15:</b></li> <li id="16"><b>16:</b></li> <li id="17"><b>17:</b></li> <li id="18"><b>18:</b></li> <li id="19"><b>19:</b></li> <li id="20"><b>20:</b></li> <li id="21"><b>21:</b></li> <li id="22"><b>22:</b></li> <li id="23"><b>23:</b></li> <li id="24"><b>24:</b></li> <li id="25"><b>25:</b></li> <li id="26"><b>26:</b></li> <li id="27"><b>27:</b></li> <li id="28"><b>28:</b></li> <li id="29"><b>29:</b></li> <li id="30"><b>30:</b></li> </ul> </div> </div> <div id="dhtmlgoodies_mainContainer">  <div id="dhtmlgoodies_p1"> <p id="party1">Party 1 (0)</p> <ul id="box1"> </ul> </div> <div id="dhtmlgoodies_p2"> <p id="party2">Party 2 (0)</p> <ul id="box2"></ul> </div> <div id="dhtmlgoodies_p3"> <p id="party3">Party 3 (0)</p> <ul id="box3"> </ul> </div> <div id="dhtmlgoodies_p4"> <p id="party4">Party 4 (0)</p> <ul id="box4"></ul> </div> <div id="dhtmlgoodies_p5"> <p id="party5">Party 5 (0)</p> <ul id="box5"> </ul> </div> <div id="dhtmlgoodies_p6"> <p id="party6">Party 6 (0)</p> <ul id="box6"> </ul> </div> </div> <ul id="dragContent"></ul> <div id="dragDropIndicator"><img src="images/insert.gif"></div> </div> <div id="totalplayers">Total players in all parties: <b>0</b></div> <table border="1"> <tr> <td>Warriors:</td> <td>Magicians:</td> <td>Bowmen:</td> <td>Theifs:</td> <td>Pirates:</td> </tr><tr> <td valign="top"><div id="playerW"></div></td> <td valign="top"><div id="playerM"></div></td> <td valign="top"><div id="playerB"></div></td> <td valign="top"><div id="playerT"></div></td> <td valign="top"><div id="playerP"></div></td> </tr> </table> <table border="0"> <tr><td><div id="party1print"></div></td></tr> <tr><td><div id="party2print"></div></td></tr> <tr><td><div id="party3print"></div></td></tr> <tr><td><div id="party4print"></div></td></tr> <tr><td><div id="party5print"></div></td></tr> <tr><td><div id="party6print"></div></td></tr> </table> <script type="text/javascript"> document.getElementById("numign").value="1"; </script> </body> </html>