Untitled 1

<html>
<head>
<title>JavaScript/Ajax Shared Whiteboard</title>
<style>

body {
text-align: center
}
.stdbtn { width:280px; }
</style>


<link rel="stylesheet" type="text/css" href="jqpopup.css"/>
<link rel="stylesheet" type="text/css" href="jqcp.css"/>
<link rel="stylesheet" type="text/css" href="paint2.css"/>
<script type="text/javascript" src="paint2.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jqDnR.min.js"></script>
<script type="text/javascript" src="jquery.jqpopup.min.js"></script>
<script type="text/javascript" src="jquery.jqcp.min.js"></script>

<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript">
var newWind7 = null;

function openIt7() {

if(newWind7) {

newWind7.focus();

}
else {
newWind7 = window.open("tryit.html","joe7","height=475,width=250");
newWind7.focus();
}
return false;

}

function doIt2(event) {
if(newWind7) {
if(!event) event=window.event;
var canvas2, bb, x, y;
// Get <canvas> element from the context object
canvas2 = document.getElementById("mycanvas");
c2 = canvas2.getContext('2d');
// Get canvas size and position
bb = canvas2.getBoundingClientRect();
// Convert mouse event coordinates to canvas coordinates
x = (event.clientX-bb.left) * (canvas2.width/bb.width) - 100;
y = (event.clientY-bb.top) * (canvas2.height/bb.height) - 100;
// Call isPointInPath with these transformed coordinates
// change to copying one canvas and putting it in another ->return context.isPointInPath(x,y);
var canvas = newWind7.document.getElementById("my_canvas_id");
c2.drawImage(canvas, x, y)

// alert(x + " " + y);
}

}

// end new

var pmousex = 0;
var pmousey = 0;
var nmousex = 0;
var nmousey = 0;
var ctx;
var c;

var mycanvas;
var isAvail;

var yourname;
var othername;
var thetimer = null;

var drawColor = 'black';
var drawWidth = 1;
var lastdrawColor;
var lastdrawWidth;

var isTextT = false;
var tfont = 'sans';
var tfontsize = 10;
var mouseIsdown = false;

function drawtheImage(reg) {

var imageName;

if(reg == "A") {
imageName = document.getElementById("imageName").value;
} else if(reg == "B"){
imageName = "theimage3.png";
} else {

imageName = "white.png";
}
var thebogus = (Math.floor(Math.random() * 10000000000)).toString();
// alert(thebogus);
var img = null;
img = new Image();
img.src = "thisuploads/" + imageName + "?" + thebogus;
img.onload = function(){

ctx.drawImage(img,0,0,700,600);
if(reg == "C") sendContent();

}

}

// need textbox for your name and other's name
// isAvail is textbox that reads who is the user from the server (starts with 'available')

function doBinds() {

if($("available").text().indexOf(othername) < 0) {

$("#mycanvas").bind("mousedown", function(e) {
ctx.strokeStyle = drawColor;
ctx.fillStyle = drawColor;
ctx.lineWidth = drawWidth;
ctx.beginPath();
pmousex = e.pageX - 62; // adjust for position of canvas
pmousey = e.pageY - 163; // adjust for position of canvas

ctx.moveTo(pmousex, pmousey);
var curtext = document.getElementById("insertText").value;

mouseIsdown = true;

if(e.shiftKey) {
isTextT = true;

ctx.drawText(tfont,tfontsize,pmousex,pmousey,curtext);

isTextT = false;

}

if(!isTextT) {

$("#mycanvas").bind("mousemove", function(e) {
nmousex = e.pageX - 62; // adjust for position of canvas
nmousey = e.pageY - 163; // adjust for position of canvas

ctx.lineTo(nmousex, nmousey);

ctx.stroke();

ctx.moveTo(nmousex,nmousey);

});

}

});

if(!isTextT){

$("#mycanvas").bind("mouseup", function(){

mouseIsdown = false;
$("#mycanvas").unbind("mousemove");

});

} else {

isTextT = false;
mouseIsdown = false;

}
}
$("#mycanvas").bind("mouseout", function(e) {

if(mouseIsdown){
mouseIsdown = false;
$(this).triggerHandler("mouseup");
}
});
}

function returnStatus2(){

thetimer = setInterval(function() {

$.post("readAvail3.php",{'mydata': ""},function(d) {
$("#available").text(d)});

},5600);
}

