Selesti-Bug-UI

by OwenMelbz

HTML

<div class="body">
    <div class="selesti-feedback-tab" title="click to leave feedback/submit a bug" data-state="closed">
        <img src="http://i49.tinypic.com/wb7vw9.png" />
    </div>
    <div class="selesti-feedback-menu">
        <h5>Selesti Bug Reporting</h5>
        <div class="selesti-feedback-menu-wrap">
            <div class="selesti-feedback-btn">Mark Area</div>
            <div class="selesti-feedback-btn">Comments</div>
            <div class="selesti-feedback-btn">View Bugs</div>
        </div>        
    </div>
</div>

CSS

body {
 background-image:url("http://i45.tinypic.com/sotxf7.png");   
}
.body { height:900px; width:100%}
.selesti-feedback-tab {
    position: fixed;
    top:20%;
    right:-1px;
    width:25px;
    height:25px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-right:none;
    cursor:pointer;
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
    z-index:99999;
    /* Test Class */
    right:100px;
}
.selesti-feedback-tab:hover {
    background-color: black;
}
.selesti-feedback-tab img {
    width:97%;
    height: auto;
    display:block;
    margin-top:2px;
}
.selesti-feedback-menu {
    width:100px;
    height:140px;
    position:fixed;
    right:-102px;
    top:20%;
    border:1px solid #999999;
    z-index:99998;
    font-family:arial;
    font-size:14px;
    color:#999999;
    background-color:#fff;
    /* Test Class */
    right:-1px;
}

.selesti-feedback-menu h5 {
    width:60px;
    height:30px;
    text-indent:-99999px;
    overflow:hidden;
    background-image:url("http://selesti.com/selesti-images/selesti-logo-21.png");
    background-size: 90px auto;
    background-position: -18px 4px;
    background-repeaT:no-repeat;
    margin-left:22px;
}
.selesti-feedback-menu-wrap {
 padding:5px;   
}
.selesti-feedback-btn {
    width:90%;
    margin:5px auto;
    background-color:#64B0EF;
    color:white;
    text-align:center;   
    padding:5px;
    cursor:pointer;
    border:1px solid white;
}
.selesti-feedback-btn:hover {
    border:1px solid #64B0EF;
    color:#64B0EF;
    background-color:white;
}
.selesti-feedback-overlay {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99996;
    background-color:rgba(255,255,255,0.4);
}
.selection-box {
    position:    absolute;
    background: red;
    border:     1px solid #000;
    z-index:99997;
  }

JavaScript

/* GUI Stuff */

$(function() {
    var pageID = document.location.pathname;
    var defaultMarkup = document.documentElement.innerHTML;
    
    $('.selesti-feedback-menu').attr('data-pageId', pageID);
    
    $('.selesti-feedback-tab').click(function() {
        var state = $(this).attr('data-state');

        if (state == "closed") {
            $(this).attr('data-state', 'open');
            $('.selesti-feedback-menu').animate({
                'right': '-1px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '100px'
            });
        }
        else {
            $(this).attr('data-state', 'closed');
            $('.selesti-feedback-menu').animate({
                'right': '-102px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '-1px'
            });
        }
    });
    
    $('.selesti-feedback-btn').live('click', function(){
       setupCanvas(); 
    });
    
    var setupCanvas = function(){
        var overlayMarkup = "<div class='selesti-feedback-overlay'></div>";
        var docHeight = $(document).outerHeight()
        var docWidth = $(document).outerWidth();
        
        $('body').append("<div class='selesti-feedback-overlay'></div>");
        $('.selesti-feedback-overlay').css({'width':docWidth, 'height':docHeight});
        initDraw();
        
    };
    
    var startDrawing = function(){
        
    };
    
});
/* Dragging Stff */

function initDraw(){
    var bugID = 1;
    var $container = $('.selesti-feedback-overlay');
    
    $('.ui-draggable').on('mousedown mousemove mouseup', function(e){
       alert('hi');
    });
    
    $container.on('mousedown', function(e) {
        e.stopPropagation();
        var whatclick = $(this);
        console.log(whatclick.attr('class'));
        var $selection = $('<div>').addClass('selection-box').attr('id', 'bugid-'+bugID);
        $('#bugid-'+bugID).append('hello');
        bugID++;
        var click_y =...