var options = [];
var lastThumb = null;
var thumbSpeed = "fast"; // Options: slow, normal, fast
var xml = null;

// INITIALIZATION
$(document).ready(function() {
	adjustPrice();
	$.ajax({
	    type: "GET",
	    url: xmlPath,
	    dataType: "xml",
	    success: function(data) {
	    	xml = data;
	    	displayOptions1();
	    	displayOptions2();
	    }
	});
});

// UTILITIES	 
function formatAsMoney(mnt) {
    mnt -= 0;
    mnt = (Math.round(mnt*100))/100;
    return (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
}
String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g,"");
}    
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

// PRICE FUNCTIONS
function adjustPrice(){
    total = price;
    window.status = total;
    var html = "<table cellspacing='0' cellpadding='0' border='0'>\n";
    html += "<tr><td colspan='2'><div class='divider'>&nbsp;</div></td></tr>\n";
    var i = 1;
    $.each(options, function(index, value){
        var itemImage = $("#"+value+"Img").attr("src");
        var itemLabel = $("#"+value+"Label").html();
        var itemName = $("#"+value+"Name").attr("value");
        var itemPrice = $("#"+value).attr("value");
        if(itemLabel != "Standard" && itemLabel != "standard"){
        	total = total + parseFloat(itemPrice);
        	html += "<tr>\n";
        	html += "<td><img src='"+itemImage+"' width='20'/></td>\n";
        	html += "<td style='padding-left:8px;'>\n";
        	html += itemLabel;
        	html += "<input type='hidden' name='option"+i+"_name' value='"+escape(itemName)+"'/>\n";
        	html += "<input type='hidden' name='option"+i+"_price' value='"+escape(itemPrice)+"'/>\n";
        	html += "</td>\n";
        	html += "</tr>\n";
        	html += "<tr><td colspan='2'><div class='divider'>&nbsp;</div></td></tr>\n";
        	i++;
        }
    });
    html += "</table>\n";
    $("#myOptions").html(html);
    $("#myTotal").html("$"+formatAsMoney(total));
}
function toggleOption(id){
    if($.inArray(id, options) == -1){
        addOption(id); 
    }else{
        removeOption(id);
    }
    adjustPrice();
}
function addOption(id){
    options[options.length] = id; 
}
function removeOption(id){
    options.remove($.inArray(id, options));
}
function setCatOption(id,cat){
	var catValue = $('#'+cat+'Selected').val();
	if(catValue != ""){
		removeOption(catValue);
	}
	$('#'+cat+'Selected').attr("value",id);
	addOption(id);
	adjustPrice();
}


// IMAGE FUNCTIONS
function select(id){
	$("#"+id).attr("checked","checked");
}
var thumbs = [];
var mode = null;
function grow(me){
	if($.inArray(me, thumbs) < 0 && lastThumb != me && mode != "shrink"){
		lastThumb = me;
		var height = "54px";
		var width = "54px";
		mode = "shrink";
		$("#"+me).animate({"height":height,"width":width},thumbSpeed,shrinkThumbs);
	}
}
function shrinkThumbs(){
	if($.inArray(lastThumb, thumbs) < 0){
		thumbs[thumbs.length] = lastThumb;
	}
	if(thumbs.length > 1){
		for(var i=0; i<thumbs.length; i++){
			shrink(thumbs[i]);
		}
	}
	if(thumbs.length == 1){
		mode = null;
	}
}
function shrink(me){
	if(lastThumb != null && lastThumb != me){
		var height = "20px";
		var width = "20px";
		$("#"+me).animate({"height":height,"width":width},thumbSpeed);
		thumbs.remove($.inArray(me, thumbs));
	}
}

