var thumbnailMakerTray = null;

var ThumbnailMakerTray = Class.create();
Object.extend(ThumbnailMakerTray.prototype, {
    initialize:function(id, src) {
        this.options = Object.extend({
            TM_thumbnailSize:100,
            shapeImageFolder:'widgets/thumbnailMaker/images/'
        }, arguments[1] || {});
        thumbnailMakerTray = this;
        this.id=id;
        this.TM_thumbnailShape = 0;
        this.TM_thumbnailSize = 0;
        this.imageToBeCropped = new Image();
        this.imageToBeCropped.src = src;
        this.isWebKit = /Konqueror|Safari|KHTML/.test(navigator.userAgent);
        this.isIE = /MSIE/.test(navigator.userAgent);
        this.isOpera8 = /Opera\s[1-8]/.test(navigator.userAgent);

        this.savedThumbnailImage = new Image();

        var TM_Content = "";
        TM_Content = '<div style="overflow:hidden;width:540px;height:380px;position:relative;"><table id="thumbnailContainer" cellpadding="0" cellspacing="0">';
        TM_Content += '<tr valign="top">';
        TM_Content += '<td id="TM_ImgContainer" width="342" height="342">';
        TM_Content += '<img id="imageToCrop" src="' + this.imageToBeCropped.src + '" selectable="false" alt="image to be cropped" style="z-Index:0;position:absolute;visibility:hidden;">';
        TM_Content += '<div id="TM_SectionSelector">';
        TM_Content += '<div id="TM_ThumbnailSection" style="position:absolute;width:100px;height:100px;top:120px;left:120px;"><img id="imgshape" class="TM_BlankSection" src="' + this.options.shapeImageFolder + 'blank.gif" alt="" selectable="false"/></div>';
        TM_Content += '<div id="TM_PseudoSectionTop" class="TM_PseudoSection"></div>';
        TM_Content += '<div id="TM_PseudoSectionLeft" class="TM_PseudoSection"></div>';
        TM_Content += '<div id="TM_PseudoSectionRight" class="TM_PseudoSection"></div>';
        TM_Content += '<div id="TM_PseudoSectionBottom" class="TM_PseudoSection"></div>';
        TM_Content += '<div id="TM_TLCorner" class="TM_SectionCorner" style="visibility:hidden;z-index:2;"></div> <span id="TM_leftDragSection" class="TM_HiddenCorner"> </span>';
        TM_Content += '<div id="TM_TRCorner" class="TM_SectionCorner" style="visibility:hidden;z-index:2;"></div>';
        TM_Content += '<div id="TM_BLCorner" class="TM_SectionCorner" style="visibility:hidden;z-index:2;"></div>';
        TM_Content += '<div id="TM_BRCorner" class="TM_SectionCorner" style="visibility:hidden;z-index:2;"></div> <span id="TM_RightDragSection" class="TM_HiddenCorner"> </span>';
        TM_Content += '</div>';
        TM_Content += '</td><td width="50">&nbsp;</td>';
        TM_Content += '<td align="center"><table><tr><td height="140" colspan="2"><div id="TM_created_thumbnail"></div></td></tr>';
        TM_Content += '<tr valign="center"><td><input id="TM_100100" name="TM_5050" class="field radio" type="radio" value="100 x 100" checked="checked" onclick="javascript:thumbnailMakerTray.setsize(100);" /></td><td align="left" class="formfieldName resizableText">100 x 100</td></tr>';
        TM_Content += '<tr valign="center"><td><input id="TM_7575" name="TM_5050" class="field radio" type="radio" value="75 x 75" onclick="javascript:thumbnailMakerTray.setsize(75);"/></td><td align="left" class="formfieldName resizableText">75 x 75</td></tr>';
        TM_Content += '<tr valign="center"><td><input id="TM_5050" name="TM_5050" class="field radio" type="radio" value="50 x 50" onclick="javascript:thumbnailMakerTray.setsize(50);"/></td><td align="left" class="formfieldName resizableText">50 x 50</td></tr>';
        TM_Content += '<tr valign="center"><td><input id="TM_3232" name="TM_5050" class="field radio" type="radio" value="32 x 32" onclick="javascript:thumbnailMakerTray.setsize(32);"/></td><td align="left" class="formfieldName resizableText">32 x 32</td></tr>';
        TM_Content += '<tr><td colspan="2" align="center"><input  type="button" class="dekoh_button resizableText" value="preview" name="PreviewThumbnailButton" style="width:55px;">';
        TM_Content += '&nbsp;<input type="button" class="dekoh_button resizableText" value="save" name="createThumbnailButton" style="width:55px;"></td></tr>';
        TM_Content += '</table>';
        TM_Content += '</td>';
        TM_Content += '</tr>';
        TM_Content += '</table></div>';


        var TM_message = "Create thumbnail with the cropping tool ";
        var TM_toolbar = '<div style="float:left;position:relative;width:auto;"><span style="float:left;">Select Shape</span>';
        TM_toolbar += '<span class="TM_ThumbSquareButton TM_ThumbnailButton" id="TM_square" title="Square Shape" onclick="javascript:thumbnailMakerTray.setShape(1);"></span>';
        TM_toolbar += '<span class="TM_ThumbHRectButton TM_ThumbnailButton" id="TM_rectW" title="Wide Rectangular Shape" onclick="javascript:thumbnailMakerTray.setShape(2);"></span>';
        TM_toolbar += '<span class="TM_ThumbVRectButton TM_ThumbnailButton" id="TM_rectL" title="Long Rectangular Shape" onclick="javascript:thumbnailMakerTray.setShape(3);"></span>';
        TM_toolbar += '<span class="TM_ThumbCircleButton TM_ThumbnailButton" id="TM_circle" title="Circular Shape" onclick="javascript:thumbnailMakerTray.setShape(4);"></span>';
        TM_toolbar += '<span class="TM_ThumbStarButton TM_ThumbnailButton" id="TM_star" title="Star Shape"  onclick="javascript:thumbnailMakerTray.setShape(5);"></span>';
        TM_toolbar += '</div>';
        this.dialogId = "thumbnailmaker";
        this.othumbnailMakerDialog = new dekohDialog(this.dialogId, {className:'dekoh',title:"Thumbnail Maker",height:480,width:580,minHeight:480,minWidth:580,content:TM_Content,topMessage:TM_message,toolBarContent:TM_toolbar,resizable:false});

        $('TM_created_thumbnail').innerHTML = "";
        this.TM_thumbnailShape = 1;
        this.TM_thumbnailSize = 100;
        this.imageToBeCropped.name = $('imageToCrop').name;
        //Fix for Firefox Konqueror|Safari|KHTML
        if (this.imageToBeCropped.complete || this.isWebKit) {
            Event.observe($('imageToCrop'), 'load', function() {
                thumbnailMakerTray.checkImageLoad();
            });
        } else {
            //Fix for IE
            thumbnailMakerTray.checkImageLoad();
        }


        this.oButtons = $$(".TM_ThumbnailButton");
        Element.removeClassName(this.oButtons[0], 'TM_ThumbnailButton');
        Element.addClassName(this.oButtons[0], 'TM_ThumbnailSelButton');
        this.oButtonSelected = $$(".TM_ThumbnailSelButton")[0];
        for (var i = 0; i < this.oButtons.length; i++) {
            var eleObj = this.oButtons[i];

            eleObj.onmouseover = function(e) {
                if (this.id != thumbnailMakerTray.oButtonSelected.id) {
                    Element.removeClassName(this, 'TM_ThumbnailButton');
                    Element.addClassName(this, 'TM_ThumbnailSelButton');
                }
            }
            eleObj.onmouseout = function(e) {
                if (this.id != thumbnailMakerTray.oButtonSelected.id) {
                    Element.removeClassName(this, 'TM_ThumbnailSelButton');
                    Element.addClassName(this, 'TM_ThumbnailButton');
                }

            }
            eleObj.onclick = function(e) {
                Element.removeClassName(thumbnailMakerTray.oButtonSelected, 'TM_ThumbnailSelButton');
                Element.addClassName(thumbnailMakerTray.oButtonSelected, 'TM_ThumbnailButton');
                Element.addClassName(this, 'TM_ThumbnailSelButton');

                if (this.id == "TM_square") {
                    thumbnailMakerTray.setShape(1);
                }
                if (this.id == "TM_rectW") {
                    thumbnailMakerTray.setShape(2);
                }
                if (this.id == "TM_rectL") {
                    thumbnailMakerTray.setShape(3);
                }
                if (this.id == "TM_circle") {
                    thumbnailMakerTray.setShape(4);
                    thumbnailMakerTray.readjustSection();
                    thumbnailMakerTray.trackThumbnail();
                }
                if (this.id == "TM_star") {
                    thumbnailMakerTray.setShape(5);
                    thumbnailMakerTray.readjustSection();
                    thumbnailMakerTray.trackThumbnail();
                }
                if (this.id == "TM_rectF") {
                    thumbnailMakerTray.setShape(0);
                }
                thumbnailMakerTray.oButtonSelected = this;
            }
        }
        //setting the button action
        document.getElementsByName('createThumbnailButton')[0].onclick = function(e) {
            thumbnailMakerTray.loadThumbNail(getThumbnailImage(parseInt($('TM_ThumbnailSection').style.left), parseInt($('TM_ThumbnailSection').style.top),
                    parseInt($('TM_ThumbnailSection').style.width), parseInt($('TM_ThumbnailSection').style.height),
                    thumbnailMakerTray.TM_thumbnailSize, thumbnailMakerTray.TM_thumbnailShape));
            saveThumbnail();
        };
        document.getElementsByName("PreviewThumbnailButton")[0].onclick = function(e) {
            thumbnailMakerTray.loadThumbNail(getThumbnailImage(parseInt($('TM_ThumbnailSection').style.left), parseInt($('TM_ThumbnailSection').style.top),
                    parseInt($('TM_ThumbnailSection').style.width), parseInt($('TM_ThumbnailSection').style.height),
                    thumbnailMakerTray.TM_thumbnailSize, thumbnailMakerTray.TM_thumbnailShape));
        }
    },
/*image load check*/
    checkImageLoad:function() {
        if ($('imageToCrop').height != 0) {
            $('imageToCrop').style.visibility = "visible";
            thumbnailMakerTray.initImages();
        } else {
            setTimeout(thumbnailMakerTray.checkImageLoad, 200);
        }
    },
/*init all the functions*/
    initImages:function() {
        $('TM_ImgContainer').style.paddingLeft = $('TM_ImgContainer').style.paddingRight = Math.round((342 - (parseInt($('imageToCrop').width))) / 2) + 'px';
        $('TM_ImgContainer').style.paddingTop = $('TM_ImgContainer').style.paddingBottom = Math.round((342 - (parseInt($('imageToCrop').height))) / 2) + 'px';
        $('TM_ThumbnailSection').style.position = 'absolute';
        var thumbnailSize = 0;
        if (parseInt($('imageToCrop').width) >= parseInt($('imageToCrop').height)) {
            thumbnailSize = parseInt($('imageToCrop').height);
        } else {
            thumbnailSize = parseInt($('imageToCrop').width);
        }
        $('TM_ThumbnailSection').style.left = (parseInt($('imageToCrop').width) - thumbnailSize) / 2 + 'px';
        $('TM_ThumbnailSection').style.top = (parseInt($('imageToCrop').height) - thumbnailSize) / 2 + 'px';
        $('TM_ThumbnailSection').style.width = thumbnailSize - 2 + 'px';
        $('TM_ThumbnailSection').style.height = thumbnailSize - 2 + 'px';

        thumbnailMakerTray.initCropper();
        thumbnailMakerTray.resetThumbnailCorners();
        thumbnailMakerTray.readjustPseudoSections();

        thumbnailMakerTray.loadThumbNail(getThumbnailImage(parseInt($('TM_ThumbnailSection').style.left), parseInt($('TM_ThumbnailSection').style.top),
                parseInt($('TM_ThumbnailSection').style.width), parseInt($('TM_ThumbnailSection').style.height),
                thumbnailMakerTray.TM_thumbnailSize, thumbnailMakerTray.TM_thumbnailShape));


        var secHandle = new Draggable('TM_ThumbnailSection', {revert:false, snap: function(x, y)
        {
            // set bounds
            var xMin = 0;
            var xMax = Math.round(parseInt($('imageToCrop').width) - $('TM_ThumbnailSection').offsetWidth);
            var yMin = 0;
            var yMax = Math.round(parseInt($('imageToCrop').height) - $('TM_ThumbnailSection').offsetHeight);

            // constrain within bounds
            x = x < xMin ? xMin : x;
            x = x > xMax ? xMax : x;
            y = y < yMin ? yMin : y;
            y = y > yMax ? yMax : y;

            // set snap increment
            var xSnap = 1;
            var ySnap = 1;

            // constrain to snap increment
            xNow = Math.floor(x / xSnap) * xSnap;
            yNow = Math.floor(y / ySnap) * ySnap;

            /* call any other functions here */

            // return calculated position
            return [xNow,yNow];
        }, onDrag: thumbnailMakerTray.trackThumbnail, onEnd: thumbnailMakerTray.trackThumbnail});

        var tlHandle = new Draggable('TM_TLCorner', {revert:false, onDrag: thumbnailMakerTray.trackTLCorner, onEnd: thumbnailMakerTray.trackThumbnail});
        var brHandle = new Draggable('TM_BRCorner', {revert:false, onDrag: thumbnailMakerTray.trackBRCorner, onEnd: thumbnailMakerTray.trackThumbnail});
        var trHandle = new Draggable('TM_TRCorner', {revert:false, onDrag: thumbnailMakerTray.trackTRCorner, onEnd: thumbnailMakerTray.trackThumbnail});
        var blHandle = new Draggable('TM_BLCorner', {revert:false, onDrag: thumbnailMakerTray.trackBLCorner, onEnd: thumbnailMakerTray.trackThumbnail});


    },
/*close dialog*/
    closeThumbnailDialog:function() {
        closeDialog(this.dialogId);
    },
/* initialize cropper window */
    initCropper:function() {

        $('TM_TLCorner').style.visibility = "visible";
        $('TM_BRCorner').style.visibility = "visible";
        $('TM_TRCorner').style.visibility = "visible";
        $('TM_BLCorner').style.visibility = "visible";
    },
/* track movement of bottom right TM_ThumbnailSection holder */
    trackBRCorner:function() {
        var brTop = parseInt($('TM_BRCorner').offsetTop);
        var tlTop = parseInt($('TM_TLCorner').offsetTop);
        var brLeft = parseInt($('TM_BRCorner').offsetLeft);
        var tlLeft = parseInt($('TM_TLCorner').offsetLeft);
        var brWidth = parseInt($('TM_BRCorner').offsetWidth);
        var brHeight = parseInt($('TM_BRCorner').offsetHeight);
        var tlWidth = parseInt($('TM_TLCorner').offsetWidth);
        var tlHeight = parseInt($('TM_TLCorner').offsetHeight);
        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var dy;
        var dx;
        var temp;

        if (((brTop + brHeight) < imgHeight ) && (brTop > 0)) {
            if ((brTop + brHeight) > tlTop) {
                dy = brTop + brHeight - tlTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.top = tlTop + 'px';
            }
            else {
                dy = (tlTop + tlHeight) - brTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (tlTop + tlHeight) - parseInt($('TM_ThumbnailSection').offsetHeight);
                $('TM_ThumbnailSection').style.top = temp + 'px';
            }
        }

        if (((brLeft + brWidth) < imgWidth ) && (brLeft > 0)) {
            if ((brLeft + brWidth) > tlLeft) {
                dx = (brLeft + brWidth) - tlLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.left = tlLeft + 'px';
            }
            else {
                dx = (tlLeft + tlWidth) - brLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (tlLeft + tlWidth) - parseInt($('TM_ThumbnailSection').offsetWidth);
                $('TM_ThumbnailSection').style.left = temp + 'px';
            }
        }

        $('TM_BLCorner').style.left = $('TM_ThumbnailSection').style.left;
        $('TM_BLCorner').style.top = parseInt($('TM_ThumbnailSection').offsetHeight) + parseInt($('TM_ThumbnailSection').offsetTop) - brHeight + 'px';
        $('TM_TRCorner').style.left = parseInt($('TM_ThumbnailSection').offsetWidth) + parseInt($('TM_ThumbnailSection').offsetLeft) - brWidth + 'px';
        $('TM_TRCorner').style.top = $('TM_ThumbnailSection').style.top;

        $('TM_RightDragSection').style.left = $('TM_TRCorner').style.left;
        $('TM_RightDragSection').style.top = $('TM_BLCorner').style.top;

        $('TM_RightDragSection').style.display = "block";
        $('TM_BRCorner').style.background = "none";
        thumbnailMakerTray.readjustPseudoSections();
    },

/* track movement of bottom right TM_ThumbnailSection holder */
    trackTLCorner:function() {
        var brTop = parseInt($('TM_BRCorner').offsetTop);
        var tlTop = parseInt($('TM_TLCorner').offsetTop);
        var brLeft = parseInt($('TM_BRCorner').offsetLeft);
        var tlLeft = parseInt($('TM_TLCorner').offsetLeft);
        var brWidth = parseInt($('TM_BRCorner').offsetWidth);
        var brHeight = parseInt($('TM_BRCorner').offsetHeight);
        var tlWidth = parseInt($('TM_TLCorner').offsetWidth);
        var tlHeight = parseInt($('TM_TLCorner').offsetHeight);
        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var dy;
        var dx;
        var temp;

        if (((tlTop + tlHeight) < imgHeight ) && (tlTop > 0)) {
            if ((brTop + brHeight) > tlTop) {
                dy = brTop + brHeight - tlTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (brTop + brHeight) - parseInt($('TM_ThumbnailSection').offsetHeight);
                $('TM_ThumbnailSection').style.top = temp + 'px';
            }
            else {
                dy = (tlTop + tlHeight) - brTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.top = brTop + 'px';
            }
        }

        if (((tlLeft + tlWidth) < imgWidth ) && (tlLeft > 0)) {
            if ((brLeft + brWidth) > tlLeft) {
                dx = (brLeft + brWidth) - tlLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (brLeft + brWidth) - parseInt($('TM_ThumbnailSection').offsetWidth);
                $('TM_ThumbnailSection').style.left = temp + 'px';
            }
            else {
                dx = (tlLeft + tlWidth) - brLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.left = brLeft + 'px';
            }
        }

        $('TM_BLCorner').style.left = $('TM_ThumbnailSection').style.left;
        $('TM_BLCorner').style.top = parseInt($('TM_ThumbnailSection').offsetHeight) + parseInt($('TM_ThumbnailSection').offsetTop) - brHeight + 'px';
        $('TM_TRCorner').style.left = parseInt($('TM_ThumbnailSection').offsetWidth) + parseInt($('TM_ThumbnailSection').offsetLeft) - brWidth + 'px';
        $('TM_TRCorner').style.top = $('TM_ThumbnailSection').style.top;

        $('TM_leftDragSection').style.left = $('TM_BLCorner').style.left;
        $('TM_leftDragSection').style.top = $('TM_TRCorner').style.top;
        $('TM_leftDragSection').style.display = 'block';
        $('TM_TLCorner').style.background = 'none';
        thumbnailMakerTray.readjustPseudoSections();

    },
/* track movement of bottom right TM_ThumbnailSection holder */
    trackBLCorner:function() {
        var blTop = parseInt($('TM_BLCorner').offsetTop);
        var trTop = parseInt($('TM_TRCorner').offsetTop);
        var blLeft = parseInt($('TM_BLCorner').offsetLeft);
        var trLeft = parseInt($('TM_TRCorner').offsetLeft);
        var blWidth = parseInt($('TM_BLCorner').offsetWidth);
        var blHeight = parseInt($('TM_BLCorner').offsetHeight);
        var trWidth = parseInt($('TM_TRCorner').offsetWidth);
        var trHeight = parseInt($('TM_TRCorner').offsetHeight);
        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var dy;
        var dx;
        var temp;

        if (((blTop + blHeight) < imgHeight ) && (blTop > 0)) {
            if ((blTop + blHeight) > trTop) {
                dy = blTop + blHeight - trTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.top = trTop + 'px';
            }
            else {
                dy = (trTop + trHeight) - blTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (trTop + trHeight) - parseInt($('TM_ThumbnailSection').offsetHeight);
                $('TM_ThumbnailSection').style.top = temp + 'px';
            }
        }
        if (((blLeft + blWidth) < imgWidth ) && (blLeft > 0)) {
            if ((blLeft + blWidth) > trLeft) {
                dx = (blLeft + blWidth) - trLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.left = trLeft + 'px';

            }
            else {
                dx = (trLeft + trWidth) - blLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (trLeft + trWidth) - parseInt($('TM_ThumbnailSection').offsetWidth);
                $('TM_ThumbnailSection').style.left = temp + 'px';
            }
        }

        $('TM_BRCorner').style.left = parseInt($('TM_ThumbnailSection').offsetWidth) + parseInt($('TM_ThumbnailSection').offsetLeft) - blWidth + 'px';
        $('TM_BRCorner').style.top = parseInt($('TM_ThumbnailSection').offsetHeight) + parseInt($('TM_ThumbnailSection').offsetTop) - blHeight + 'px';
        $('TM_TLCorner').style.left = parseInt($('TM_ThumbnailSection').offsetLeft) + 'px';
        $('TM_TLCorner').style.top = parseInt($('TM_ThumbnailSection').offsetTop) + 'px';


        $('TM_leftDragSection').style.left = $('TM_TLCorner').style.left;
        $('TM_leftDragSection').style.top = $('TM_BRCorner').style.top;
        $('TM_leftDragSection').style.display = 'block';
        $('TM_BLCorner').style.background = 'none';
        thumbnailMakerTray.readjustPseudoSections();
    },

/* track movement of bottom right TM_ThumbnailSection holder */
    trackTRCorner:function() {
        var blTop = parseInt($('TM_BLCorner').offsetTop);
        var trTop = parseInt($('TM_TRCorner').offsetTop);
        var blLeft = parseInt($('TM_BLCorner').offsetLeft);
        var trLeft = parseInt($('TM_TRCorner').offsetLeft);
        var blWidth = parseInt($('TM_BLCorner').offsetWidth);
        var blHeight = parseInt($('TM_BLCorner').offsetHeight);
        var trWidth = parseInt($('TM_TRCorner').offsetWidth);
        var trHeight = parseInt($('TM_TRCorner').offsetHeight);
        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var dy;
        var dx;
        var temp;

        if (((trTop + trHeight) < imgHeight ) && (trTop > 0)) {
            if ((blTop + blHeight) > trTop) {
                dy = blTop + blHeight - trTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (blTop + blHeight) - parseInt($('TM_ThumbnailSection').offsetHeight);
                $('TM_ThumbnailSection').style.top = temp + 'px';
            }
            else {
                dy = (trTop + trHeight) - blTop;
                $('TM_ThumbnailSection').style.height = dy + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.top = blTop + 'px';
            }
        }
        if (((trLeft + trWidth) < imgWidth ) && (trLeft > 0)) {
            if ((blLeft + blWidth) > trLeft) {
                dx = (blLeft + blWidth) - trLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                temp = (blLeft + blWidth) - parseInt($('TM_ThumbnailSection').offsetWidth);
                $('TM_ThumbnailSection').style.left = temp + 'px';
            }
            else {
                dx = (trLeft + trWidth) - blLeft;
                $('TM_ThumbnailSection').style.width = dx + 'px';
                thumbnailMakerTray.readjustSection();
                thumbnailMakerTray.resetThumbnailBox();
                $('TM_ThumbnailSection').style.left = blLeft + 'px';
            }
        }

        $('TM_BRCorner').style.left = parseInt($('TM_ThumbnailSection').offsetWidth) + parseInt($('TM_ThumbnailSection').offsetLeft) - blWidth + 'px';
        $('TM_BRCorner').style.top = parseInt($('TM_ThumbnailSection').offsetHeight) + parseInt($('TM_ThumbnailSection').offsetTop) - blHeight + 'px';
        $('TM_TLCorner').style.left = parseInt($('TM_ThumbnailSection').offsetLeft) + 'px';
        $('TM_TLCorner').style.top = parseInt($('TM_ThumbnailSection').offsetTop) + 'px';

        $('TM_RightDragSection').style.left = $('TM_BRCorner').style.left;
        $('TM_RightDragSection').style.top = $('TM_TLCorner').style.top;

        $('TM_RightDragSection').style.display = "block";
        $('TM_TRCorner').style.background = "none";
        $('TM_TRCorner').style.background = "none";
        thumbnailMakerTray.readjustPseudoSections();
    },

/* track movement of TM_ThumbnailSection */
    trackThumbnail:function() {
        $('TM_RightDragSection').style.display = "none";
        $('TM_leftDragSection').style.display = "none";
        $('TM_TRCorner').style.background = "red";
        $("TM_BRCorner").style.background = "red";
        $("TM_TRCorner").style.background = "red";
        $('TM_TLCorner').style.background = 'red';
        $('TM_BLCorner').style.background = 'red';
        thumbnailMakerTray.resetThumbnailBox();
        thumbnailMakerTray.resetThumbnailCorners();
    },

/* aligns TM_ThumbnailSection corner holders to TM_ThumbnailSection*/
    resetThumbnailCorners:function () {
        var top = 0;
        var left = 0;
        var thumbnailSection = document.getElementById('TM_ThumbnailSection');
        top = parseInt(thumbnailSection.style.top);

        $('TM_TLCorner').style.top = $('TM_TRCorner').style.top = top + 'px';
        top = top + parseInt(thumbnailSection.style.height) - 10;
        $('TM_BLCorner').style.top = $('TM_BRCorner').style.top = (top + 2) + 'px';

        left = parseInt(thumbnailSection.style.left);
        $('TM_TLCorner').style.left = $('TM_BLCorner').style.left = left + 'px';
        left = left + parseInt(thumbnailSection.style.width) - 10;
        $('TM_TRCorner').style.left = $('TM_BRCorner').style.left = (left + 2) + 'px';
        thumbnailMakerTray.readjustPseudoSections();
    },

/*checks that TM_ThumbnailSection stays within constraints */

    resetThumbnailBox:function() {
        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var thumbnailSection = document.getElementById('TM_ThumbnailSection');
        var secWidth = parseInt(thumbnailSection.style.width);
        var secHeight = parseInt(thumbnailSection.style.height);
        var secTop = parseInt(thumbnailSection.style.top);
        var secBottom = secTop + secHeight;
        var secLeft = parseInt(thumbnailSection.style.left);
        var secRight = secLeft + secWidth;
        var x;

        if (secHeight > imgHeight) {
            thumbnailSection.style.height = imgHeight + 'px';
            thumbnailMakerTray.readjustSection();
        }

        if (secWidth > imgWidth) {
            thumbnailSection.style.width = imgWidth + 'px';
            thumbnailMakerTray.readjustSection();
        }

        if (secBottom > imgHeight) {
            x = imgHeight - parseInt(thumbnailSection.style.height);
            thumbnailSection.style.top = x + 'px';
        }
        if (secLeft < 0) {
            thumbnailSection.style.left = '0px';
        }

        if (secTop < 0) {
            thumbnailSection.style.top = '0px';
        }
        if (secRight > imgWidth) {
            x = imgWidth - parseInt(thumbnailSection.style.width);
            thumbnailSection.style.left = x + 'px';
        }
    },

/* resizes TM_ThumbnailSection to stay within TM_thumbnailShape constraints*/
    readjustSection:function() {
        var thumbSectionHeight = parseInt($('TM_ThumbnailSection').offsetHeight);
        var thumbSectionWidth = parseInt($('TM_ThumbnailSection').offsetWidth);
        var thumbSectionLeft = parseInt($('TM_ThumbnailSection').style.left);
        var thumbSectionTop = parseInt($('TM_ThumbnailSection').style.top);
        var thumbSectionCenterX = thumbSectionLeft + thumbSectionWidth / 2;
        var thumbSectionCenterY = thumbSectionTop + thumbSectionHeight / 2;
        if ((thumbnailMakerTray.TM_thumbnailShape == 1) || (thumbnailMakerTray.TM_thumbnailShape == 4) || (thumbnailMakerTray.TM_thumbnailShape == 5)) {
            if (thumbSectionHeight > thumbSectionWidth)
            {
                $('TM_ThumbnailSection').style.height = thumbSectionWidth + 'px';
            }
            else
            {
                $('TM_ThumbnailSection').style.width = thumbSectionHeight + 'px';
            }
        }

        else if (thumbnailMakerTray.TM_thumbnailShape == 2) {
            if (thumbSectionHeight > (4 / 3) * thumbSectionWidth) {
                $('TM_ThumbnailSection').style.width = thumbSectionWidth + 'px';
            }
            else {
                $('TM_ThumbnailSection').style.height = (3 / 4) * thumbSectionWidth + 'px';
            }
        }

        else if (thumbnailMakerTray.TM_thumbnailShape == 3) {
            if (thumbSectionHeight > ((4 / 3) * thumbSectionWidth)) {
                $('TM_ThumbnailSection').style.height = (4 / 3) * thumbSectionWidth + 'px';
            }
            else {
                $('TM_ThumbnailSection').style.width = (3 / 4) * thumbSectionHeight + 'px';
            }
        }
        $('TM_ThumbnailSection').style.left = thumbSectionCenterX - parseInt($('TM_ThumbnailSection').offsetWidth) / 2 + "px";
        $('TM_ThumbnailSection').style.top = thumbSectionCenterY - parseInt($('TM_ThumbnailSection').offsetHeight) / 2 + "px";

    },

    readjustPseudoSections:function() {

        var imgHeight = parseInt(thumbnailMakerTray.imageToBeCropped.height);
        var imgWidth = parseInt(thumbnailMakerTray.imageToBeCropped.width);
        var thumbnailSection = document.getElementById('TM_ThumbnailSection');
        var thsec_top = parseInt(thumbnailSection.style.top);
        var thsec_left = parseInt(thumbnailSection.style.left);
        var thsec_height = parseInt(thumbnailSection.style.height) + 2;
        var thsec_width = parseInt(thumbnailSection.style.width) + 2;

        $('TM_PseudoSectionTop').style.top = 0 + 'px';
        $('TM_PseudoSectionTop').style.left = 0 + 'px';
        $('TM_PseudoSectionTop').style.width = imgWidth + 'px';
        var topSectionHeight = thsec_top;
        if (topSectionHeight <= 0) {
            topSectionHeight = 0;
        }
        $('TM_PseudoSectionTop').style.height = topSectionHeight + 'px';

        $('TM_PseudoSectionLeft').style.top = $('TM_PseudoSectionRight').style.top = thsec_top + 'px';
        $('TM_PseudoSectionLeft').style.left = '0px';
        //checking whether the width is less than 0
        var leftSectionWidth = thsec_left;
        if (leftSectionWidth < 0) {
            leftSectionWidth = 0;
        }


        $('TM_PseudoSectionLeft').style.width = leftSectionWidth + 'px';
        $('TM_PseudoSectionLeft').style.height = $('TM_PseudoSectionRight').style.height = thsec_height + 'px';
        $('TM_PseudoSectionRight').style.left = thsec_left + thsec_width + 'px';
        //checking whether the width is less than 0
        var rightSectionWidth = imgWidth - thsec_left - thsec_width;
        if (rightSectionWidth < 0) {
            rightSectionWidth = 0;
        }

        $('TM_PseudoSectionRight').style.width = rightSectionWidth + 'px';
        $('TM_PseudoSectionBottom').style.left = '0px';
        $('TM_PseudoSectionBottom').style.top = thsec_top + thsec_height + 'px';

        var bottomSectionHeight = imgHeight - thsec_top - thsec_height;
        if (bottomSectionHeight < 0) {
            bottomSectionHeight = 0;
        }

        $('TM_PseudoSectionBottom').style.height = bottomSectionHeight + 'px';
        $('TM_PseudoSectionBottom').style.width = imgWidth + 'px';

        $('imgshape').style.width = $('TM_ThumbnailSection').style.width;
        $('imgshape').style.height = $('TM_ThumbnailSection').style.height;


    },

/* set TM_thumbnailShape options */
    setShape:function(shapeOpt) {
        thumbnailMakerTray.TM_thumbnailShape = shapeOpt;
        thumbnailMakerTray.readjustSection();
        if (shapeOpt == 4)
        {
            $('imgshape').className = "TM_CircleSection";
            $('imgshape').setAttribute("src", (thumbnailMakerTray.options.shapeImageFolder + "circle_thumb.gif"));
            $('TM_ThumbnailSection').style.border = "1px solid black";

        }
        else if (shapeOpt == 5) {
            $('imgshape').className = "TM_StarSection";
            $('imgshape').setAttribute("src", (thumbnailMakerTray.options.shapeImageFolder + "5star_thumb.gif"));
            $('TM_ThumbnailSection').style.border = "1px solid black";

        }
        else {
            $('imgshape').className = "TM_BlankSection";
            $('imgshape').setAttribute("src", (thumbnailMakerTray.options.shapeImageFolder + "blank.gif"));
            $('TM_ThumbnailSection').style.border = "1px solid white";
        }
        $('imgshape').setAttribute("width", $('TM_ThumbnailSection').offsetWidth);
        $('imgshape').setAttribute("height", $('TM_ThumbnailSection').offsetHeight);

        thumbnailMakerTray.readjustSection();
        thumbnailMakerTray.trackThumbnail();
        thumbnailMakerTray.loadThumbNail(getThumbnailImage(parseInt($('TM_ThumbnailSection').style.left), parseInt($('TM_ThumbnailSection').style.top),
                parseInt($('TM_ThumbnailSection').style.width), parseInt($('TM_ThumbnailSection').style.height),
                thumbnailMakerTray.TM_thumbnailSize, thumbnailMakerTray.TM_thumbnailShape));
    },


/*set TM_thumbnailSize options */
    setsize:function(sizeOpt) {
        thumbnailMakerTray.TM_thumbnailSize = sizeOpt;
        thumbnailMakerTray.trackThumbnail();
        thumbnailMakerTray.readjustPseudoSections();
        thumbnailMakerTray.loadThumbNail(getThumbnailImage(parseInt($('TM_ThumbnailSection').style.left), parseInt($('TM_ThumbnailSection').style.top),
                parseInt($('TM_ThumbnailSection').style.width), parseInt($('TM_ThumbnailSection').style.height),
                thumbnailMakerTray.TM_thumbnailSize, thumbnailMakerTray.TM_thumbnailShape));

    },

    showThumbnailImg:function(res, obj) {
        var el = document.getElementById('TM_created_thumbnail');
        el.innerHTML = res.responseText;
    },

// final call
    loadThumbNail:function(data) {
        this.savedThumbnailImage.src = data;
        $('TM_created_thumbnail').innerHTML = '<table><tr valign="middle"><td width="120" height="120" align="center"><img id="finalthumb" alt="Thumbnail" src="' + data + '""/></td></tr></table>';
    },
//getThumbnail image
    getSavedThumbnailImageUrl:function() {
        return this.savedThumbnailImage.src;
    }

});