createPlaceholderForResults();
createBasketPlaceholder();

$('search').observe('keyup', function(e){
    if (e.keyCode == Event.KEY_RETURN)
        searchDatabase();
})

Event.observe( 'submit_search', 'click', searchDatabase );

function createPlaceholderForResults() {

    list = '<ul id="results" style=" display: none; margin: 0; padding: 0; ">';
    list += '<li style=" display: block; clear: both; margin: 5px 0;  width: 100%; background-color: #2B2E31; color: whitesmoke; list-style: none; padding-left: 10px; " > <span style="width: 130px; display: block; float: left; ">Part number</span> <span style=" display: block; float: left; padding-left: 10px; width: 500px; ">Description</span> <span style=" padding-left: 10px; ">Enquiry</span> </li>'
    list += '<li id="last_list_item" style=" display: none; " >&nbsp;</div>';
    list += '</ul>';
    new Insertion.Before('list_end', list );
}
function searchDatabase() {	
	
    $( 'results' ).remove();
    createPlaceholderForResults();
	
    new Ajax.Request('/ajax/electronicsComponents/',
    {
        method:'post',
        parameters: {
            query: $( 'search' ).getValue()
        },
        requestHeaders: {
            Accept: 'application/json'
        },
        onSuccess: function(transport){
			
            response = transport.responseText.evalJSON(true);
			
            list_items = '';
            a = 1;
            color = '#eeeeee';
            response.results.each(function(item) {
                if ( color == '#d0d0d0' ) {
                    color = '#eeeeee';
                } else {
                    color = '#d0d0d0';
                }
							
                // create each node
                details = {
                    id: a,
                    item_id: item.item_id,
                    description: item.description,
                    color: color
                };
                list_items += template.evaluate(details);

                a = a + 1;
            });
			
            if ( a == 1 ) {
                details = {
                    id: $( 'search' ).getValue(),
                    item_id: $( 'search' ).getValue() + '.',
                    description: '',
                    color: '#eeeeee'
                };
                list_items += template.evaluate(details);
            //				list_items += '<li>No results</li>';
            }
			
            new Insertion.Before('last_list_item', list_items );
            new Effect.SlideDown( 'results' );
			
        },
        onFailure: function(){
            alert('Something went wrong...')
        }
    })
	
}

function createBasketPlaceholder() {
    list = '<div id="basket" style=" display: none; height: 35px; ">';
    list += '<p style=" background-color: #888888; color:  whitesmoke; width: 420px; margin-top: 0; padding-top: 5px; padding-left: 5px; ">Enquiry basket contains <span id="display_basket_count">&nbsp;</span> items. <span id="view_basket" onclick=" toggleBasketVisibility(); " style=" cursor: pointer; " >View basket.</span> </p>';
    list += '<ul id="enquiry_basket" style="display: none;" >';
    list += '<li id="last_enquiry_basket" style=" display: none; "></li>';
    list += '<li id="enquire" onclick=" show_enquiry_form(); "> Enquire about above items </li>';
    list += '</ul>';
    list += '</div>';
    new Insertion.Before('basket_locatinator', list );
    
}

function toggleBasketVisibility() {
	
    if ( $( 'enquiry_basket' ).visible() ) {
        $( 'last_enquiry_basket' ).hide();
        new Effect.SlideUp( 'enquiry_basket' );
    //		$( 'enquire' ).hide();
    }
    else {
        $( 'last_enquiry_basket' ).show();
        new Effect.SlideDown( 'enquiry_basket' );
    //		$( 'enquire' ).show();
    }
}

function showQty( id ) {
    $( 'qty_container_' + id ).show();
    $( 'qty_' + id ).focus()
}

function hideQty( id ) {
    recalculateBasket( id, 'remove' );
}

function removeItem( id ) {

    recalculateBasket( id, 'remove' );
	
}

function incrementBasketIteration() {
	
    iteration = $( 'basket_item_count' ).getValue();

    incrementation  =  parseInt( iteration ) + parseInt(1);
	
    $( 'basket_item_count' ).value = incrementation;
	
    return incrementation;
}

function decrementBasketIteration() {

//	iteration = $( 'basket_item_count' ).getValue();

//	decrementation  =  parseInt( iteration ) - parseInt(1);

//	$( 'basket_item_count' ).value = decrementation;
	
//	return decrementation;
}


function recalculateBasket( id, action ) {

    quantity = 'qty_' + id;
	
    if ( $( quantity ).getValue() > 0 ) {

        $( 'basket' ).show();

        if ( action == 'add' ) {
			
            if ( $( 'enquiry_basket_' + id ) ) {
                $( 'basket_qty_' + id ).innerHTML = $( quantity ).getValue() ;
				
                iteration_mapping = $( 'iteraion_mapping_' + id ).getValue();
                $( 'basket_quantity_' + iteration_mapping ).value = $( quantity ).getValue();
				
            }
            else {

                iteration = incrementBasketIteration();
                enquiry = null;
                values = null;
				
                enquiry_item = new Template( enquiry_li );
                values = {
                    part_id: id,
                    qty: $( quantity ).getValue(),
                    iteration: iteration
                };
				
                new Insertion.Before( 'last_enquiry_basket', enquiry_item.evaluate(values) );

            }
			
        }
        else if ( action == 'remove' ) {
		
            $( 'enquiry_basket_' + id ).remove();
			
            if ( $( 'qty_' + id ) ) {
                $( 'qty_' + id ).value = 1;
            }
			
            if ( $( 'enquire_' + id ) ) {
                $( 'enquire_' + id ).checked = false;
            }
			
            if ( $( 'qty_container_' + id ) ) {
                $( 'qty_container_' + id ).hide();
            }

            decrementBasketIteration();
        }

    }
    else { // there is no value, please add
        new Effect.Highlight( quantity );
        $( quantity ).focus();
    }

    item_count = $( 'enquiry_basket' ).childElements().size() - 2 ;
	
    $( 'display_basket_count' ).innerHTML = item_count;

}


