The requested page does not exist.
<script type="text/javascript" src="../js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="../js/cropper.min.js"></script>
<link rel="stylesheet" href="../css/cropper.css">
<div class="row-fluid clearfix">
	<div class="example">
        <h2>Image Cropping</h2>
        <p><em>Click and drag anywhere on the image below to select the area to crop and click the button</em></p>
        <p><form class="form-horizontal">
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label"><em>x1</em> coordinate</label>
                <div class="col-xs-7">
                    <input type="text" name="x1" id="x-1" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label"><em>x2</em> coordinate</label>
                <div class="col-xs-7">
                    <input type="text" name="x2" id="x-2" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label"><em>y1</em> coordinate</label>
                <div class="col-xs-7">
                    <input type="text" name="y1" id="y-1" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label"><em>y2</em> coordinate</label>
                <div class="col-xs-7">
                    <input type="text" name="y2" id="y-2" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label">Selected <em>width</em></label>
                <div class="col-xs-7">
                    <input type="text" name="width" id="width-1" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group dont-show">
                <label class="col-xs-5 control-label">Selected <em>height</em></label>
                <div class="col-xs-7">
                    <input type="text" name="height" id="height-1" class="form-control" value="0" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-5 control-label"></label>
                <div class="col-xs-7">
                    <input type="submit" value="Crop Section" class="btn btn-primary" onclick="event.preventDefault();SendData(this);" />
                </div>
            </div>
        </form></p>
        <img src="../temp/" style="width:1000px; height:1298px;" id="image-1" alt="" />    </div>
</div>
<style type="text/css">
.dont-show{
    display: none;
}
</style>
<script type="text/javascript">
    document.getElementById('image-1').onload = function () {
        new Cropper(this, {
            update: function (coordinates) {
                for (var i in coordinates) {
                    document.getElementById(i + '-1').value = coordinates[i];
                }
                
                var x1 = parseInt(document.getElementById('x-1').value);
                var w1 = parseInt(document.getElementById('width-1').value);
                var total = x1 + w1;
                document.getElementById('x-2').value = total;

                var y1 = parseInt(document.getElementById('y-1').value);
                var h1 = parseInt(document.getElementById('height-1').value);
                var total2 = y1 + h1;
                document.getElementById('y-2').value = total2;
            }
        });
    }
    function SendData(){
        var x1 = document.getElementById("x-1").value;
        var y1 = document.getElementById("y-1").value;
        var width = document.getElementById("width-1").value;
        var height = document.getElementById("height-1").value;
        var image = '';
        var link = 'crop.php';
        var name = 'crop';

        if (x1 == null || x1 == 0 || y1 == null || y1 ==0 || width == null || width == 0 || height == null || height ==0 ) {
            alert("Please Select Required Fields");
            return false;
        }else{
            $.ajax({
                // This is the Post Instruction
                url: link,
                data: { 'x1': x1, 'y1': y1, 'width':width,'height':height,'image':image },
                type: 'POST',
                cache: false,

                success: function(data) {
                    window.location = "download.php?image="+data+"&name="+name;
                },
                //In Case Of Failure, Do This
                error: function() {
                    alert("Error! There was an error Generating the Section, Notify Admin");
                }
            });
        }
    }
</script>