//Image Upload Button
    $("#image_file_input").change(function() {
       // alert($('#image_file_input')[0].files[0]);
       $('.uploader-loader').show();
       $('.error-container').empty().hide();
       $('.add-to-cart-form').hide();

        var fd = new FormData();
        var img = $('#image_file_input')[0].files[0];
        var imgType = img.type;
        var imgSize = img.size;

        if(imgType=='image/jpeg' || imgType=='image/png' ) {
               var allowedSize = '20971520'; //1MB = 1000000bytes //20MB Max Allowed
                if(imgSize <=allowedSize ) {
                        /* Upload Image*/
                        fd.append( "file", $('#image_file_input')[0].files[0]);
                        fd.append( "action", 'upload_image_enhanced');
                        $.ajax({
                            url: ajaxjs.ajax_url,
                            type: "POST",
                            contentType: false,
                            processData:false,
                            data: fd,
                            success: function(val) {
                                $.ajax({
                                    url: ajaxjs.ajax_url,
                                    type: "POST",
                                    data: {action:'get_uploaded_html_preview','id':val,'size':'ssmall'},
                                    success: function(html) {
                                        getImgSizes(img);
                                        getImgOrientation(img);
                                        $('.add-to-cart-form').show();
                                        $('#image-container').empty().html(html);
                                        $("#image-container img").imageScale();
                                        $('#attachment_id').val(val);
                                        $('#product-title').val('Window Print');
                                        $('.uploader-loader').hide();

//------------------------------------------------------------------------------

            //Since the image is now uploaded and displayed on the page as a preview, as well as the ".add-to-cart" form is now unhidden, we should select the image with Jcrop and perform functions. Not sure how to add that to this code here

                                    },
                                    error: function() {
                                        $('.uploader-loader').hide();
                                        alert("An error occured, please try again.");
                                    }
                                });

                            },
                            error: function() {
                                alert("An error occured, please try again.");
                            }
                        });
                    } else {
                    $('.uploader-loader').hide();
                    $('.error-container').empty().show().html('The uploaded file size is too high.');
                }

        } else {
            $('.uploader-loader').hide();
            $('.error-container').empty().show().html('The uploaded file format is not supported.');
        }
    });

    /*$('#cart-size').change(function(){
        var size=$(this).val();
        if(size==1) {
            $('#cart-price').val('10');
        }
        if(size==2) {
            $('#cart-price').val('20');
        }
        if(size==3) {
            $('#cart-price').val('30');
        }
        if(size==4) {
            $('#cart-price').val('40');
        }
        if(size==5) {
            $('#cart-price').val('50');
        }
    });*/

    $('.crop').bind('click',function(){
        $('#image-container').croppie(

        );

        return false;
    });

    $('#add-to-cart').click(function(){
        var attach_id = $('#attachment_id').val();
        var productName = $('#product-title').val();
        var cartSize = $('#cart-size').val();
        var cartPrice = $('#cart-price').val();
        var cartOrientation = $('#cart-orientation').val();

        $.ajax({
            url: ajaxjs.ajax_url,
            type: "POST",
            data: {action:'add_product_to_buy','attach_id':attach_id,'productName':productName,'cartSize':cartSize,'cartPrice':cartPrice,'cartOrientation':cartOrientation},
            success: function(text) {
                //After Add to cart redirect to Cart page
                //alert(text);
                $('.add-to-cart-form').hide();
                $('.error-container').show();
                $('.error-container').empty().html('<p>'+text+'</p>');
            },
            error: function() {
                alert("An error occured, please try again.");
            }
        });
        return false;
    });

});



//---------------------------------------------------------------------------------------------

//Jcrop bit to add