function show_enquiry_form() {

    email_content = '';

    basket_items = $( 'basket_item_count' ).getValue();

    counter = 1;

    while ( basket_items >= counter )
    {

        quantity_field = 'basket_quantity_' + counter;
        part_number_field = 'basket_part_' + counter;
		
        if ( $( quantity_field ) ) {
		
            part_number = $( quantity_field ).getValue();
            quantity = $( part_number_field ).getValue();
		
            email_content += "Part number: " + quantity + "; quantity: " + part_number + "\n";
			
            quantity = null;
            quantity_field = null;
            part_number = null;
            part_number_field = null;
        }
        counter++;
    }
	
    $( 'message' ).value = email_content;
	
    $('light').setStyle({
        display: 'block'
    });
    $('fade').setStyle({
        display: 'block'
    });
}

Event.observe( 'name', 'blur', checkName );
function checkName() {
	
    value = $( 'name' ).getValue();
    if ( value.length == 0 ) {
        new Effect.Highlight( $( 'name' ) );
        $( 'name' ).setStyle({
            borderColor: 'red'
        });
        return 1;
    }
    else {
        $( 'name' ).setStyle({
            borderColor: '#999999'
        });
        return 0;
    }
}

Event.observe( 'email', 'blur', checkEmail );
function checkEmail() {
	
    value = $( 'email' ).getValue();
    if ( value.length == 0 ) { // add email format check, just in case
        new Effect.Highlight( $( 'email' ) );
        $( 'email' ).setStyle({
            borderColor: 'red'
        });
        return 1;
    }
    else {
        $( 'email' ).setStyle({
            borderColor: '#999999'
        });
        return 0;
    }
}

Event.observe( 'message', 'blur', checkMessage );
function checkMessage() {
	
    value = $( 'message' ).getValue();
    if ( value.length == 0 ) {
        new Effect.Highlight( $( 'message' ) );
        $( 'message' ).setStyle({
            borderColor: 'red'
        });
        return 1;
    }
    else {
        $( 'message' ).setStyle({
            borderColor: '#999999'
        });
        return 0;
    }
}

Event.observe( 'submit_enquiry', 'click', checkForm );
function checkForm() {
	
    errors = checkName() + checkEmail() + checkMessage();
	
    if ( errors == 0 ) {

        $('submit_enquiry').hide();
        $('processing_enquiry').show();

        new Ajax.Request('/ajax/electrocnicsComponentsQuery/',
        {
            method:'post',
            parameters: $('enquiry_form').serialize(true),
            onSuccess: function(transport){
			
                if ( transport.responseText == 'ok' ) {
                    displayConfirmation();
                }

            },
            onFailure: function(){
                alert('Something went wrong...')
            }
        });
    }
	
}

function displayConfirmation() {
    $('enquiry_form').remove();
    new Insertion.After('placeholder', 'Your enquiry was successfully processed.' );
    
}

function resetForm() {

    $('light').setStyle({
        display: 'none'
    });
    $('fade').setStyle( {
        display: 'none'
    });
                    
    $( 'results' ).remove();
    createPlaceholderForResults();
    $( 'basket' ).remove();
    createBasketPlaceholder();
    $( 'search' ).value = '';
    $( 'basket_item_count' ).value = 0;
	
}

function processSelection( id ) {

    if ( $('enquire_' + id).checked ) {
        showQty( id );
        recalculateBasket(id, 'add');
    }
    else {
        hideQty( id );
        recalculateBasket(id, 'remove');
    }

}


var template = new Template( '<li style=" display: block; height: 20px; clear: both; margin: 5px 0; padding-left: 10px;  width: 100%; background-color: #{color}; list-style: none; " > <span style="width: 130px; display: block; float: left;  "> #{item_id}</span> <span style=" display: block; float: left; padding-left: 10px; width: 500px; "> #{description} &nbsp; </span> <span style=" padding-left: 10px; "> RFQ <input type="checkbox" name="enquire" class="enquire_checkbox" id="enquire_#{item_id}" value="#{item_id} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #{description}" onClick="processSelection( \'#{item_id}\' )" > <span style=" display: none; " id="qty_container_#{item_id}" >QTY: <input type="text" name="qty" id="qty_#{item_id}" value="1" onblur=" recalculateBasket( \'#{item_id}\', \'add\' ) " style=" width: 25px; "> </span> </span> </li> ' );

var enquiry_li = '<li id="enquiry_basket_#{part_id}" style=" padding: 5px 0; "> <span style=" width: 150px; "> Part number: #{part_id}; </span> Quantity <span id="basket_qty_#{part_id}">#{qty}</span> <span> <img src="/images/icons/cancel.png" style=" cursor: pointer; " onclick=" removeItem( \'#{part_id}\' ); " > </span> <input type="hidden" id="basket_part_#{iteration}" value="#{part_id}"> <input type="hidden" id="basket_quantity_#{iteration}" value="#{qty}"> <input type="hidden" id="iteraion_mapping_#{part_id}" value="#{iteration}"> </li>';