function getXMLHttp() {

var XMLHttp = null;
if (window.XMLHttpRequest)
{
try {
XMLHttp = new XMLHttpRequest();
} catch (e) { }
} else if(window.ActiveXObject) {
try {
XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return XMLHttp;
}

function sendContent() {

asyncRequest = getXMLHttp(); // create request object

// register event handler
asyncRequest.onreadystatechange = processResponse;
asyncRequest.open("POST", "save3.php", true); // prepare the request
asyncRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
asyncRequest.send("u="+mycanvas.toDataURL()); // send the request
}

function startNew(){

$.post("usertxt3.php",{'mydata': yourname + " is drawing now"}, function() {ctx.moveTo(pmousex,pmousey);

$("#mycanvas").unbind();
doBinds();});

}

function processResponse() {
if ( asyncRequest.readyState == 4 && asyncRequest.status == 200)
{
asyncRequest = null;
returnStatus2();
}

}

function returnStatus(){

sendContent();

}

window.onunload = function(){

if(newWind7) newWind7.close();
}

window.onload = function(){

wsp = document.getElementById('workspace');

//set up canvas
canvas = document.getElementById('mycanvas');
ctx = document.getElementById('mycanvas').getContext('2d');

mycanvas = document.getElementById('mycanvas');
isAvail = document.getElementById('available');

CanvasTextFunctions.enable(ctx);

c = ctx;

font = "sans";
fontsize = 10;
// iface.status = document.getElementById('status').firstChild;
// iface.xy = document.getElementById('xy').firstChild;
// iface.txy = document.getElementById('txy').firstChild;

//set up defaults
c.tool = new tool.line();
c.lineWidth = 1;
c.strokeStyle = '#000';
c.fillStyle = '#FFF';
c.tertStyle = '#DDD';
c.strokeFill = 1; //outline shapes
// prefs.pretty = document.getElementById('pretty').checked;
// prefs.controlpoints = document.getElementById('controlpoints').checked;

ctx.strokeStyle = 'black';
ctx.lineWidth = 1;

//set up overlay canvas (for preview when drawing lines, rects etc)
canvastemp = document.getElementById("canvastemp");
ctemp = canvastemp.getContext("2d");

//set up selection canvas (invisible, used for selections)
canvassel = document.getElementById("canvassel");
csel = canvassel.getContext("2d");

//set up undo canvas (invisible)
canvasundo = document.getElementById("canvasundo");
cundo = canvasundo.getContext("2d");

window.onmouseup = bodyUp;
window.onmousemove = bodyMove;
// window.onkeydown = shortcuts;

if(document.location.search) {

}

// timer runs for both at first, then only for non-active person
// timer reads shWBavail.txt and loads that value into textbox id=isAvail via checkAvail.php

thetimer = setInterval(function() {

$.post("readAvail3.php",{'mydata': ""},function(d) {
$("#available").text(d)});

},5600);

$("#lastuser").bind("click",function(e) {
drawtheImage("C");
$.post("lastuser3.php");
});

$("#buttonDONE").bind("click",function(e) {

$("#mycanvas").unbind("mousemove");
$("#mycanvas").unbind("mousedown");

$("#mycanvas").unbind("mouseup");

themessage = "available for " + othername + " of ACTIVE PAIR";

// usertxt.php sets the username of the person using OR sets that textbox to available
$.post("usertxt3.php",{'mydata': themessage},function() {returnStatus();});

});

$("#buttonMYTURN").bind("click",function(e) {

clearInterval(thetimer);
thetimer = null;
drawColor = 'black';
setTheColor($("#color_value").val());
drawWidth = 1;
tfontsize = 10;
document.getElementById("mycb").checked = false;

othername = $("#otherusername").val();
yourname = $("#yourusername").val();

if($("available").text().indexOf(othername) < 0){

alert("After closing this alert box ***WAIT*** and ** let OTHER'S drawing happen before beginning ** -- top of page will read YOU are drawing, when canvas is ready");

mycanvas.focus();
ctx.moveTo(100,560);
$("mycanvas").click();
drawtheImage("B");
isAvail.innerHTML = yourname + " is now drawing";
startNew();

}

});

alert('TO USE THIS APPLICATION, you simply religiously take turns. This is simple, since it is indicated within 5 sec when each person takes a turn & then also within 5 sec when the canvas becomes available to the other for drawing again. (Also know that a person taking a turn can just collect the OTHER\'S updated drawing and then click DONE, if desired) The FIRST TURN TAKER should wait 5 sec after clicking "My Turn" before beginnig to drawing.');

};

function setEraser()
{

lastdrawColor = drawColor;
lastdrawWidth = drawWidth;
drawColor = 'white';
drawWidth = 10;
alert("This actually erases by drawing with a 10px-wide white brush. You will have to click the 'Draw Again' button to return to drawing after erasing.");

}

function setBack()
{
drawColor = lastdrawColor;
drawWidth = lastdrawWidth;

}

function setTheColor(thecolor)
{
drawColor = thecolor;

}

function setT()
{
if(document.getElementById("mycb").checked) {

drawWidth=3;
tfontsize = 12;

}
if(!(document.getElementById("mycb").checked)) {

drawWidth=1;
tfontsize = 10;

}
}
</script>
</head>
<body id="body">

<div id="toolbar">
<ul id="buttons">

<li id="line" onmousedown="buttonDown(event, this)" onclick="selTool(this)" onmouseout="buttonReset(this)" title="Line"> <img src="buttons/line.gif" /> </li>
<li id="rectangle" onmousedown="buttonDown(event, this)" onclick="selTool(this)" onmouseout="buttonReset(this)" title="Rectangle"> <img src="buttons/rectangle.gif" /> </li>

<li id="ellipse" onmousedown="buttonDown(event, this)" onclick="selTool(this)" onmouseout="buttonReset(this)" title="Ellipse"> <img src="buttons/ellipse.gif" /> </li>
<li id="rounded" onmousedown="buttonDown(event, this)" onclick="selTool(this)" onmouseout="buttonReset(this)" title="Rounded Rectangle"> <img src="buttons/rounded.gif" /> </li>
</ul>

</div>

<div class="preload" style="background-image:url(icons/dashed2.gif)"></div>
<div class="preload" style="background-image:url(icons/dotted.gif)"></div>
<div id="menubar"></div>
<div id="settings"></div>

<div id="workspace" style="position: absolute; width: 710px; height: 610px; z-index: 1; left: 56px; top: 156px;border: 3px double #FF0000" width="710">
<canvas id="mycanvas" width=700 height=600 ondblclick="doIt2(event);"></canvas>
<div id="canvasresize" style="display:none;"></div>

</div>
<div><canvas id="canvastemp" style="position: absolute; width: 700px; height: 600px;"oncontextmenu="return false"></canvas>

</div>

<div id="statusbar"><div id="statusbar2">
<div id="status"><div> </div></div>
<div id="xy"><div> </div></div>
<div id="txy"><div> </div></div>
</div></div>
<div id="titlebar" onmousedown="windowDrag(event)"><canvas id="gradient" height="20" width="200"></canvas><h1 onmousedown="event.preventDefault()">untitled - CanvasPaint</h1></div>

<canvas id="canvassel" width="700" height="600" style="display:none;margin-top:470px;border:1px solid green"></canvas>
<canvas id="canvasundo" width="700" height="600" style="display:none;border:1px solid red"></canvas>

<div style="position: absolute; width: 900px; z-index: 1; left: 0px; top: 0px" id="layer1">
Fill in both textboxes before clicking on the canvas: <input type="text" size="15" id="yourusername" value="YOUR username" />
<input type="text" size="15" id="otherusername" value="OTHER'S username" />
<a href="drawDir2.htm" target="_blank">LINK TO SOME DIRECTIONS & INFO</a><br />
(Main user (<b>one of the users</b>) must be "user1" (no quotes).).

<br />
<input type="button" id="lastuser" value="1st & Last Drawer CLICK HERE" /> (<- at very start & end of session, respectively)

<br />
<center><div id="available">Check HERE (in 5 sec) to see if this application is in use by another pair of users</div></center>
<input type="button" value="My Turn" id="buttonMYTURN" /><input type="button" value="DONE w/ my turn" id="buttonDONE" />

<br />
<hr color="#008000" size="6"><br /><br />
</div>

<div id="controls" style="position: absolute; width: 900px; height: 156px; z-index: 1; left: 0px; top: 780px; border-style: solod; border-color: #000000">
<center><span>Make selections before mousedown (to draw with new color/thickness); INITIAL default is Black, Thin: </span>
<input type="button" value="Erase" onclick="setEraser(); return false;" />
<input type="button" value="Draw Again" onclick="setBack(); return false;" />
<br />
Thick?:<input type="checkbox" id="mycb" onchange="setT(); return false;" /> (FUN HACK: For REALLY THICK line, click Erase & then Pick a Color; Draw Again returns to prevous color/thickness.)

<div id="colorbox" style="display:none" title="Color Picker">
<table>
<tr>
<td colspan="3">
H:<input type="text" id="jqcp_h" size="3" value="0"/>
S:<input type="text" id="jqcp_s" size="3" value="0"/>
L:<input type="text" id="jqcp_l" size="3" value="0"/><br/>
R:<input type="text" id="jqcp_r" size="3" value="255"/>
G:<input type="text" id="jqcp_g" size="3" value="255"/>
B:<input type="text" id="jqcp_b" size="3" value="255"/><br/>
<input type="text" id="color_value" class="jqcp_value" size="8"/>
<input type="button" id="pick_color" value="Pick"/>
</td>
</tr>
<tr>
<td align="left"><div id="color_picker"></div></td>
</tr>
</table>
</div>

<p>
Color: <input type="text" id="product_color" name="product_color" size="6" style="font-size: 80%; height:20px;width:60px"/>
<img id="jqcp_box" src="images/jqcp_box.gif" alt="pick color" border="0"/>
<img id="jqcp_popup" src="images/jqcp.gif" style="cursor:pointer" alt="pick color" border="0"/>
<br />
Fill Next Closed Shape?:<input type="checkbox" id="mycb2" /> IF SO: USING ALPHA (0.0 - 1.0): <input type="text" size="3" id="tbalpha" value="1.0" />  
</p>

<script type="text/javascript">
$(document).ready(function() {
$("#color_picker").jqcp();
$("#color_value").jqcp_setObject();
$("#color_value").jqcp_setColor("#000000");
$("#product_color").val($("#color_value").val());
$("#jqcp_box").css("background",$("#color_value").val());

$("#jqcp_popup").click(function () {
$("#colorbox").jqpopup_open(this.id);
return false;
});

$("#pick_color").click(function () {
$("#product_color").val($("#color_value").val());
$("#jqcp_box").css("background",$("#color_value").val());
setTheColor($("#color_value").val());
$("#colorbox").jqpopup_close();
});
});
</script>
<br />
<input type="button" value="Click this button to Open a window to make your own shape THEN double-click on main canvas to copy that image AT THAT SPOT" onclick="openIt7();">
<input type="button" value="OPTIONAL: Load your uploaded theImage.png AT begin of SESSION" onclick="drawtheImage('A');" return false;" />

<br /> Image name (fill in BEFORE clicking optional button (above)): <input type="text" id="imageName" value="Your saved png name" />

<br /><br />Text to insert (via Shift Key AND Keydown at location desired (immediately followed by keyup))(<b>FireFox ONLY</b>): <input type="text" id="insertText" value="" />
<br />(<b>NOTES: When using shapes: Click a Button before the drawing of EACH SHAPE -- even when 2 of the same shapes are drawn in a row. Colors/Thickness is applied ONLY after it has been applied to a freestyle line or dot (1 click w/ no mousemove suffices). <br />
There is about 5px padding between the 700X600px canvas and the div (with a red border) -- do not try to draw within 5 px of the red border.</b>)
</center>
</div>
<div id="formDiv" style="position: absolute; width: 900px; height: 200px; z-index: 1; left: 0px; top: 1100px; border-style: solod; border-color: #000000">
<h2>UPLOAD FACILITY (uploads to the thisuploads folder w/i this subdomain): This facility should be used
ONLY at the end of a session, to save a canvas image you want to draw on some more IN ANOTHER SHARED DRAWING SESSION.</h2>
<form name="form2" enctype="multipart/form-data" action="ntemptrans.php" method="post">
Browse to [theNameYOUgaveIT].png image which you saved to your desktop by right-clicking the canvas and saving
its image THEN UPLOAD.<br>
<b>(Keep things to 560kb or less.)</b><br /><br />
<input type="file" size="30" name="myUpload"><br>

<input type="hidden" name="MAX_FILE_SIZE" value="560000" />
<input type="submit" value="CLICK here to UPLOAD FILE">

</form>
<p> </p>
<div>

</body>
</html>