$(function(){
// Movable-resizeable div properties
var mr_min_width = 75;
var mr_min_height = 75;
var mr_title_color = "white";
var mr_backdround_color = "black";
var mr_border_thick = 8;
var mr_caption_height = 30;
var mr_font_family = "Verdana, Helvetica, Arial, sans-serif";
var mr_font_size = "16px";
// Begin movable resizeable div construction
$(".movable_resizable").each(function(){
var mr = $(this);
var id = mr.attr("id");
var position = mr.css("position");
if(id && position == "absolute"|| position == "fixed")
{
// Initial properties of the movable-resizeable div.
var title = mr.attr("title");
mr.attr("title", "");
var width = mr.outerWidth();
var height = mr.outerHeight();
var top = parseInt(mr.css("top"));
var left = parseInt(mr.css("left"));
var name = mr.attr("name");
var display = mr.css("display");
var zIndex = mr.css("zIndex");
var minWidth = Math.max(parseInt(mr.css("minWidth")) || 0, mr_min_width);
var minHeight = Math.max(parseInt(mr.css("minHeight")) || 0, mr_min_height);
mr.css({ position:"absolute",
resize:"none", // prevents textarea fron independentt resize
margin:"0px",
top:mr_caption_height + "px",
left:mr_border_thick + "px",
display:"block",
zIndex:"auto",
minWidth:minWidth + "px",
minHeight:minHeight + "px",
// following prevents inheritance form wraper div mrw
color:mr.css("color"),
fontFamily:mr.css("fontFamily"),
fontSize:mr.css("fontSize"),
textAlign:mr.css("textAlign")
});
var bgc = mr.css("backgroundColor");
if(bgc == "transparent" || bgc == "rgba(0, 0, 0, 0)") mr.css("backgroundColor", "white");
// wrap mr in a div container
mrw = mr.wrap("
"+title+"
").parent();
mrw.css({position:position,
top:top - mr_caption_height + "px",
left:left - mr_border_thick + "px",
height:height + mr_caption_height + mr_border_thick + "px",
width:width + 2 * mr_border_thick + "px",
display:display,
backgroundColor:mr_backdround_color,
color:mr_title_color,
fontFamily:mr_font_family,
fontSize:mr_caption_height - 10 + "px",
textAlign:"center",
overflow:"hidden",
zIndex:zIndex
});
// double click to bring window ontop
mrw.bind("dblclick", function(e){
var mr = $(".movable_resizable");
if(mr.length > 1)
{
var me = $(this);
var id = me.children(".movable_resizable").attr("id");
var i = +me.css("zIndex");
if(isNaN(i)) i = 0;
mr.each(function(){
if($(this).attr("id") != id)
{
var j = +$(this).parent().css("zIndex");
if(!isNaN(j) && i <= j)
{
i = j + 1;
}
}
})
me.css("zIndex", i);
}
});
// show proper cursor
mrw.bind("mousemove", function(e){
var mrw = $(this);
var w = mrw.outerWidth();
var h = mrw.outerHeight();
var x = e.clientX - mrw.offset().left + $(document).scrollLeft();
var y = e.clientY - mrw.offset().top + $(document).scrollTop();
var cur = "default";
if(y < mr_caption_height)
{
cur = "move"
}
else if(y > h - mr_border_thick)
{
cur = x < w - mr_border_thick ? "s-resize" : "se-resize";
}
else if(x > w - mr_border_thick)
{
cur = "e-resize"
}
mrw.css("cursor", cur);
});
// The upper-right-corner red X closes the movable-resizeable div.
mrx = $("X
").insertBefore(mr);
mrx.css({position:"absolute",
top:"0px",
right:"0px",
width: mr_caption_height - 8 + "px",
height:mr_caption_height - 8 + "px",
border:"4px solid " + mr_backdround_color,
backgroundColor:"red",
color:"white",
fontWeight:"bold",
fontFamily:mr_font_family,
fontSize:mr_caption_height - 14 + "px",
textAlign:"center",
cursor:"default",
zIndex:zIndex
});
// hide click red X in URC of window
mrx.mousedown(function(){
var mrw = $(this).parent();
var mr = mrw.children(".movable_resizable");
mr.data("st", mr.scrollTop())
.data("sl", mr.scrollLeft());
mrw.css("display", "none")
var name = mr.attr("name");
$("[name='"+name+"']").each(function(){
if($(this).attr("type") === "checkbox")
{
$(this).attr("checked", false);
}
});
return false; // don't bubble to parent
});
// Buttons, checkboxes, images or Links with the same name as the movable-resizable div or textarea toggle the display state preserving the vert & horiz scroll positions.
$("[name='"+name+"']").each(function(){
if($(this).attr("id") != id)
{
if($(this).attr("type") === "checkbox") $(this).attr("checked", true);
$(this).click(function(){
var mr = $("#"+id);
var mrw = mr.parent();
if($(this).attr("type") === "checkbox" && $(this).attr("checked") || mrw.css("display") === "none")
{
mrw.css("display", "block");
mr.scrollTop(mr.data("st"))
.scrollLeft(mr.data("sl"));
}
else
{
mr.data("st", mr.scrollTop())
.data("sl", mr.scrollLeft());
mrw.css("display", "none");
}
});
}
});
mr.parent().bind("mousedown", resize);
}
else
{
console.log("The div id=\""+id+" must have a valid \"id\" and a CSS position of \"absolute\" or \"fixed\" to be a \"movable-resizable \".");
}
});
var hit = {};
function resize(e)
{
switch (e.type)
{
case "mousedown":
var cur = $(this).css("cursor");
console.log($(this).children(".movable_resizable").css("cursor"));
if(cur === "e-resize" || cur === "se-resize" || cur === "s-resize" || cur === "move")
{
var mrw = $(this);
var mr = mrw.children(".movable_resizable");
hit = {dfltCur:$("body").css("cursor"), cur:cur, mr:mr, mrw:mrw, x:e.clientX, left:mrw.offset().left, y:e.clientY, top:mrw.offset().top, w:mrw.width(), h:mrw.height(), ww:mr.width(), hh:mr.height()};
$("body").css("cursor", cur);
$(document).bind("mousemove mouseup", resize);
return false;
}
break;
case "mouseup":
$(document).unbind("mousemove mouseup", resize);
$("body").css("cursor", hit.dfltCur);
hit = {};
break;
case "mousemove":
var mrw = hit.mrw;
if(hit.cur == "move")
{
var left = hit.left + e.clientX - hit.x
var top = hit.top + e.clientY - hit.y
if(mrw.css("position") === "fixed")
{
left -= $(document).scrollLeft();
top -= $(document).scrollTop();
}
mrw.css({left:left + "px", top:top + "px"});
}
else
{
var mr = hit.mr;
if(hit.cur === "e-resize" || hit.cur === "se-resize")
{
var newW = hit.ww + e.clientX - hit.x;
if(newW > parseInt(mr.css("minWidth")))
{
if(mr.css("maxWidth") === "none" || newW < parseInt(mr.css("maxWidth")))
{
mrw.width(hit.w + e.clientX - hit.x);
mr.width(newW);
}
}
}
if(hit.cur === "s-resize" || hit.cur === "se-resize")
{
var newH = hit.hh + e.clientY - hit.y;
if(newH > parseInt(mr.css("minHeight")))
{
if(mr.css("maxHeight") === "none" || newH < parseInt(mr.css("maxHeight")))
{
mrw.height(hit.h + e.clientY - hit.y);
mr.height(newH);
}
}
}
}
break;
}
} // End movable resizeable div construction
// restore text to textarea windows
$("textarea.movable_resizable").each(function(){
// get window title
var mr = $(this);
var mrw = mr.parent();
var html = mrw.html();
var n = html.toLowerCase().indexOf("
0) // title used like filename
{
// get data from disk
var title = html.slice(0, n);
var data = window.localStorage.getItem(title);
// parse packed data
var i = data.indexOf("text");
var text = data.slice(i + ("text").length);
data = data.slice(0, i);
data = data.split(',');
// if no text, fall back to factory specs
if(text && text.length > 0)
{
mr.attr("value", text);
mrw.css({zIndex:data[0], left:data[1] + "px", top:data[2] + "px"});
var dx = mrw.width() - mr.width();
var dy = mrw.height() - mr.height();
mr.width(data[3]);
mr.height(data[4]);
mrw.width(+data[3] + dx);
mrw.height(+data[4] + dy);
mr.scrollLeft(data[5]);
mr.scrollTop(data[6]);
}
}
});
// save all textarea text on exit
$(window).bind("unload", function(){
$("textarea.movable_resizable").each(function(){
var mr = $(this);
var mrw = $(this).parent();
var html = mrw.html();
var n = html.toLowerCase().indexOf("
0)
{
if(mrw.css("display") === "none")
{
mrw.css("display", "block");
mr.scrollTop(mr.data("st"))
.scrollLeft(mr.data("sl"));
}
var title = html.slice(0, n);
var z = mrw.css("zIndex");
var left = mrw.offset().left
var top = mrw.offset().top
var w = mr.width();
var h = mr.height();
var sl = mr.scrollLeft();
var st = mr.scrollTop();
var text = mr.attr("value");
if(mrw.css("position") === "fixed")
{
left -= $(document).scrollLeft();
top -= $(document).scrollTop();
}
// serialize data in a string
var data = z+','+left+','+top+','+w+','+h+','+sl+','+st+"text"+text;
// save to disk
window.localStorage.setItem(title, data);
}
});
});
});