function ImageItemDraw(ctx, offset){
    var old_style = ctx.strokeStyle;
    var old_fill = ctx.fillStyle;

    if(this.loaded){

        var page = {
            width:$(window).width(),
            height:$(window).height()
        };

        var sc = scale[this.scale_index];
        var sc_x = Math.round(sc * this.size.x);
        var sc_y = Math.round(sc * this.size.y);


        // if(this.size.x > page.width*0.5) {
        //     this.size.x = page.width*0.5 ;
        // }
        //
        // if(this.size.y > page.height*0.5) {
        //     this.size.y = page.height*0.5;
        // }
        // if(this.scale_index == 3){
        //     console.log(sc_x + ", " + sc_y );
        //     console.log(this.size);
        // }

        if(this.highlight_dragbar === false){
            ctx.fillStyle = "#222222";
        }else{
            ctx.fillStyle = "#444444";
        }
        // Dragbar Top
        ctx.beginPath();
        var tb_width = this.size.x;
        ctx.fillRect(this.loc.x, this.loc.y - 20 - offset, tb_width , 20);
        ctx.stroke();
        ctx.closePath();

        ctx.font = "14px verdana";
        ctx.fillStyle = "#eeffee";
        ctx.fillText(this.filename, this.loc.x + 5 , this.loc.y -5 - offset, this.size.x);

        ctx.linewidth = 5;
        ctx.strokeStyle = "#222222";

        // Outline of image
        ctx.beginPath();
        ctx.moveTo(this.loc.x, this.loc.y - offset);
        ctx.lineTo(this.loc.x+sc_x, this.loc.y - offset);
        ctx.lineTo(this.loc.x+sc_x, this.loc.y+sc_y - offset);
        ctx.lineTo(this.loc.x,this.loc.y+sc_y - offset);
        ctx.lineTo(this.loc.x,this.loc.y - offset);
        ctx.stroke();
        ctx.closePath();




        // Image

        ctx.drawImage(this.img, this.loc.x, this.loc.y - offset, sc_x, sc_y);
        // var jpgURLat50PercentQuality = canvas.toDataURL("image/jpeg", 0.5);
        // Buttons on image
        // ctx.fillStyle = "#000000";
        // ctx.fillRect( this.loc.x + (sc_x - 100), this.loc.y+sc_y, 40,50 ) ;
        // ctx.strokeStyle = "#ffffff";
        // ctx.beginPath();
        // ctx.moveTo(this.loc.x + (sc_x - 100) + 10, this.loc.y+sc_y + 25);
        // ctx.lineTo(this.loc.x + (sc_x - 100) + 30, this.loc.y+sc_y + 25);
        // ctx.moveTo(this.loc.x + (sc_x - 100) + 20, this.loc.y+sc_y + 15);
        // ctx.lineTo(this.loc.x + (sc_x - 100) + 20, this.loc.y+sc_y + 35);
        // ctx.stroke();
        // ctx.closePath();

        // ctx.fillRect( this.loc.x + (sc_x - 50), this.loc.y+sc_y, 40,50 ) ;
        // // Draw the minus sign
        // ctx.beginPath();
        // ctx.moveTo(this.loc.x + (sc_x - 50) + 10, this.loc.y+sc_y + 25);
        // ctx.lineTo(this.loc.x + (sc_x - 50) + 30, this.loc.y+sc_y + 25);
        // ctx.stroke();
        // ctx.closePath();

        // Draw any assets that are attached to the image
        for(var i=0;!cursor.moving && i<this.assets.length;i++){
            var ass = this.assets[i];
            ass.draw(ctx, offset, this);
        }

        // Resize pips - bottom right hand corner
        ctx.strokeStyle = '#222222';
        ctx.beginPath();
        ctx.moveTo(this.loc.x + this.size.x - 20, this.loc.y + this.size.y - offset - 2);
        ctx.lineTo(this.loc.x + this.size.x - 2, this.loc.y + this.size.y - offset - 20);
        ctx.moveTo(this.loc.x + this.size.x - 15, this.loc.y + this.size.y - offset - 2);
        ctx.lineTo(this.loc.x + this.size.x - 2, this.loc.y + this.size.y - offset - 15);
        ctx.moveTo(this.loc.x + this.size.x - 10, this.loc.y + this.size.y - offset - 2);
        ctx.lineTo(this.loc.x + this.size.x - 2, this.loc.y + this.size.y - offset - 10);
        ctx.moveTo(this.loc.x + this.size.x - 5, this.loc.y + this.size.y - offset - 2);
        ctx.lineTo(this.loc.x + this.size.x - 2, this.loc.y + this.size.y - offset - 5);
        // ctx.moveTo(this.l)
        ctx.stroke();
        ctx.closePath();
    }

    ctx.strokeStyle = old_style;
    ctx.fillStyle = old_fill;
}