$(function() {

    resetForm();

    var addedBoxes = 0;

    $( "#dialog-form" ).dialog({
	autoOpen: false,
	height: 900,
	width: 600,
	modal: true,
	buttons: {
	    "New Shipment": function() {
		var thisShipmentInputs = $('#ShipmentAddForm').find('input,select,textarea');

		$.post('/shipments/ajax_edit', thisShipmentInputs, function(data) {
		    $( "#dialog-form" ).dialog('close');
		    window.location.reload(); //Change this to fetch a new copy of the table and update a <div>. 
		});
					
	    },
	    Cancel: function() {
		$( this ).dialog( "close" );
		$("#ShipmentAddForm")[0].reset();
		$("#principlesList").empty();
	    }
	},
	close: function() {

	    $("#importFields").hide();
	    $("#principle").hide();

	   
	}
    });

    $( ".newShipment" ).button().click(function() {

	$( "#dialog-form" ).dialog( "open" );

    });



    $('#date_arrived_display').datepicker({
	showButtonPanel: true,
	dateFormat: 'd M yy',
	altFormat: 'yy-mm-dd',
	altField: '#date_arrived'
    });


    $('#date_dispatched_display').datepicker({
	showButtonPanel: true,
	dateFormat: 'd M yy',
	altFormat: 'yy-mm-dd',
	altField: '#date_dispatched'
    });

    /**
     * Display the relevent elements depending on this Shipment Type */
    $("#shipmentType").change(function() {
	var shipmentTypeID = getSelectedID('#shipmentType');
	shipmentTypeID = parseInt(shipmentTypeID);
	$(".hiddenDefault").hide();
	
	switch(shipmentTypeID) {
	    case 1: //Import
		$("#importFields, #principle, #purchaseOrder, #freight_forwarder, #airway_bill, #boxes").show();
		break;

	    case 2: //Direct
		$("#purchaseOrder, #job,#principle, #dateDispatched, #customer, #address, #addressSpan, #freight_forwarder, #airway_bill, #boxes").show();
	    default:
		break;
	}

    });

    //Remove X button clicked.
    $('.removeFromList').live('click', function() {
	$(this).parent().remove();
    });

    

    $('#addPrinciple').button().click(function() {

	var principleID = getSelectedID('#PrinciplePrinciple');

	if($('#PrincipleID_'+principleID).length > 0) { //This Principle is already in the List. Don't do anything.'
	    return false;
	}

	var principleName =getSelectedText('#PrinciplePrinciple');

	//addPrincipleToList(principleID);
	addToList('Principle', principleID, principleName, $('#principlesList') );

	return false;

    });


    $( "#purchase_order_autocomplete" ).autocomplete({
	source: "/purchase_orders/autocomplete",
	minLength: 2,
	select: function( event, ui ) {
	    //alert(ui.item.value + ":" + ui.item.id);
	    //alert($('#PurchaseOrderID_'+ui.item.id).length);

		
	    if($('#PurchaseOrderID_'+ui.item.id).length == 0) { //This PO is already in the List. Don't do anything.'
		addToList('PurchaseOrder', ui.item.id, ui.item.value, $('#purchaseOrdersList'));
	    }


	}
    });

    $( "#job_autocomplete" ).autocomplete({
	source: "/jobs/autocomplete",
	minLength: 2,
	select: function( event, ui ) {
	    //alert(ui.item.value + ":" + ui.item.id);
	    
	    if($('#JobID_'+ui.item.id).length == 0) { //This Job is already in the List. Don't do anything.'
		addToList('Job', ui.item.id, ui.item.value, $('#jobsList'));
	    }   
	}
    });


    $("#customer_autocomplete").autocomplete({
	source: "/customers/completeCustomer",
	minLength: 2,
	select: function( event, ui ) {
	    $("#customer_id").val(ui.item.id);

	    $.get('/addresses/customerAddresses/'+ui.item.id, function(data) {
		$("#address").html(data);
		$(".selectAddress", data).button();
	    });

	}
    })


    $("#addBox").button().click(function() {
	addBox(addedBoxes);
	addedBoxes++;
    });

    $(".removeBox").live('click',function() {
	$(this).parent().remove();
    });


    $(".selectAddress").live('click', function() {
	var ID = $(this).attr('id');
	$("#address_id").val(ID);

	


	$(this).removeClass('selectAddress');
	$(this).addClass('changeAddress');

	$(".selectAddress").button('disable');
	$(".selectAddress").parent('div').fadeOut();

	$(this).button({
	    label: 'Select a different address'
	});
	$(this).button('enable');

    });

    $(".changeAddress").live('click', function() {
	$("#address_id").val('');
	$(this).removeClass('changeAddress');
	$(this).button({
	    label: 'Ship to this Address'
	});
	$(this).addClass('selectAddress');

	$(".selectAddress").parent('div').fadeIn();

	$('.selectAddress').button('enable');
    });

    /**
     * Resets the Form to its default site
     */

    function resetForm() {

	$(".hiddenDefault").hide();
	$("#ShipmentAddForm")[0].reset();
    }


    function addBox(addedBoxes) {

	var model = 'Box';

	var newBoxForm = $("#boxFactory").clone();

	var boxNo = addedBoxes;

	newBoxForm.attr('id','');
	newBoxForm.addClass('boxForm');
	newBoxForm.show();

	//Set the appropriate naming for the fields so cake can work its magic.
	//Should refactor into a function.
	var div = newBoxForm.find('.length');
	var ID = getCakeID(model,boxNo,'length');
	var name = getCakeName(model, boxNo, 'length');
	div.children('label').attr('for', ID);
	div.children('input').attr('id', ID).attr('name', name);

	div = newBoxForm.find('.width');
	ID = getCakeID(model,boxNo,'width');
	name = getCakeName(model, boxNo, 'width');
	div.children('label').attr('for', ID);
	div.children('input').attr('id', ID).attr('name', name);

	div = newBoxForm.find('.height');
	ID = getCakeID(model,boxNo,'height');
	name = getCakeName(model, boxNo, 'height');
	div.children('label').attr('for', ID);
	div.children('input').attr('id', ID).attr('name', name);

	div = newBoxForm.find('.weight');
	ID = getCakeID(model,boxNo,'weight');
	name = getCakeName(model, boxNo, 'weight');
	div.children('label').attr('for', ID);
	div.children('input').attr('id', ID).attr('name', name);


	


	var closeButton = $('<button>X</button>');
	closeButton.addClass('removeBox');
	closeButton.button();

	newBoxForm.prepend(closeButton);

	$("#boxes").append(newBoxForm);
    }


    function getCakeID(model, count, field) {
	return model+count+capitalizeFirstLetter(field);
    }

    function getCakeName(model, count, field) {
	return 'data['+model+']['+count+']['+field+']';
    }

    function capitalizeFirstLetter(string) {
	return string.charAt(0).toUpperCase() + string.slice(1);
    }

 
    /**
     * A more generic way of handling the HABTM <ul> <li>[REMOVE BUTTON] NAME [HIDDEN INPUT]</li> </ul>
     */
    function addToList(modelName, id, value, ULelement) {
	var thisLI = $('<li></li>');
	var thisButton = $('<button>X</button>');
	thisButton.addClass('removeFromList');
	thisButton.button();

	var thisHiddenInput = $('<input type="hidden">');

	var modelString = '['+modelName+']';

	thisHiddenInput.attr('name', 'data'+modelString+modelString+'[]');

	thisHiddenInput.attr('value', id);

	thisLI.attr('id', modelName+'ID_'+id);
	thisLI.html(value);
	thisLI.prepend(thisButton);
	thisLI.append(thisHiddenInput);
	ULelement.append(thisLI);

    }


    function getSelectedID(elementID) {
	var id;
	$(elementID+" :selected").each(function(i, selected) {
	    id = this.value;
	});
	return id;
    }

    function getSelectedText(elementID) {
	var text;
	$(elementID+" :selected").each(function(i, selected) {
	    text = $(selected).text();
	});
	return text;
    }


    



});