$("span#toggle").toggle(function() {
    $("div#main").sortable("disable");
    $(this).text("Enable Dragging");
},
function() {
    $("div#main").sortable("enable");
    $(this).text("Disable Dragging");
});
function getID(s) {
    var tmp = s.split('_');
    return tmp.pop();
}
function RightClickMenu() {
    $("div#main img").rightClick(function(e) {
        var ref = $(this);
        var action = null;
        $("#myMenu").show().css({
            top: e.pageY + "px",
            left: e.pageX + "px",
            position: "absolute",
            opacity: 1,
            zIndex: 100
        });
        $("#myMenu li").click(function() {
            action = $(this).attr("id");
            $("#myMenu li").unbind();
            $("#myMenu").hide();
            if (action == 'del') {
                if (confirm('Do you really want to DELETE this image?')) {
                    $.ajax({
                        type: "POST",
                        url: "DeleteImg.php",
                        data: "img=" + ref.attr("src")
                    });
                    $("form#updateInfo input[value='" + ref.attr("src") + "']").remove();
                    if ($("div#main form").length == 0 && ($("div#main img").length - 1) < maxFiles) addAnother();
                    ref.parent().remove();
                    sortImages();
                }
                return false;
            } else if (action == 'rep') {
                    $.ajax({
                        type: "POST",
                        url: "DeleteImg.php",
                        data: "img=" + ref.attr("src")
                    });
                    $("form#updateInfo input[value='" + ref.attr("src") + "']").remove();
					ref.parent().remove();
					addAnother();
                    sortImages();
                return false;
            }
        });
    });
}

function dels(){
	$("div.del").unbind();
	$("div.del").click(function(){
		if (confirm('Do you really want to DELETE this image?')){
			var ref = $("img#img_ajaxUploadImg_" + getID(this.id));
			$.ajax({
				type: "POST",
				url: "DeleteImg.php",
				data: "img=" + ref.attr("src")
			});
			$("form#updateInfo input[value='" + ref.attr("src") + "']").remove();
			if ($("div#main form").length == 0 && ($("div#main img").length - 1) < maxFiles) addAnother();
			ref.parent().remove();
			sortImages();
		}
		else return false;
	});

	$("div.del").hover(
		function(){
    		$("div#main ul").sortable("disable");
		},
		function(){
		    $("div#main ul").sortable("enable");
		}
	);
}
function sortImages() {
	dels();
    RightClickMenu(); // right click menu
    $("div#main img:hidden").parent().remove();
	if( $("div#main img").length < 2) return false;
	$("div#main ul").sortable("destroy");
    $("div#main ul").sortable({
        items: '> li',
        update: serializeHiddenFields
    });
    serializeHiddenFields(1, 1);
}
function serializeHiddenFields(e, ui) {
    var serial = $("div#main ul").sortable("serialize");
    if (serial == '') return false; //img_ajaxUploadImg_1
    $("form#updateInfo input.imgName").remove();
    var arr = serial.split('&');
    for (i = arr.length - 1; i >= 0; i--) {
        var tmp = arr[i];
        tmp = tmp.replace('[]=', '_');
        var ID = getID(tmp);
        var x = $("li#" + tmp + " img").attr("src");
        x = x.substring(x.lastIndexOf('/') + 1);
        $("form#updateInfo").prepend($("<input class='imgName' type='hidden' name='imgs[]' value='" + x + "'/>"));
        $("form#updateInfo").prepend($("<input class='imgName' type='hidden' name='imgComment[]' value='" + $('input#comment_' + ID).val() + "' id='hid_" + ID + "' />"));
    } // onchange of comment txt
    $("input.comment").change(function() {
        var ID = getID(this.id);
        $('input#hid_' + ID).val($(this).val());
    });
}
function addAnother() {
    var count = 1;
    if (($("div#main form").length + $("div#main img").length) < maxFiles) {
        for (i = 1; i <= maxFiles; i++) {
            if ($("form#ajaxUploadImg_" + i).length == 0 && $("li#div_"+i).length == 0) {
                count = i;
                break;
            } else continue;
        }
        var formString = '<form id="ajaxUploadImg_' + count + '" action="'+uploadPath+'" enctype="multipart/form-data"><div class="files"><div><input name="img" type="file" size="50" /><div class="remove" id="' + count + '">remove</div></div></div></form>';
        $("div#main").append(formString);
        initUploader();
    } else {
        alert("You can add maximum " + maxFiles + " images.");
    }
}
function processXmlI(responseXML, frmID) {
    $("#finalSubmit").attr("disabled", false).val("Submit");;
    $(frmID + " span").stop().animate({
        backgroundPosition: "0px 0px"
    },
    "fast", "linear",
    function() {
        $(this).remove();
    });
    var message = $('message', responseXML).text();
    var status = $('status', responseXML).text();
    if (status == 'error') alert(message);
    else {
		if(!$(frmID).length) return;
        var f = message;
        var x = f;
        x = x.substring(x.lastIndexOf('/') + 1);
		var ID = getID(frmID);
		var formID = $(frmID).attr("id");
		$(frmID).remove();
		
        $("form#updateInfo").prepend($("<input class='imgName' type='hidden' name='imgs[]' value='" + x + "'/>"));
        $("form#updateInfo").prepend($("<input class='imgName' type='hidden' name='imgComment[]' value='' id='hid_" + ID + "' />"));

		$("div#main ul").append('<li class="imageThumb" id="div_' + ID + '"><img id="img_'+formID+'" src="'+f+'" width="100" height="100" alt="Uploaded Image" class="img_thumbs" />Add comment: <input class="comment" type="text" value="" id="comment_' + getID(frmID) + '" /><div class="del" id="del_'+ID+'">X</div></li>');
            if ($("div#main form").length == 0 && $("div#main img").length < maxFiles) addAnother();
            sortImages();
    }
}
function showRequestI(frmID) {
	$(frmID).addClass("uploading");
	if($("div#main form").not(".uploading").length == 0)
		addAnother();
    $("#finalSubmit").val("Please wait...").attr("disabled", "disabled");
    $(frmID + " span").text("  ").addClass("progressbar").unbind().animate({
        backgroundPosition: "0px 0px"
    },
    3000, "easeOutCirc");
}
function AIF(frmID) {
    $(document).ready(function() {
        $(frmID).ajaxForm({
            beforeSubmit: function() {
                showRequestI(frmID);
            },
            dataType: 'xml',
            async: true,
            cache: false,
            error: function(req, stat, err) {
                //alert(err);
            },
            complete: function() {
            },
            success: function(d) {
                processXmlI(d, frmID);
            }
        });
    });
}