Raphael JS IE JQuery UI

Raphael JS demo for rectangle, arrow and moving rect objects.

by JQ Purfect

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<hr />
<button class="buttonA" id="sumi">Open Annotation</button>
<hr>
<button id="freeline">Freeline</button>
<button id="circle">Circle</button>
<button id="arrow">Arrow</button>
<button id="simpleText">Text</button>
<button id="clr">Clear</button>
<div class="pull-left webRTC" id="webRTC">
    <div class="paper" id="svg_paper" style="background: #000; height: 300;"></div>
    <video width="400" autoplay id="remoteVideo">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
</div>

CSS

.buttonA {
     padding: 5px;
     background: #d9344a;
     background-image: -webkit-linear-gradient(top, #d9344a, #b82b2b);
     background-image: -moz-linear-gradient(top, #d9344a, #b82b2b);
     background-image: -ms-linear-gradient(top, #d9344a, #b82b2b);
     background-image: -o-linear-gradient(top, #d9344a, #b82b2b);
     background-image: linear-gradient(to bottom, #d9344a, #b82b2b);
     font-family: Arial;
     color: #ffffff;
     font-size: 16px;
     padding: 5px;
     text-decoration: none;
 }
 .paper {
     margin: 5px auto;
     width: 500px;
     background:#000;
     height: 400px;
     position: absolute;
     border: outset 1px #000;
     cursor: crosshair;
     z-index: -1;
 }
 /** { */
 /* -webkit-border-radius: 0 !important;
    */
 /* -moz-border-radius: 0 !important;
    */
 /* border-radius: 0 !important;
    */
 /*
}
*/
 html {
     overflow: auto;
 }
 *:focus {
     outline: 0;
 }
 .preload {
     height: 454px;
     position: fixed;
     background: url('../images/ge-progress.png') right no-repeat #fff;
 }
 .preload img {
     width: 64px;
     height: 64px;
     float: right;
 }
 .preload h1 {
     padding-top: 10px;
 }
 .preload #progress {
     padding-top: 15%;
 }
 .expert {
     background: #fff;
     min-width: 1200px
 }
 #viewSnapshot {
     display: none;
 }
 .chat-area {
     margin-left: 10px;
 }
 .chat {
     background: #ebecee;
     border: solid 1px #e1e2e5;
     width: 305px;
     height: 420px;
     overflow-y: scroll;
     margin-right: 5pt;
     font-family:"Helvetica Neue";
 }
 ::-webkit-scrollbar {
     width: 7px;
 }
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     -webkit-border-radius: 10px;
     border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
     border-radius: 10px;
     background: rgba(155, 155, 155, 0.80);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
    ...

JavaScript

$("#sumi").click(function () {
    $(".paper").dialog();
});

var mouseDownX = 0;
var mouseDownY = 0;
var arrow;
var deviceW = 800;
var deviceH = 600;
var deviceW1024 = 1024;

var painter = {};
var shapes = [];
painter.brush = function () {};

var paper = Raphael("svg_paper", deviceW, deviceH);
var $paper = $("#svg_paper");

//--------------------------------------------------------
//--------------------------------------------------------
//Arrow click events
//--------------------------------------------------------
//--------------------------------------------------------

function findArrowCoordinates(x0, y0, x1, y1) {
    var arrowP1, arrowP2, arrowP3, arrowPath, d, fLength, ta, th, theta, vecLeft, vecLine;
    vecLine = [];
    vecLeft = [];
    vecLine[0] = x1 - x0;
    vecLine[1] = y1 - y0;
    vecLeft[0] = -vecLine[1];
    vecLeft[1] = vecLine[0];
    fLength = getDistance(x0, y0, x1, y1);
    d = 0.1 * fLength;
    th = d / (2.0 * fLength);
    theta = Math.PI * 30.0 / 180;
    ta = d / (2.0 * (Math.tan(theta) / 2.0) * fLength);
    arrowP1 = [];
    arrowP2 = [];
    arrowP3 = [];
    arrowP3[0] = x1 + (-ta * vecLine[0]);
    arrowP3[1] = y1 + (-ta * vecLine[1]);
    arrowP1[0] = arrowP3[0] + (th * vecLeft[0]);
    arrowP1[1] = arrowP3[1] + (th * vecLeft[1]);
    arrowP2[0] = arrowP3[0] + (-th * vecLeft[0]);
    arrowP2[1] = arrowP3[1] + (-th * vecLeft[1]);
    arrowPath = "M" + x0 + "," + y0 + "L" + x1 + "," + y1 + "L" + arrowP2[0] + "," + arrowP2[1] + "M" + x1 + "," + y1 + "L" + arrowP1[0] + "," + arrowP1[1];
    return arrowPath;
}

function getDistance(x0, y0, x1, y1) {
    var dx, dy;
    dx = Math.abs(x1 - x0);
    dy = Math.abs(y1 - y0);
    return Math.sqrt((dx * dx) + (dy * dy));
}

function DrawArrow(x, y) {
    var element = paper.path("M" + x + " " + y);
    element.attr({
        // stroke: Raphael.getColor(),
        stroke: "yellow",
            "stroke-width": 4,
            "arrow-end": "classic-medium-medium"
    });
    return...