XD Image Editor 2.0

$(document).ready(function() {

    // Canvas, Session Vars
    var $imgContainer = $('.img_contain');
    var $img = $('.img_contain img');
    var $uuid = $('input[name="uuid"]').val();
    var randNum = Math.floor(Math.random() * (10000000 - 0 + 1)) + 1000000;

    // Icon Classes & Setting Null Values
    var $template = $('.more_items, .load_template div');
    var $trans = $('.picture, .transparency div');
    var $reset = $('.restart, .reset div');
    var $undo = $('.undo, .undo_container div');
    var $redo = $('.redo, .redo_container div');
    var scaling_factor = '';
    var tempImgPath = '';
    var frontTempImg = '';
    var backTempImg = '';
    var frontId = '';
    var backId = '';

    // JRAC Options & Event Bindings
    var jracOptions = {
        'crop_width': 250,
        'crop_height': 120,
        'crop_left': 100,
        'crop_top': 100,
        'image_width': null,
        'image_height': null,
        'viewport_onload': function() {

            // Define Crop Coords & Resize Containers
            var $crop = $('.jrac_crop');
            var $resizeImg = $('#targetImg');
            var $resizeImgContainer = $('.ui-wrapper');
            var $movement = $('.imgDrag');

            console.log('Adding 1st History State');

            // Add Initial Canvas State after JRAC is loaded
            History.addEntry({
                type: "init_state",
                $crop: $crop,
                $resizeImg: $resizeImg,
                $resizeImgContainer: $resizeImgContainer,
                $movement: $movement,
                imgSrc: tempImgSrc,
                imgPath: tempImgPath,
                x: $crop.position().left,
                y: $crop.position().top,
                width: $crop.width(),
                height: $crop.height(),
                img_width: $resizeImg.width(),
                img_height: $resizeImg.height(),
                img_container_width: $resizeImgContainer.width(),
                img_container_height: $resizeImgContainer.height(),
                x_img: $movement.position().left,
                y_img: $movement.position().top
            });

            // Hide JRAC crop container onload
            $('.jrac_crop').hide();
            $('.jrac_crop_drag_handler').hide();
            $('.ui-icon').hide();

        } // End Function Onload
    };

    // History Core
    var History = {
        entries: [],
        position: 0,
        types: {},

        /**
        * Perform undo action
        * @return {Boolean}
        */
        undo: function() {
            var currentAction;

            if (this.getSize() <= 0 || this.position === 1) {
                console.log('What is happening?');
                return false;
            }

            this.position--;

            currentAction = this.entries[this.position];
            if(currentAction.type == 'init_state') {
                var temp_position = this.position - 1;
                currentAction = this.entries[temp_position];
                while(currentAction.type != 'init_state' && (temp_position >= 0) ) {
                    temp_position--;
                    currentAction = this.entries[temp_position];
                }
            } else {
                currentAction = this.entries[this.position - 1];
            }

            if (this.types.hasOwnProperty(currentAction.type)) {
                this.types[currentAction.type](currentAction);
            }

            if (this.position === 1) {
                this.deleteHistory();

                // If History position is 1, always show the Init Image Src
                var $resizeImgContainer = $('.ui-wrapper');

                $img.prop('src', this.entries[0].imgSrc);
                $img.css('height', this.entries[0].img_height);
                $img.css('width', this.entries[0].img_width);
                $resizeImgContainer.css('height', this.entries[0].img_container_height);
                $resizeImgContainer.css('width', this.entries[0].img_container_width);
                $resizeImgContainer.css('left', this.entries[0].x_img);
                $resizeImgContainer.css('top', this.entries[0].y_img);

                $undo.trigger('history:end');
            }

            if ( currentAction.type == 'gray_scale' ) {
                $('.grayscale a').css('opacity', 0.25).css('cursor', 'default');
                $('.grayscale div').css('opacity', 0.25);
            } else {
                // Check to make sure it won't bind Grayscale click more than once (This would trigger the Image Service multiple times if this check wasn't here.)
                if ( $('.grayscale a').css('opacity') == 0.25 ) {
                    $('.grayscale .adjust').live('click', grayscale);
                }
                $('.grayscale a').css('opacity', 1).css('cursor', 'pointer');
                $('.grayscale div').css('opacity', 1);
            }

            // Activate redo icon
            $redo.css('opacity', 1).css('cursor', 'pointer');

            // Post to Console (For Testing purposes)

            console.log("Undo Position : " + this.position + ", Size : " + this.getSize());
            console.log(History.entries);

            return true;
        },

        /**
        * Get History Size
        * @return {Integer}
        */
        getSize: function() {
            return this.entries.length;
        },

        /**
        * Add an action entry to history
        * @param {Object} action
        */
        addEntry: function(action) {
            if (this.getSize() !== this.position) {
                this.entries.splice(this.position, Number.MAX_VALUE);
            }

            this.position++;

            action.sort = this.position;
            this.entries.push(action);

            // Post to Console (For Testing purposes)
            console.log("Add Entry Position : " + this.position + ", Size : " +this.getSize());
            console.log(History.entries);

            // Make sure first entry is showing the New Image
            if ( this.entries[0] == '' || this.entries[0] == null || this.entries[0] == 'undefined' ) {
                this.entries[0].imgSrc = tempImgSrc;
                this.entries[0].imgPath = tempImgPath;
                this.entries[0].img_height = $imgHeight;
                this.entries[0].img_width = $imgWidth;
                this.entries[0].img_container_height = $imgHeight;
                this.entries[0].img_container_width = $imgWidth;
            }

            // Check to see if the Cropper Tool is visible, then set the Y coord to 0 (This is done because a phantom # kept being put into the 2nd entry)
            if ( $('.jrac_crop').css('display') == 'none' ) {
                $.each( this.entries, function( i, val ) {
                    val.x = 0;
                    val.y = 0;
                });
            }

            // If a User moves an image twice, undos then rotates for example, this takes away their redo ability (This was a bug attempting to go back to the last state)
            lastObj = this.entries.slice(-1)[0];
            if ( this.getSize() > 1 && this.position != lastObj ) {
                $redo.trigger('history:end');
            }
        },

        /**
        * Load the types with proper callbacks
        * @param  {Object} callbacks
        */
        init: function(callbacks) {
            for (var prop in callbacks) {
                this.types[prop] = callbacks[prop];
            }
        },

        // Rewind to Start
        rewind: function() {
            while(this.undo());
        },

        // Empty History Array
        deleteHistory: function() {
            while(this.getSize() > 1) {
                console.log('Delete History');
                // Delete Array Objects
                this.entries.pop();
            }
        },

        // Empty ALL History Array
        deleteHistoryInitial: function() {
            while(this.getSize() > 0) {
                console.log('Delete History plus Initial State');
                // Delete Array Objects
                this.entries.pop();
            }
        }

    }

    // Once a user clicks undo/redo, commence action below...
    History.init({
        // Cropper Tool, Image and Resize

        crop: function(output, undo, redo) {

            console.log('Output is Crop: ' + output.imgSrc);

            console.log(output.$resizeImg.height());
            console.log(output.$resizeImg.width());

            output.$resizeImg.prop('src', output.imgSrc);
            // Adjust Cropper Tool Position
            output.$crop.css('left', output.x);
            output.$crop.css('top', output.y);
            output.$crop.width(output.width);
            output.$crop.height(output.height);
            // Adjust Image Height/Width
            output.$resizeImg.width(output.img_width);
            output.$resizeImg.height(output.img_height);
            // Adjust Resize Container Height/Width
            output.$resizeImgContainer.width(output.img_container_width);
            output.$resizeImgContainer.height(output.img_container_height);
            // Adjust Image Draggable Container Position
            output.$movement.css('left', output.x_img);
            output.$movement.css('top', output.y_img);
            output.$resizeImgContainer.css('left', output.x_img);
            output.$resizeImgContainer.css('top', output.y_img);
        },
        // If it is Grayscale, add color back...
        gray_scale: function(output, redo) {
            console.log('GRAYSCALE OUTPUT');

            output.$resizeImg.prop('src', output.imgSrc);
            // Adjust Cropper Tool Position
            output.$crop.css('left', output.x);
            output.$crop.css('top', output.y);
            output.$crop.width(output.width);
            output.$crop.height(output.height);
            // Adjust Image Height/Width
            output.$resizeImg.width(output.img_width);
            output.$resizeImg.height(output.img_height);
            // Adjust Resize Container Height/Width
            output.$resizeImgContainer.width(output.img_container_width);
            output.$resizeImgContainer.height(output.img_container_height);
            // Adjust Image Draggable Container Position
            output.$movement.css('left', output.x_img);
            output.$movement.css('top', output.y_img);
            output.$resizeImgContainer.css('left', output.x_img);
            output.$resizeImgContainer.css('top', output.y_img);
        },
        // Rotate Image
        rotate: function(output, undo, redo) {

            console.log('Output is Rotate: ' + output.imgSrc);

            console.log(output.$resizeImg.height());
            console.log(output.$resizeImg.width());

            output.$resizeImg.prop('src', output.imgSrc);
            // Adjust Cropper Tool Position
            output.$crop.css('left', output.x);
            output.$crop.css('top', output.y);
            output.$crop.width(output.width);
            output.$crop.height(output.height);

            // Sense what container dims are at.
            if ( History.entries[History.position-1].type == 'rotate' ) {
                console.log('Switch Height/Width');
                // Adjust Image Height/Width
                output.$resizeImg.width(output.img_height);
                output.$resizeImg.height(output.img_width);
                // Adjust Resize Container Height/Width
                output.$resizeImgContainer.width(output.img_container_height);
                output.$resizeImgContainer.height(output.img_container_width);
            } else {
                console.log('Normal Height/Width');
                // Adjust Image Height/Width
                output.$resizeImg.width(output.img_width);
                output.$resizeImg.height(output.img_height);
                // Adjust Resize Container Height/Width
                output.$resizeImgContainer.width(output.img_container_width);
                output.$resizeImgContainer.height(output.img_container_height);
            }

            // Adjust Image Draggable Container Position
            output.$movement.css('left', output.x_img);
            output.$movement.css('top', output.y_img);
            output.$resizeImgContainer.css('left', output.x_img);
            output.$resizeImgContainer.css('top', output.y_img);
        },
        resize: function(output) {

            console.log('GRAYSCALE RESIZE');

            console.log(output.x_img);
            console.log(output.y_img);

            output.$resizeImg.prop('src', output.imgSrc);
            // Adjust Cropper Tool Position
            output.$crop.css('left', output.x);
            output.$crop.css('top', output.y);
            output.$crop.width(output.width);
            output.$crop.height(output.height);
            // Adjust Image Height/Width
            output.$resizeImg.width(output.img_width);
            output.$resizeImg.height(output.img_height);
            // Adjust Resize Container Height/Width
            output.$resizeImgContainer.width(output.img_container_width);
            output.$resizeImgContainer.height(output.img_container_height);
            // Adjust Image Draggable Container Position
            output.$movement.css('left', output.x_img);
            output.$movement.css('top', output.y_img);
            output.$resizeImgContainer.css('left', output.x_img);
            output.$resizeImgContainer.css('top', output.y_img);
        },
    });

    // If undo has been clicked to the last state, make transparent
    $undo.live('history:end', function() {
        $(this).css('opacity', 0.25).css('cursor', 'default');
    });

    // If redo has been clicked to the last state, make transparent
    $redo.live('history:end', function() {
        $(this).css('opacity', 0.25).css('cursor', 'default');
    });

    // Modal Image Editor
    $('.edit_image').live('click', function(e){
        e.preventDefault();

        // Hide the Image Wrapper & Image (This is used to fix the 1st image being seen when a user clicks on a new Image to edit.)
        $('.ui-wrapper').hide();
        $img.hide();

        // Set as Global Vars (Grabbing Image Photo ID, Image Src and Agent Type from Link Attributes (See includes/functions/html.inc)
        $imgID = $(this).data('id');
        $imgSrc = $(this).data('rel');
        $typeLabel = $(this).data('type');
        $frontID = $(this).data('front');
        $backID = $(this).data('back');

        console.log($imgSrc);

        var coords = { rel: $imgSrc };
        // call to image service
        doOperation('get', coords);
    });

    // Close Image Editor (Cancel Button)
    $('.imgEditForm input[name="cancel"]').click(function(e) {
        e.preventDefault();

        // Destroy JRAC
        $img.jrac('destroy');
        // Delete History + Initial State
        //History.deleteHistoryInitial();
        // Reset
        destroyJrac();

        // ReEnable Browser Scrolling on Image Editor close
        $("body").css('overflow', '');

        // Close Modal
        $.modal.close();
        window.location.reload();
    });

    // Close Image Editor (X Button)
    $('.img_edit_close a').click(function(e) {
        e.preventDefault();

        // Destroy JRAC
        $img.jrac('destroy');
        // Reset
        destroyJrac();

        // ReEnable Browser Scrolling on Image Editor close
        $("body").css('overflow', '');

        // Close Modal
        $.modal.close();
        window.location.reload();
    });

    // Whenever the Draggable or Resizable JQuery UI Method is stopped, trigger this Global Function (See jquery.jrac.js, line 188 and 202)
    saveImageState = function() {
        // Define Crop Coords & Resize Containers
        var $crop = $('.jrac_crop');//.show(); // Start grab x/y coord hack
        var $resizeImg = $('#targetImg');
        var $resizeImgContainer = $('.ui-wrapper');
        var $movement = $('.imgDrag');

        console.log('Resize Image');

        //console.log($crop.position().left);
        //console.log($crop.position().top);

        //$resizeImgContainer.css('left', ($crop.position().left - $movement.position().left));
        //$resizeImgContainer.css('top', ($crop.position().top - $movement.position().top));

        var coords = {
            imageId: $imgID,
            uuid: $uuid,
            scaleFactor: scaling_factor,
            tempImageID: tempImgID,
            tempImgPath: History.entries[History.position-1].imgPath,
            imageWidth: $resizeImg.width(),
            imageHeight: $resizeImg.height()
        };

        //$crop.hide(); // End grab x/y coord hack

        // call to image service
        doOperation( 'resize', coords );

        // Rebind Click Event
        $('.restart').live('click', resetClick);

        // Ractivate Icon
        $undo.css('opacity', 1).css('cursor', 'pointer');
        // Enable Reset Icon
        $reset.css('opacity', 1).css('cursor', 'pointer');
    };

    // Undo Click Event
    $('.undo').live('click', function(e) {
        e.preventDefault();

        History.undo();

        // Ractivate Undo Icon
        $redo.css('opacity', 1).css('cursor', 'pointer');
    });

    // Redo Click Event
    $('.redo').live('click', function(e) {
        e.preventDefault();

        History.redo();

        // Ractivate Undo Icon
        $undo.css('opacity', 1).css('cursor', 'pointer');
    });

    // Pull the Cropping tool up.
    $('.crop_normal').live('click', function(e) {
        e.preventDefault();

        // Load JRAC Cropping Tool
        $('.jrac_crop').show();
        $('.jrac_crop_drag_handler').show();
        $('.ui-icon').show();

        $('.jrac_crop').append('<div class="absolute_center crop_handle is_right"></div><div class="absolute_center crop_handle is_bottom"></div>');

        // Remove Grayscale Icon and add Restore Color Icon back
        $('.crop_container a').addClass('crop_apply');
        $('.crop_container a').removeClass('crop_normal');

        // Clear Crop text and add apply crop text back
        $('.crop_container div').empty().text('Apply Crop');

        // Activate Crop to Template Icon
        $template.css('opacity', 1).css('cursor', 'pointer');

        // Rebind Click Event
        $('.more_items').live('click', cropTemplateClick);
        $('.restart').live('click', resetClick);

        // Enable Reset Icon
        $reset.css('opacity', 1).css('cursor', 'pointer');


        // Load Crop to Template Tooltip
        $('.tp_loadTemplate').fadeIn(500);
    });

    // Apply Crop
    $('.crop_apply').live('click', function(e) {
        e.preventDefault();

        // Define Crop Coords & Resize Containers
        var $crop = $('.jrac_crop');
        var $resizeImg = $('#targetImg');
        var $movement = $('.imgDrag');

        var x1 = $crop.offset().left;
        var y1 = $crop.offset().top;
        var h1 = $crop.outerHeight(true);
        var w1 = $crop.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $resizeImg.offset().left;
        var y2 = $resizeImg.offset().top;
        var h2 = $resizeImg.outerHeight(true);
        var w2 = $resizeImg.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        // Detect if the Cropper Tool and the Image are colliding and proceed with Crop.
        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
            // Pop Modal to Alert User they need to crop.
            cropToolAlert();
            return false;
        } else {
            var coords = {
                // Resource Value is now the Image ID instead of the Image SRC
                imageId: $imgID,
                uuid: $uuid,
                scaleFactor: scaling_factor,
                tempImageID: tempImgID,
                tempImgPath: History.entries[History.position-1].imgPath,
                cropX: ($crop.position().left - $movement.position().left),
                cropY: ($crop.position().top - $movement.position().top),
                cropImageWidth: $crop.width(),
                cropImageHeight: $crop.height(),
                imageWidth: $resizeImg.width(),
                imageHeight: $resizeImg.height()
            };

            console.log('x:' + ( $crop.position().left - $movement.position().left) );
            console.log('y:' + ( $crop.position().top - $movement.position().top) );
            console.log('crop width:' + $crop.width());
            console.log('crop height:' + $crop.height());
            console.log('image width:' + $resizeImg.width());
            console.log('image height:' + $resizeImg.height());
            console.log('crop temp image:' + tempImgPath);
            console.log(scaling_factor);
            console.log(tempImgID);

            // call to image service
            doOperation( 'crop', coords );

            // Rebind Click Event
            $('.restart').live('click', resetClick);

            // Clear Apply Crop text and add crop text back
            $('.crop_container div').empty().text('Crop');

            // Revert Classes & Hide the Cropper Box Tool
            $('.crop_container a').removeClass('crop_apply');
            $('.crop_container a').addClass('crop_normal');
            $('.jrac_crop').hide();
            $('.jrac_crop_drag_handler').hide();
            $('.ui-icon').hide();

            // Enable Reset Icon
            $reset.css('opacity', 1).css('cursor', 'pointer');

            return true;
        }

    });

    // Rotate
    $('.repeat').live('click', function(e) {
        e.preventDefault();

        // Define Crop Coords & Resize Containers
        var $crop = $('.jrac_crop');
        var $resizeImg = $('#targetImg');
        var $resizeImgContainer = $('.ui-wrapper');
        var $movement = $('.imgDrag');

        // Image Service Values
        var coords = {
            imageId: $imgID,
            tempImageID: tempImgID,
            rotate: 90,
            scaleFactor: scaling_factor,
            tempImgPath: History.entries[History.position-1].imgPath
        };

        // call to image service
        doOperation( 'rotate', coords );

        // Rebind Click Event
        $('.restart').live('click', resetClick);

        // Ractivate Undo Icon
        $undo.css('opacity', 1).css('cursor', 'pointer');
        // Enable Reset Icon
        $reset.css('opacity', 1).css('cursor', 'pointer');
    });

    // Desaturate / Grayscale Image
    $('.grayscale .adjust').live('click', function(e){
        e.preventDefault();

        grayscale();
    });

    var grayscale = function() {
        // Define Crop Coords & Resize Containers
        var $crop = $('.jrac_crop');
        var $resizeImg = $('#targetImg');
        var $resizeImgContainer = $('.ui-wrapper');
        var $movement = $('.imgDrag');

        console.log('History Img Path: ' + History.entries[History.position-1].imgPath);

        // Image Service Values
        var coords = {
            imageId: $imgID,
            tempImageID: tempImgID,
            scaleFactor: scaling_factor,
            tempImgPath: History.entries[History.position-1].imgPath
        };

        // call to image service
        doOperation( 'gray_scale', coords );

        // Rebind Click Event
        $('.restart').live('click', resetClick);

        // Unbind Click Event
        $('.grayscale .adjust').die('click');

        // Disable User from applying Grayscale
        $('.grayscale a').css('opacity', 0.25).css('cursor', 'default');
        $('.grayscale div').css('opacity', 0.25);

        // Ractivate Undo Icon
        $undo.css('opacity', 1).css('cursor', 'pointer');
        // Enable Reset Icon
        $reset.css('opacity', 1).css('cursor', 'pointer');
    };

    /** Integration with image service crop, rotate and greyscale actions **/
    function doOperation(operationName, coords) {

        $.ajax({
            // Whatever PHP page to post data to and type
            type: 'post',
            url: '/next/ajax/image_editor_api.php?op='+operationName,
            dataType: 'json',
            // Grabbing and passing the vlues from coords var above
            data: coords,
            success: function(json) {
                // Success Message
                console.log('AJAX Success!');

                // Global Vars returned from Image Service (New Image SRC is REQUIRED to be output here in order to load into canvas!)
                photoID = json['image_id'];
                tempImgID = json['temp_image_id'];
                tempImgSrc = 'http://' + json['temp_image_src'];
                scaling_factor = json['scaling_factor'];
                tempImgPath = json['temp_image_path'];

                // Load the Image first...
                $img.one('load', function() {
                    // Fade in new Image
                    $('.ui-wrapper').fadeIn(500);
                    $img.fadeIn(500);

                    // Detect the Images natural Height/Width
                    $imgHeight = this.naturalHeight;
                    $imgWidth = this.naturalWidth;

                    // Change Container Dimensions
                    $('.ui-wrapper').css('height', $imgHeight);
                    $('.ui-wrapper').css('width', $imgWidth);

                    // Change Image Dimensions
                    $img.css('height', $imgHeight);
                    $img.css('width', $imgWidth);
                })
                // Load Blank Image SRC (This is a fix to force Chrome to load the same Image again.)
                .attr('src', '')
                // Load Photo into DOM (Fix for IE to force .load to work properly)
                .attr('src', tempImgSrc)
                // Check to see if the Image has loaded before making an entry
                .complete;

                // Modal Check
                if ( /*$('.imgInt').css('display') == 'none'*/ History.getSize() == 0 ) {
                    $('.imgInt').modal({
                        onShow: function (dialog) {
                            // Check to see if JRAC is already loaded or not
                            if ( !$('.imgDrag').parent().hasClass('jrac_viewport') ) {
                                // Initialize JRAC and its Options (We only want to load it once.)
                                $img.jrac(jracOptions);

                                // Remove Image Contain Dimensions
                                $imgContainer.removeAttr('style');

                                // Adjust Modal Height on Load
                                adjust_size();

                                // Adjust position of Image Editor Modal
                                dialog.container.css({top: '5%'});

                                // Disable Browser Scrolling on Image Editor load
                                $("body").css('overflow', 'hidden');
                            }
                        },
                        persist: true,
                        opacity: 60,
                        overlayCss: { backgroundColor: "#fff" },
                        autoResize: true,
                        //minHeight: '80%',
                        close: false
                    });
                } else {
                    console.log('Load Image into existing JRAC.');

                    // Define Crop Coords & Resize Containers
                    var $resizeImg = $('#targetImg');
                    var $resizeImgContainer = $('.ui-wrapper');
                    var $movement = $('.imgDrag');

                    console.log($resizeImg.height());
                    console.log($resizeImg.width());

                    // If Crop operation, set Image & Container Dimensions
                    if ( operationName == 'crop' ) {
                        var $crop = $('.jrac_crop').show(); // Start grab x/y coord hack

                        console.log($crop.position().left);
                        console.log($crop.position().top);

                        $resizeImgContainer.css('left', ($crop.position().left - $movement.position().left));
                        $resizeImgContainer.css('top', ($crop.position().top - $movement.position().top));

                        History.addEntry({
                            type: "crop",
                            $crop: $crop,
                            $resizeImg: $resizeImg,
                            $resizeImgContainer: $resizeImgContainer,
                            $movement: $movement,
                            imgSrc: tempImgSrc,
                            imgPath: tempImgPath,
                            x: ($crop.position().left - $movement.position().left),
                            y: ($crop.position().top - $movement.position().top),
                            width: $crop.width(),
                            height: $crop.height(),
                            img_width: $crop.width(),
                            img_height: $crop.height(),
                            img_container_width: $crop.width(),
                            img_container_height: $crop.height(),
                            x_img: $movement.position().left,
                            y_img: $movement.position().top
                        });

                        $crop.hide(); // End grab x/y coord hack
                    } else {
                        var $crop = $('.jrac_crop');

                        History.addEntry({
                            type: operationName,
                            $crop: $crop,
                            $resizeImg: $resizeImg,
                            $resizeImgContainer: $resizeImgContainer,
                            $movement: $movement,
                            imgSrc: tempImgSrc,
                            imgPath: tempImgPath,
                            x: $crop.position().left,
                            y: $crop.position().top,
                            width: $crop.width(),
                            height: $crop.height(),
                            img_width: $resizeImg.width(),
                            img_height: $resizeImg.height(),
                            img_container_width: $resizeImgContainer.width(),
                            img_container_height: $resizeImgContainer.height(),
                            x_img: $movement.position().left,
                            y_img: $movement.position().top
                        });
                    }

                    // Ractivate Undo Icon
                    $undo.css('opacity', 1).css('cursor', 'pointer');
                    // Enable Reset Icon
                    $reset.css('opacity', 1).css('cursor', 'pointer');
                }
            },
            error: function(xhr, errorType, errorMessage) {
                console.log('AJAX Failure!');
                console.log(errorMessage);
            }
        });
    }

    // Make Image Transparent
    var transClick = function() {
        // Remove Color Class & add Transparency Class to DOM
        $img.removeClass('restore_color');
        $img.toggleClass("trans");

        // Remove Transparency Tooltip
        $('.tp_trans').fadeOut(500);
    };

    // Load Template
    var cropTemplateClick = function() {
        // Rebind Click Event
        $('.picture').live('click', transClick);

        // Resize viewport
        $('.jrac_viewport').addClass('viewport_large');

        // Add in the Crop to Template class to the DOM
        $(".jrac_viewport").addClass("template");

        // Remove Load Template Class and Add Remove Template Class
        $(this).removeClass('more_items').addClass('circle_remove');

        // Slide Side Template selection tabs down
        $('.sides').slideDown(500);

        // Make Load Template icon visible
        $trans.css('opacity', 1).css('cursor', 'pointer');

        // Clear Load Template text and add Unload Template text
        $('.load_template div').empty().text('Hide Template');

        // Remove Crop to Template Tooltip
        $('.tp_loadTemplate').fadeOut(500);

        // Add Transparency (By default)
        $img.addClass('trans');

        // Call to get Template
        var coords = {
            'frontTemplateId': $frontID,
            'fsize':'large',
            'backTemplateId': $backID,
            'bsize':'large'
        }

        //loading template thumbnails
        $.ajax({
            // Whatever PHP page to post data to and type
            type: 'post',
            url: '/next/ajax/image_editor_api.php?op=load_template',
            dataType: 'json',
            // Passing the image value and current image rotation to the server
            data: coords ,
            success: function(json) {
                console.log('LOad Template SUCCESS');
                frontTempImg = json['front_temp_image_src'];
                backTempImg = json['back_temp_image_src'];

                // Hide Side B if there is no template
                if ( backTempImg == '' || backTempImg == null ) {
                    $('.side_b').hide();
                    $('.imgAlertBoxContainer_one_side').fadeIn(500);
                } else {
                    // Insert Info Container
                    $('.imgAlertBoxContainer').fadeIn(500);
                }

                // Change attribute to the following. Replace URL below with new Template Image URL...
                $('.template').attr('style', 'background: #c4c4c4 url(http://' + frontTempImg + ') left top no-repeat !important');
            },
            error: function(xhr, errorType, errorMessage) {
                console.log('Load Template Failure!');
                console.log(errorMessage);
            }
        });

        // Show Tooltips for Resizing/Movement and Transparency
        $('.tp_trans').fadeIn(500);
    };

    // Unload Template
    $('.circle_remove').live('click', function(e){
        e.preventDefault();

        // Unbind Click Event
        $('.picture').die('click', transClick);

        // Remove Resize viewport class
        $('.jrac_viewport').removeClass('viewport_large');

        // Add in the Crop to Template class to the DOM
        $(".jrac_viewport").addClass("template");

        // Remove Unload Template Class and Load Template Class
        $(this).removeClass('circle_remove').addClass('more_items');

        // Clear Unload Template text and add Load Template text
        $('.load_template div').empty().text('Crop to Template');

        // Hide Template Alert Box
        $('.imgAlertBoxContainer').hide();
        $('.imgAlertBoxContainer_one_side').hide();

        // Slide Side Template selection tabs up
        $('.sides').hide(500);

        // Clear Templates from Canvas
        $('.template').removeAttr('style');

        // Remove Transparency
        $img.removeClass("trans");

        // Remove Tooltips for Resizing/Movement and Transparency
        $('.tp_trans').fadeOut(500);

        // Disable Trans Icon
        $trans.css('opacity', 0.25).css('cursor', 'default');
    });

    // Toggle Side A Template
    $('.side_a').live('click', function(e){
        e.preventDefault();

        // Success Message
        $('.template').attr('style', 'background: #c4c4c4 url(http://' + frontTempImg + ') left top no-repeat !important');
    });

    // Toggle Side B Template
    $('.side_b').live('click', function(e){
        e.preventDefault();

        // Success Message
        $('.template').attr('style', 'background: #c4c4c4 url(http://' + backTempImg + ') left top no-repeat !important');
    });

    // Reset All Process Form Function
    var destroyJrac = function() {
        // Render first canvas save
        History.rewind();
        // Delete History
        History.deleteHistory();

        // Reset Container & Image Positions
        $('.imgDrag').css({ top: 0, left: 0 });

        // Define Crop Coords & Resize Containers
        var $crop = $('.jrac_crop');
        var $resizeImg = $('#targetImg');
        var $movement = $('.imgDrag');

        // Clear Apply Crop text and add crop text back, remove Crop Apply Class and Add Crop Normal
        $('.crop_container div').empty().text('Crop');
        $('.crop_container a').removeClass('crop_apply');
        $('.crop_container a').addClass('crop_normal');
        // Hide Crop Box
        $('.jrac_crop').hide();
        $('.jrac_crop_drag_handler').hide();
        $('.ui-icon').hide();
        // Hide Template Alert Box
        $('.imgAlertBoxContainer').hide();
        // Disable Redo
        $redo.trigger('history:end');
        // Remove Hide Template Class and add Crop to Template Class
        $('.load_template a').removeClass('circle_remove').addClass('more_items');
        // Clear Unload Template text and add Load Template text
        $('.load_template div').empty().text('Crop to Template');
        // Remove Template
        $('.template').removeAttr('style');
        // Remove Sides
        $('.sides').hide();
        // Remove Tooltips
        $('.tp_loadTemplate').hide();
        $('.tp_trans').hide();
        // Remove Transparency
        $img.removeClass('trans');

        // Unbind Click Events
        $('.picture').die('click', transClick);
        $('.more_items').die('click');
        $('.restart').die('click');
        $undo.die('click');
        $redo.die('click');

        // Disable Reset, Transparency & Crop to Template Icons
        $reset.css('opacity', 0.25).css('cursor', 'default');
        $template.css('opacity', 0.25).css('cursor', 'default');
        $trans.css('opacity', 0.25).css('cursor', 'default');

        // Close Modal
        $('.submodal_reset').fadeOut(500);
    };

    // Reset All Process Form
    $('.submodal_reset form').submit(function(e) {
        e.preventDefault();

        // Destroy JRAC
        $img.jrac('destroy');
        // Delete History
        //History.deleteHistory();
        // Reset
        destroyJrac();
    });


    // Reset Modal
    var resetClick = function() {
        $('.submodal_reset').fadeIn(500);
    };

    // Close Reset Modal upon clicking Cancel
    $('.submodal_reset input[value="cancel"]').click(function(e) {
        e.preventDefault();

        // Close Modal
        $('.submodal_reset').fadeOut(500);
    });

    // Reset Modal
    var cropToolAlert = function() {
        $('.submodal_crop').fadeIn(500);
    };

    // Close Crop Tool Alert Modal upon clicking Cancel
    $('.submodal_crop input[type="submit"]').click(function(e) {
        e.preventDefault();

        // Close Modal
        $('.submodal_crop').fadeOut(500);
    });

    // Close Load Template Tooltip
    $('.tp_loadTemplate .close').click(function(e) {
        e.preventDefault();

        // Close Tooltip
        $('.tp_loadTemplate').fadeOut(500);
    });

    // Close Trans Tooltip
    $('.tp_trans .close').click(function(e) {
        e.preventDefault();

        // Close Tooltip
        $('.tp_trans').fadeOut(500);
    });

    // Save & Continue
    // Feel free to modify this to pass all values needed...
    $('.imgEditForm input[type="submit"]').click(function(e){
        e.preventDefault();

        // Add in Random Number as Temp Image ID
        $('.imgEditForm input[name="tempImgID"]').prop('value', randNum);

        var imgPath = $('#targetImg').prop('src');
        var image_type = $typeLabel;

        var coords = {
            imageId: $imgID,
            tempImageId: tempImgID,
            temp_image_src: imgPath,
            image_type: image_type
        };

        // Post Rotate to Server (Rotation is done on the front end until Save & Continue is clicked)
        $.ajax({
            // Whatever PHP page to post data to and type
            type: 'post',
            url: '/next/ajax/image_editor_api.php?op=save',
            dataType: 'json',
            // Passing the image value and current image rotation to the server
            data: coords ,
            success: function() {
                // Destroy JRAC
                $img.jrac('destroy');
                destroyJrac();

                // ReEnable Browser Scrolling on Image Editor close
                $("body").css('overflow', '');

                // Close Modal
                $.modal.close();
                window.location.reload();
            }
        });
    });

    // Adjust Modal Height Function
    var adjust_size = function() {
        $jracContainer = $('.jrac_viewport');
        if ( $(window).height() <= 767 && $(window).height() >= 400 ) {
            //console.log('Resize below 768?');
            //$jracContainer.css('height', 300);
            $jracContainer.removeClass('viewport_small');
            $jracContainer.addClass('viewport_medium');
        } else if ( $(window).height() <= 399 ) {
            //console.log('Resize below 400?');
            //$jracContainer.css('height', 100);
            $jracContainer.removeClass('viewport_medium');
            $jracContainer.addClass('viewport_small');
        } else if ( $(window).height() >= 1001 ) {
            //console.log('Resize above 1000?');
            //console.log('Resize is normal height.');
            //$jracContainer.css('height', 480);
            if ( $jracContainer.hasClass('viewport_small') || $jracContainer.hasClass('viewport_medium') ) {
                $jracContainer.attr('style', '');
                $jracContainer.removeClass('viewport_small');
                $jracContainer.removeClass('viewport_medium');
            }
        }
    };

    // Adjust Modal Height on Resize
    $(window).resize(adjust_size);
});