$(document).ready(
	function() {

        InitializeDrag()

	});

	function Initialize() {
	    $('#parentElem').show();
	    var obj = $("#" + insideParentClientID);
        if (ImageWidth > 0) {
            obj.css({ width: ImageWidth, top: ImageTop, left: ImageLeft });
        }
        else {
            //place images properly if it is first time
            var maxWidth = $("#parentElem").width(); // Max width for the image
            var maxHeight = $("#parentElem").height();    // Max height for the image
            var ratio = 0;
            var width = obj.width();    // Current image width
            var height = obj.height();  // Current image height
            ratio = width / height;
            if ((maxHeight * ratio) >= maxWidth) {
                obj.css({ width: maxWidth });
                var topPos = ($("#parentElem").height() - obj.height()) / 2;
                obj.css({ top: topPos })
                obj.css({ left: 0 })
                
            }
            if ((maxWidth / ratio) >= maxHeight) {
                obj.css({ height: maxHeight });
                var leftPos = ($("#parentElem").width() - obj.width()) / 2;
                obj.css({ left: leftPos });
                obj.css({ top: 0 });
            };
        }
        ClientUpdatePrice();
    }
	
	

	function InitializeDrag() {
	   $("#" + insideParentClientID).Draggable(
			{
			    zIndex: 1000,
			    ghosting: false,
			    opacity: 0.7,
			    containment: 'parent'
			});

	}

	function DownSize() 
	{
	    var img = $("#" + insideParentClientID);
	    var ratio = img.height() / img.width();
	    var mwidth = img.width() / 1.1;
	    var mheight = mwidth * ratio;

	    var maxHeight = $("#parentElem").height();
        var maxWidth = $("#parentElem").width();
        if ((mwidth * mheight) / (maxWidth * maxHeight) > 0.05) {
            img.css({ width: mwidth});
            ClientUpdatePrice();
        }
    }

    function UpSize() 
    {
        var canResize = false; 
        var img = $("#" + insideParentClientID);
        var ratio = img.height() / img.width();
        var mwidth = img.width() * 1.12;
        var mheight = mwidth * ratio;
        var maxHeight = $("#parentElem").height();
        var maxWidth = $("#parentElem").width();
        var toppos = parseInt(img.css("top").replace("px", ""));
        var leftpos = parseInt(img.css("left").replace("px", ""));
        var deltaX = parseInt((mwidth*1.1) - mwidth );
        var deltaY = parseInt( (mheight*1.1) - mheight );
        if (((toppos + mheight) < maxHeight) && ((leftpos + mwidth) < maxWidth)) 
        {
            img.css({ width: mwidth});
            ClientUpdatePrice();
        }
        else {
            if ((toppos + mheight) > maxHeight) {
                if (toppos > deltaY) {
                    img.css({ top: parseInt(toppos - deltaY) });
                    canResize = true;
                }
                else {
                    img.css({ top: 0, width: maxWidth });
                    ClientUpdatePrice();
                }
            }
            if ((leftpos + mwidth) > maxWidth) {
                if (leftpos > deltaX) {
                    img.css({ left: parseInt(leftpos - deltaX) });
                    canResize = true;
                }
                else {
                    img.css({ left: 0, width: maxWidth });
                    ClientUpdatePrice();
                }
            }
            if (canResize == true) {
                UpSize();
            }
        
        /////////
//            if ((toppos > deltaY) && ((toppos + mheight) > maxHeight)) {
//                img.css({ top: parseInt(toppos - deltaY) });
//                canResize = true;
//            }
//            else {
//                img.css({ top: 0})
//            }
//            if ((leftpos > deltaX) && ((leftpos + mwidth) > maxWidth)) {
//                img.css({ left: parseInt(leftpos - deltaX) });
//                canResize = true;

//            }
//            else {
//                
//            }
//            if (canResize == true)
//            {
//                UpSize();
//            }
        }
    }

    function resetVars() {
        var img = $("#" + insideParentClientID);
        img.css({ width: 0, height: 0, top: 0, left: 0 });
        return true;
    }


    function CollectData() {
        try {
            var img = $("#" + insideParentClientID);
            var toppos = parseInt(img.css("top").replace("px", ""));
            $get("hidTop").value = toppos;
            var leftpos = parseInt(img.css("left").replace("px", ""));
            $get("hidLeft").value = leftpos;
            $get("hidWidth").value = img.width();
            $get("hidHeight").value = img.height();
        }
        catch (e) { alert(e.message); }
        return true;
    }

    function ClientUpdatePrice() {
        var img = $("#" + insideParentClientID);
        var imgFile = $get(insideParentClientID).src;
        imgFile = imgFile.substring(imgFile.length - 11);
        var price = 0.0;
        if (imgFile != "nothumb.gif") {
            var currheight = img.height();
            var currwidth = img.width();
            var maxWidth = $("#parentElem").width(); // Max width for the image
            var maxHeight = $("#parentElem").height();    // Max height for the image
            price += minPrintPrice + maxPrintPrice * ((currheight * currwidth) / (maxHeight * maxWidth));
            $get("hidCurrentSidePrintPrice").value = price.toFixed(2);
        }
        price += priceWOCurrentPrint;
        $get(tbTotalPriceClientID).innerHTML = price.toFixed(2); 

    }