function initJcrop()//{{{
{
  // Hide any interface elements that require Jcrop
  // (This is for the local user interface portion.)
  $('.requiresjcrop').hide();

  // Invoke Jcrop in typical fashion
  $('#target').Jcrop({
    onRelease: releaseCheck
  },function(){

    jcrop_api = this;
    jcrop_api.animateTo([100,100,400,300]);

    // Setup and dipslay the interface for "enabled"
    $('#can_click,#can_move,#can_size').attr('checked','checked');
    $('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
    $('.requiresjcrop').show();

  });

};
//}}}


function getRandom() {
  var dim = jcrop_api.getBounds();
  return [
    Math.round(Math.random() * dim[0]),
    Math.round(Math.random() * dim[1]),
    Math.round(Math.random() * dim[0]),
    Math.round(Math.random() * dim[1])
  ];
};

// This function is bound to the onRelease handler...
// In certain circumstances (such as if you set minSize
// and aspectRatio together), you can inadvertently lose
// the selection. This callback re-enables creating selections
// in such a case. Although the need to do this is based on a
// buggy behavior, it's recommended that you in some way trap
// the onRelease callback if you use allowSelect: false
function releaseCheck()
{
  jcrop_api.setOptions({ allowSelect: true });
  $('#can_click').attr('checked',false);
};

// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
  // Sets a random selection
  jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
  // Animates to a random selection
  jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
  // Release method clears the selection
  jcrop_api.release();
});
$('#disable').click(function(e) {
  // Disable Jcrop instance
  jcrop_api.disable();
  // Update the interface to reflect disabled state
  $('#enable').show();
  $('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
  // Re-enable Jcrop instance
  jcrop_api.enable();
  // Update the interface to reflect enabled state
  $('#enable').hide();
  $('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
  // This button is visible when Jcrop has been destroyed
  // It performs the re-attachment and updates the UI
  $('#rehook,#enable').hide();
  initJcrop();
  $('#unhook,.requiresjcrop').show();
  return false;
});
$('#unhook').click(function(e) {
  // Destroy Jcrop widget, restore original state
  jcrop_api.destroy();
  // Update the interface to reflect un-attached state
  $('#unhook,#enable,.requiresjcrop').hide();
  $('#rehook').show();
  return false;
});

// Hook up the three image-swapping buttons
$('#img1').click(function(e) {
  $(this).addClass('active').closest('.btn-group')
    .find('button.active').not(this).removeClass('active');

  jcrop_api.setImage('demo_files/sago.jpg');
  jcrop_api.setOptions({ bgOpacity: .6 });
  return false;
});
$('#img2').click(function(e) {
  $(this).addClass('active').closest('.btn-group')
    .find('button.active').not(this).removeClass('active');

  jcrop_api.setImage('demo_files/pool.jpg');
  jcrop_api.setOptions({ bgOpacity: .6 });
  return false;
});
$('#img3').click(function(e) {
  $(this).addClass('active').closest('.btn-group')
    .find('button.active').not(this).removeClass('active');

  jcrop_api.setImage('demo_files/sago.jpg',function(){
    this.setOptions({
      bgOpacity: 1,
      outerImage: 'demo_files/sagomod.jpg'
    });
    this.animateTo(getRandom());
  });
  return false;
});

// The checkboxes simply set options based on it's checked value
// Options are changed by passing a new options object

// Also, to prevent strange behavior, they are initially checked
// This matches the default initial state of Jcrop

$('#can_click').change(function(e) {
  jcrop_api.setOptions({ allowSelect: !!this.checked });
  jcrop_api.focus();
});
$('#can_move').change(function(e) {
  jcrop_api.setOptions({ allowMove: !!this.checked });
  jcrop_api.focus();
});
$('#can_size').change(function(e) {
  jcrop_api.setOptions({ allowResize: !!this.checked });
  jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
  jcrop_api.setOptions(this.checked?
    { aspectRatio: 4/3 }: { aspectRatio: 0 });
  jcrop_api.focus();
});
$('#size_lock').change(function(e) {
  jcrop_api.setOptions(this.checked? {
    minSize: [ 80, 80 ],
    maxSize: [ 350, 350 ]
  }: {
    minSize: [ 0, 0 ],
    maxSize: [ 0, 0 ]
  });
  jcrop_api.focus();
});

});