// set this to false for production use
var products = null;

/**
 * jQuery: this is always called when the page DOM is
 * ready for manipulation
 */
$(document).ready(function()
{
    // pre-load products from xml file
    products = jQuery.load("products/products.xml");

    // show all products    
    $('#resultsWrapper').slideDown(1500);

    // fill the first combo with list of searchable categories
    $("#masterCombo").fillFromArray(SEARCHABLES, 0);

	if( $('#masterCombo').children().size() > 2 ) {
		$("#criteriaTable").show();	
	}

    // ensure all other combos are hidden
    $('.childrenCombo').hide();    
	
    // declare event handle to action apon clicking on
    // either compare buttons
    $(".compareButton a").click(
		function(event) {
        	return validateCompareSelection($(this));
    	}
	);

	// if the first combo is changed then execute this
    $("#masterCombo").change(function(event, data)
    {		
        //ANIMATE HIDE
        $("#childComboWrapper").hide();
        $("#resultsWrapper").hide();
		
        $(products).find('product').each(function()
        {
            $('#resultsInner').createProductRow($(this));
        });

		var value = "";
		
		if (data != undefined) {
			value = data;			
		} else {
			value = $(this).find(':selected').val();
		}

        $('.childCombo').remove();
        $('#childComboWrapper br.clear').remove();

        // only populate remaining combos if the user has actually selected something
        if (value != "Please Select")
        {        
            var childCombos = SEARCHABLES[value].slice(2, SEARCHABLES[value].length);
			
            // render empty child combos
            for (i=0; i<childCombos.length; i++)
            {
                $('#childComboWrapper').renderDropdown(childCombos[i], 'childCombo' + i, 'filterResults');
            }
            $(".childCombo").show();
			$('#childComboWrapper br.clear').remove();

            // use the products xml to populate the child combos
            $(products).find("product").filter(function()
            {           
            	if ( $(this).find("category").attr('id') == SEARCHABLES[value][1] )
            	{
            		return true;
            	}
            	else
            	{
            		return false;
            	}
            })
            .each(function()
            {
                for (i=0; i<childCombos.length; i++)
                {                   
                    var value = $(this).find("spec[@name='" + childCombos[i] + "']").text();
                    $("#childCombo" + i).appendOption(value, value, false);
                }
            });

            $('.childrenCombo').show();
			
            $("input[@name='compare']").click(function(event)
            {
                appendProductCodes($(this).attr('id'));
            });
			
            $('#resultsInner').filterResultsjQuery(products);
			
            //ANIMATE SHOW
            $("#childComboWrapper").slideDown("slow", function()
            {
                $('#resultsWrapper').slideDown(1500);
            });
        }
        // otherwise just hide them, but still show the search results
        else
        {
            //ANIMATE HIDE
            $("#childComboWrapper").slideUp("slow", function()
            {
                $('#resultsWrapper').slideDown(1500);
            });
            
        }
    });
	
	//Check how many products are in the master drop down and select the first if there's only one option
	var howManyMasterComboOptions = $("#masterCombo option").size() - 1;
	if (howManyMasterComboOptions == 1) {
		var lastOption = $("#masterCombo option:last").val();
		$(".parentCombo").hide();
		$("#childComboWrapper").css("float", "left");
		$("#masterCombo").trigger("change", new Array(lastOption));
	} else {
		$('#resultsInner').filterResultsjQuery(products);
	}
});


//$(window).load(function(){
//	$('img[@class="productImg"]').checkImages('images/productImages/small/default.jpg');
//});


/**
 * Does the filtering of products to display
 */
function filterResults()
{
    $("#resultsWrapper").hide();
    $("#resultsInner").filterResultsjQuery(products);
    $("#resultsWrapper").slideDown(1500);
};

/**
 * Appends the selected product code to the compare button,
 * so when the button is clicked on the codes are ready in place
 * @param code : product code to be appended
 */
function appendProductCodes()
{
    var url = 'compare.html?';

    $("input[@name='compare']").filter(":checked").each(function()
    {
        url += 'code=' + $(this).attr('id') + '&';
    });

    url = url.substring(0, url.length-1);

    $('#compareLink').attr('href', url);
    $('#compareLinkBottom').attr('href', url);
}

/**
 * Validates the selection of products to compare, first of all
 * it will check to ensure that either 2 or 3 products have been
 * selected. Next, it will ensure that only products from the same
 * range are selected.
 * @param ancor : the ancor element to validate
 * @return boolean : whether the product selection is valid or not
 */
