Photoshop Create Shapes

by wrxsti85

HTML

<script src="http://diy-code.com/lightbox/jquery.lightbox_me.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<div id="canvas"></div>
<div id="toolContainer">
    <center>
        <img id="dragSelect" class="tool" src="http://diy-code.com/wsp/image/dragIcon.png" />
        <img id="createSelect" class="tool" src="http://diy-code.com/wsp/image/marqueeIcon.png" />
    </center>
</div>
<div id="layers">
    <div id="sortable"></div>
</div>
<div id="rightClickMenu">
    <p class="freeTransform">Free Transform</p>
    <p class="rclp">Layer Properties</p>
</div>

CSS

#canvas {
    width: 100%;
    height: 800px;
    background:#ccc;
    position: relative;
}
#marqueeTool {
    background-color: rgba(255, 255, 255, .5);
    border: dashed 1px #000;
    z-index: 999;
}
#layers {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 170px;
    height: 200px;
    border: solid 1px #898989;
    background: #f9f9f9;
    margin: 1px;
    overflow: scroll;
    overflow-x: hidden;
    z-index: 9999;
}
.layer {
    width: 98%;
    height: 50px;
    margin: 1px;
    border: solid 1px #898989;
    background: #D6D6D6;
}
.layer input {
    width: 142px;
    margin-left: 2px;
    margin-top: 2px;
}
.layerStyleIcon {
    background:url(http://diy-code.com/wsp/image/layerStyles.png);
    width: 22px;
    height: 16px;
    margin-top: 7px;
    margin-left: 3px;
    float: left;
}
.trashIcon {
    background:url(http://diy-code.com/wsp/image/trashicon.png);
    width: 22px;
    height: 16px;
    margin-top: 7px;
    margin-left: 3px;
    float: left;
    cursor: pointer;
}
.showLayerIcon {
    background:url(http://diy-code.com/wsp/image/showIcon.png);
    width: 14px;
    height: 14px;
    margin-top: 7px;
    margin-left: 3px;
    float: left;
    cursor: pointer;
}
.hideLayerIcon {
    background:url(http://diy-code.com/wsp/image/hideIcon.png);
    width: 14px;
    height: 14px;
    margin-top: 7px;
    margin-left: 3px;
    float: left;
}
.layerStylePanel {
    width: 500px;
    height: 450px;
    background: #fff;
    border: solid 1px #000;
}
.layerStyleIcon:hover {
    cursor: pointer;
}
.trashIcon:hover {
    cursor: pointer;
}
.layerTag {
    display: none;
    margin: 10px;
    background: #E5E5E5;
    color: black;
    width: 100px;
    border: solid 1px black;
    border-radius: 10px;
    opacity: 0.4;
    text-align: center;
}
.editable {
    border: solid 1px #898989;
    padding: 2px;
    margin: 2px;
    font: -webkit-small-control;
    height: 14px;
}
.saveEditable {
    float: right;
}
.layerStylePanel {
   ...

JavaScript

// CONVERTS RGB COLOR CODES TO HEXADECIMAL COLOR CODES
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
}

$(function () {
    // GLOBALS
    var layerNameCounter = 1;
    var rcIdentifier;
    var denyHeight;
    var denyWidth;

    // ELEMENT IDENTIFIER FOR RIGHT CLICKS
    $(document).on("mouseover", ".layerElement", function () {
        rcIdentifier = $(this).attr('id');
    });

    // RIGHT CLICK MENU
    $('#rightClickMenu').click(function () {
        $('#rightClickMenu').hide();
    });

    $('#canvas').click(function () {
        $('#rightClickMenu').hide();
    });


    $('#canvas').bind('contextmenu', function (e) {
        $('#rightClickMenu').css({
            top: e.pageY + 'px',
            left: e.pageX + 'px'
        }).show();

        return false;
    });

    // FREE TRANSFORM TOOL FUNCTION
    $('.freeTransform').click(function () {
        denyWidth = $('#' + rcIdentifier).width();
        denyHeight = $('#' + rcIdentifier).height();
        $('.ftGrabberS, .ftGrabberE').remove();
        $('#' + rcIdentifier).resizable();
        $('#' + rcIdentifier).resizable('enable');
        $('#' + rcIdentifier).append('<div class="confirmDeny"><img src="http://diy-code.com/wsp/images/confirm.png" class="confirm" /><img src="http://diy-code.com/wsp/images/deny.png" class="deny" /></div>');
        $('#' + rcIdentifier + ' .ui-resizable-s').append('<div class="ftGrabberS"></div>');
        $('#' + rcIdentifier + ' .ui-resizable-e').append('<div class="ftGrabberE"></div>');

    });

    // CONFIRM OR DENY FREE TRANSFORM TOOL
    $(document).on("click", ".confirm", function () {
        $('#' + rcIdentifier).resizable('disable');
        $('.confirmDeny').remove();
    });


    $(document).on("click", ".deny", function () {
        $('#' +...