// DISPLAYS COLUMN 1
function displayOptions1(){
	if(xml != null){
		var output = "";
		var catCount = $(xml).find('categories').length;        
		var i = 1;            
	    $(xml).find('categories').each(function(){
	    	if(i <= catCount - 2){
		    	var catId= "cat"+i;
		        var catName = $(this).attr('name');
		        output += "<input type='hidden' id='"+catId+"Selected' name='"+catId+"Selected' value=''/>";
		        output += "\n<li><h1>"+catName+"</h1>\n\t<ul>";
		        var count = 1;
		        var id = catId+"-0";
		        output += "\n\t\t<li><input id='"+id+"' type='radio' name='"+catId+"' onclick=\"javascript: setCatOption('"+id+"','"+catId+"');\" value='0' checked='checked'/><label id='"+id+"Label' for='"+id+"'>Standard</label></li>";
		        $(this).find('item').each(function(){
		            var itemName = $(this).attr('name').trim();
		            if(itemName != "Standard" && itemName != "standard" && itemName != "None" && itemName != "none"){
		                var itemPrice = $(this).attr('price');
		                var id = catId+"-"+count;
		                output += "\n\t\t<li><table cellpadding='0' cellpadding='0' border='0'>";
		                output += "<tr><td valign='top'>";
		                output += "<input id='"+id+"' type='radio' name='"+catId+"' onclick=\"javascript: setCatOption('"+id+"','"+catId+"');\" value='"+itemPrice+"'/>";
		                output += "<input type='hidden' id='"+id+"Name' name='"+catId+"Name' value='"+itemName+"'/>";
		                output += "</td><td valign='top'>";
		                output += "<img class='thumb' id='"+id+"Img' onclick=\"javascript: select('"+id+"');setCatOption('"+id+"','"+catId+"');\" onmouseover=\"javascript: grow('"+id+"Img')\" src='images\/options\/"+itemName+".png' width=\"20\"/>";
		                output += "</td><td valign='top'>";
		                output += "<label id='"+id+"Label' for='"+id+"' onmouseover=\"javascript: grow('"+id+"Img')\">"+itemName +" $" +itemPrice+"</label>";
		                output += "</td></tr></table></li>";
		                count++;
		            }
		        });
		        output += "\n\t</ul>\n</li>";
		        i++;
			}
	    });
        //document.write("<xmp>"+output+"</xmp>");
        $('<ul></ul>').html(output).appendTo('#options1');
	}
}

// DISPLAYS COLUMN 2
function displayOptions2(){
	if(xml != null){
		var output = "";
		var catCount = $(xml).find('categories').length;        
		var i = 1;            
	    $(xml).find('categories').each(function(){
	    	if(i > catCount - 2){
		    	var catId= "cat"+i;
		        var catName = $(this).attr('name');
		        output += "<input type='hidden' id='"+catId+"Selected' name='"+catId+"Selected' value=''/>";
		        output += "\n<li><h1>"+catName+"</h1>\n\t<ul>";
		        
		        // CAT DESCRIPTIONS
		        if(i == (catCount - 1)){
					output += "<h2>Crown Seating Standard Color Guide</h2>";
					output += "<h3>(Accuracy of color swatches dependent on individual to monitor settings)</h3>";
		        }else if(i == catCount){
					output += "<h2>Crown Seating Upholstery Selections Color Guide</h2>";
					output += "<h3>(Accuracy of color swatches dependent on individual to monitor settings)</h3>";
		        }
		        
		        var count = 1;
		        var id = catId+"-0";
		        output += "\n\t\t<li><input id='"+id+"' type='radio' name='"+catId+"' onclick=\"javascript: setCatOption('"+id+"','"+catId+"');\" value='0' checked='checked'/><label id='"+id+"Label' for='"+id+"'>Standard</label></li>";
		        $(this).find('item').each(function(){
		            var itemName = $(this).attr('name').trim();
		            if(itemName != "Standard" && itemName != "standard" && itemName != "None" && itemName != "none"){
		                var itemPrice = $(this).attr('price');
		                var id = catId+"-"+count;
		                output += "\n\t\t<li><table cellpadding='0' cellpadding='0' border='0'>";
		                output += "<tr><td valign='top'>";
		                output += "<input id='"+id+"' type='radio' name='"+catId+"' onclick=\"javascript: setCatOption('"+id+"','"+catId+"');\" value='"+itemPrice+"'/>";
		                output += "<input type='hidden' id='"+id+"Name' name='"+catId+"Name' value='"+itemName+"'/>";
		                output += "</td><td valign='top'>";
		                output += "<img class='thumb' id='"+id+"Img' onclick=\"javascript: select('"+id+"');setCatOption('"+id+"','"+catId+"');\" onmouseover=\"javascript: grow('"+id+"Img')\" src='images\/options\/"+itemName+".png' width=\"20\"/>";
		                output += "</td><td valign='top'>";
		                output += "<label id='"+id+"Label' for='"+id+"' onmouseover=\"javascript: grow('"+id+"Img')\">"+itemName +" $" +itemPrice+"</label>";
		                output += "</td></tr></table></li>";
		                count++;
		            }
		        });
		        output += "\n\t</ul>\n</li>";   
			}
			i++;
	    });
        //document.write("<xmp>"+output+"</xmp>");
        $('<ul></ul>').html(output).appendTo('#options2');
	}
}