function validateCompareSelection(ancor)
{
    // only add the product code to the URL if there's space		
    if ( ($(ancor).attr("href").split('&').length < 2) || ($(ancor).attr("href").split('&').length > 3) )
    {

        if ( ($(ancor).attr("href").split('&').length < 2) )
        {
            alert('Please select a minimum of 2 products to compare');
            return false;
        }

        if ( ($(ancor).attr("href").split('&').length > 3) )
        {
            alert('Please select a maximum of 3 products to compare');
            return false;
        }

        alert('Please select 2 or 3 products to compare');
        return false;
    }

    // check to ensure that chosen products belong to the same category
    var codes = $(ancor).attr("href").split('?')[1].split('&');
    var categories = new Array();
    var error = false;

    $(products).find("product").filter(function()
    {		
        for (i=0; i<codes.length; i++)
        {	
            if ( $(this).attr('code') == codes[i].split('=')[1] ) return true;
        }
        return false;


    }).each(function()
    {		
        var product = $(this);

        $(codes).each(function()
        {
            categories[categories.length] = $(product).find("category").attr("id");
        });

        for (i=0; i<categories.length; i++)
        {
            for (j=0; j<categories.length; j++)
            {		
                if ( categories[i] != categories[j] ) error = true;
            }
        }
    });

    if (error)
    {
        alert('Please ensure you select products from the same category');	
        return false;
    }
    
    return true;
}

/**
 * Generates the necessary HTML with the product XML and appends
 * it to the specified element.
 * @parent : parent element to attach the new html to 
 * @param productXML : the individual product xml block
 */
jQuery.fn.createProductRow = function(productXML)
{
        var html = '<div class="productWrapper clearfix">';

        var code = $(productXML).attr('code');
		var prodID = $(productXML).attr('id');
        var category = $(productXML).find("category").attr('id');

        html += '<img class="productType" src="_assets/images/categories/' + category + '.jpg" alt="This is a ' + category + ' product" />';
        html += '<div class="productImgWrapper">';
		html += '<img class="productImg" src="_assets/images/productImages/small/' + category + '/' + prodID + '.jpg" alt="Image of ' + code + '" />';
		html += '</div>';
	
        html += '<p class="productCode"><span>' + code + '</span><br/>' + prodID + '</p>';


        html += '<div class="specsWrapper">';

        $(productXML).find("specgroup").each(function()
        {			
                html += '<div class="specsGroup">';			

                var specs = $(this).find('spec').filter('spec[@display]').sort('display');

                html += '<ul>';

                $(specs).each(function()
                {
                        html += '<li class="clearfix"><span class="specTitle">' + $(this).attr('name') +  '</span><span class="spec">' + $(this).text() + '</span></li>';
                });

                html += '</ul>';

                html += '</div>';

        });

        html += '</div>';

        html += '<div class="linksWrapper">';
        html += '<ul>';
        html += '<li><a href="detail.html?code=' + prodID + '" class="more">more detail</a></li>';
        html += '<li><a href="javascript:powerDealerLocator(\'a\')" target="_top" class="more">where to buy</a></li>';
        html += '</ul>';
        html += '</div>';

        html += '<div class="compare"><input id="' + prodID + '" onclick="appendProductCodes()" type="checkbox" name="compare" /></div>';

        html += '</div>';

        $(this).append(html);
}

/**
 * Reads in all the criteria values chosen by the user
 * and applies them to the filter procedure to arrive at
 * a properly filtered list of products which are then
 * appended to the specified element.
 * @parent : the element to attach the results to
 * @param products : full list of products in XML format
 */
jQuery.fn.filterResultsjQuery = function(products)
{	
    var id = $(this);

    $(id).empty();
	
    var gardenProduct = $("#masterCombo").find(":selected").val();
    var filterCriteria = new Array();
	
    if ( $(".childCombo").is(':visible') )
    {
	$(".childCombo").each(function() 
	{
		var selectedOption = $(this).find("select").find(":selected").text();
		var selectedLabel = $(this).find("label").text();                               
		filterCriteria[filterCriteria.length] = new Array(selectedLabel,selectedOption);
	});
    }
    
    $(products).find("product").filter(function() 
    {
        var product = $(this);
	var show = new Array();		
               
        if ( (gardenProduct == undefined) || (gardenProduct == 'Please Select') || (gardenProduct == '') )
        {
            show[show.length] = "true";
        }
        else if ( SEARCHABLES[gardenProduct][1] != $(this).find("category").attr("id") )
        {
                return false;
        }	
                
        for (i=0; i<filterCriteria.length; i++)	
        {        
            if ( filterCriteria[i][1] == 'Please Select' )
            {
                show[show.length] = "true";
            }           
            else if ( filterCriteria[i][1] == $(product).find('specgroup').find('spec[@name="' + filterCriteria[i][0] + '"]').text() )
            {
                show[show.length] = "true";
            }                                
            else
            {
                show[show.length] = "false";
            }
	}

        if ($.howManyInArray("true", show) == show.length) return true;
        else return false;
			
    }).each(function()
    {
        $(id).createProductRow($(this));
    });		
}

 /**
 * Uses a plain string array to populate a dropdown
 * combo box.
 */
jQuery.fn.fillFromArray = function(array, index)
{
        $(this).appendOption("Please Select", "Please Select", true);
        for (i=0; i<array.length; i++) {
                $("#masterCombo").appendOption(i, array[i][index], false);
        }
}