function ProdSelector(){

    /** VARIABLES */
    this.product_xml;
    this.prodselect_div = document.getElementById('prod_selector');
    this.trigger_img = document.getElementById('trigger_arrow');
    this.stage_container = document.getElementById('stage_container');
    this.my_state = "hidden";

    /** ASSIGNMENTS */
    this.init = init;
    this.handleXML = handleXML;
    this.reveal = reveal;
    this.changeTriggerImg = changeTriggerImg;
    this.selectProdType = selectProdType;
    this.clearStage = clearStage;

    //run init
    this.init();

    /** FUNCTIONS */

    //get XML for products
    function init(){
	var ajax = new Ajax.Request("xml/homepage.xml", {method: "get", onSuccess: function(t){ProdSelector.handleXML(t)}, onFailure: function(error) { alert(error.status); alert(error.statusText); }, onException: function(o, e) { throw(e); }, parameters: {differentiator: Math.floor(Math.random()*50000)}    });

    }



    //set xml obj as local var
    function handleXML(t){
	ProdSelector.product_xml = t.responseXML;

    }

    //select a product type
    function selectProdType(type){
	//get products
	var products;
	var sections = this.product_xml.getElementsByTagName("section");
	for(i = 0; i < sections.length; i++){
	    if(sections[i].getAttribute('name') == type){
		products = sections[i].getElementsByTagName('product');
	    }
	}
	//empty out stage
	this.clearStage();
	//iterate through products and create divs
	for(i = 0; i < products.length; i++){
	    //container
	    var container = document.createElement('div');
	    container.className = "prod_container";
	    container.id = "container_" + i;
	    //product image and append to container
	    var img_div = document.createElement('img');
	    img_div.className = "prod_img";
	    img_div.src = products[i].getAttribute('src');
	    var img_link = document.createElement('a');
	    img_link.setAttribute('href', products[i].getAttribute('href'));
	 	img_link.appendChild(img_div);
	    container.appendChild(img_link);
	    //product name/link and append to container
	    var name_div = document.createElement('div');
	    name_div.className = "prod_name";
	    var name_link = document.createElement('a');
	    name_link.innerHTML = products[i].getAttribute('name');
	    name_link.setAttribute('href', products[i].getAttribute('href'));
	    name_div.appendChild(name_link);
	    container.appendChild(name_div);
	    //append container to stage container
	    this.stage_container.appendChild(container);
	    
	    new Tip("container_" + i, products[i].getAttribute('tip'), { offset:{x:-28, y:-95 } });
	}
		//adding selected style to selected element	
		elem = document.getElementById(type);
		elem.className = elem.className + " selected_prod";
		document.getElementById(type + "_img").src = "images/bkrnds/" + type + "_selected.jpg";
		document.getElementById(type + "_arrow").className = "nav_arrow";
    }

    function clearStage(){
		this.stage_container.innerHTML = "";

		//clearing white backgrounds
		options = new Array("frequent", "occasional", "oily", "sensitive", "blackheads");
		for(i = 0; i < options.length; i++) {
			elem = document.getElementById(options[i]);
			elem.className = elem.className.replace(/\ selected_prod/, '');
			arrow = document.getElementById(options[i] + "_arrow");
			arrow.className = "hidden";
			document.getElementById(options[i] + "_img").src = "images/bkrnds/" + options[i] + ".jpg";
		}
    }

    // animate UP the product selector
    function reveal(){
	//animate product selector UP only if it's not already up
	if(this.my_state == "hidden"){
	    new Effect.Move(this.prodselect_div, {duration: 1, x: 0, y: -140});
	    this.my_state = "reveal";
	    this.changeTriggerImg();
	    this.stage_container.innerHTML = "<img src=\"images/bkrnds/at_rest.jpg\" alt=\"\" border=\"0\" />";
	} else {
	    new Effect.Move(this.prodselect_div, {duration: 1, x: 0, y: 140});
	    this.my_state = "hidden";
	    this.changeTriggerImg();
	    this.clearStage();
	}
    }

    //change the arrow 
    function changeTriggerImg(){
	var src;
	if(this.my_state == "reveal"){
	    src = "images/down_arrow.jpg";
	} else {
	    src = "images/up_arrow.jpg";
	}
	
	this.trigger_img.src = src;
    }

    //iterate through XML and build out product images and text
    function buildProducts(){

    }

}