// stretch middle content area to 100% height of the browser window
// (tiles will only show on left and right sides of content)

// Return the available content height space in browser window
function getInsideWindowHeight() {
		if (document.images) {
        var isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
    }
    if (window.innerHeight) {
        return window.innerHeight;
    } else if (isIE6CSS) {
        // measure the html element's clientHeight
        return document.body.parentElement.clientHeight
    } else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}

// getScrollHeight()
//
// Written by: Moshe Moskowitz
// http://www.codehouse.com/javascript/articles/scroll_area/

function getScrollHeight()
{
   var h = window.pageYOffset ||
           document.body.scrollTop ||
           document.documentElement.scrollTop;
           
   return h ? h : 0;
}

window.onload = height_stretch;
window.onresize = height_stretch;



// this stretches the white content area so that it
// spans 100% of the browser screen height
function height_stretch() {
	
	var body_top_padding  = 16;
	var page_top_padding = 16;
	
	var client_height = getInsideWindowHeight() + getScrollHeight() - page_top_padding - body_top_padding;
	var new_height = client_height + 'px';
	var div = document.getElementById('main_page');
	Element.extend(div);
	div.setStyle({ 'height': new_height});

}


// replace product attribute dropdown <select>
// with buttons

function build_superattribute_buttons(superattribute_id) {
	// hide the original <select> element that magento generates
	// and get info about it, including its <option> elements
	var sizes = $(superattribute_id).childElements();
	var value_selected = $F(superattribute_id);
	
	$(superattribute_id).hide();
	
	// build a <button> element to correspond with each attribute <option> found
	sizes.each(function(item, index) {
		if (index > 0) {
	 		var id = item.value;
	 		var title = item.innerHTML;
	 		//var onclick = "update_superattribute('" + superattribute_id + "', " + index + ")";
	 		var onclick = "";
	 		var elem_id = "attr_button" + index;
	 		
	 		if (index != 0) {
	 			var button = new Element('button', { 'type':'button', 'value': id, 'id': elem_id, 'class': 'button_attribute', 'title': title, 'onclick': onclick }).update(title);
	 			$(superattribute_id).insert({ before: button });
	 		}
	 		
	 		document.getElementById(elem_id).onclick = function(){
	 			update_superattribute(superattribute_id, index);
			}
 		}  
	});	

	
	// set initial state for selected <option>; once other
  // options are selected, this function will be called
  // from a corresponding onclick attribute for that <button>
	update_superattribute(superattribute_id, 1);  
}

// helper function for above

function update_superattribute(id, index) {	
	$(id).selectedIndex = index;
	var value_selected = $F(id);
		
	// find corresponding buttons, unhighlight all of them,
	// then highlight the active one only
	//$('product-options-wrapper').childElements('button').each(function(item, i){
	$(id).up().childElements('button').each(function(item, i){
		if (item.tagName == 'BUTTON') {
			item.removeClassName('button-selected');
			if (item.value == value_selected) {
				item.addClassName('button-selected');
			}
		}
	});
	return false;
}


// these two functions are used on the Store Locator
// page, to hide and show stores for particular regions

function hide_all_stores() {
  var stores = $$('div.store_locations');
  
  for(var i=0; i<stores.length; i++){
		stores[i].hide();
	}
}

function show_store() {
	var val = $('store_selection').value;
	
	if (val != '') {
    hide_all_stores();
    $(val).show();
  }
}


// used on the DIY Projects page only;
// show selected project subcategory's <div>
// but hide all other <div>s	    

function show_project_category(id) { 	

	var subcategories = $$('div.subcategory_projects, .project_nav_item ul');
	for(var i=0; i<subcategories.length; i++){
		subcategories[i].hide();
	}
	$(id).setStyle({ 'display': 'block' });
	
	var nav_show = '#' + id + '-nav ul';
	var projects_show = '#' + id + ' ' + 'div.project';
	var preview_show = '#' + id + ' ' + 'div.project-preview';
	var projects = $$(projects_show + ', ' + preview_show + ', ' + nav_show);
	for(var i=0; i<projects.length; i++){
		projects[i].setStyle({ 'display': 'block' });
	}
	
	var nav = $$('.project_nav_item');
	for(var i=0; i<nav.length; i++){
		nav[i].removeClassName('active');
	}
	
	var nav_active = id + '-nav';
	$(nav_active).addClassName('active');
	
	var content_hide = '#' + id + ' ' + 'div.project-content';
	var content = $$(content_hide);
	for(var i=0; i<content.length; i++){
		content[i].hide();
	}
	return false;
}


// the following 4 functions are used on the DIY Projects page only;
// show selected project, turn off its preview block
// and hide all other project content (except for their preview blocks)
	
function show_project(id) {
	
	var show_content = '#' + id + ' ' + 'div.project-content';
	
	var content = $$('div.project');
	for(var i=0; i<content.length; i++){
		content[i].hide();
	}
	
	$(id).show();
	
	var content = $$(show_content);
	for(var i=0; i<content.length; i++){
		content[i].setStyle({ 'display': 'block' });
	}
	
	var preview_hide = '#' + id + ' ' + 'div.project-preview';
	var preview = $$(preview_hide);
	for(var i=0; i<preview.length; i++){
		preview[i].hide();
	}	
	return false;
}

function project_nav_init() {
	var subcategories = $$('.project_nav_item .project_nav_link a');
	for(var i=0; i<subcategories.length; i++){
		subcategories[i].observe("mouseover", handle_project_mouseover);
		//subcategories[i].observe("mouseout", handle_project_mouseout);
	}
}

function handle_project_mouseover(event) {
	var element = Event.element(event);
	var subcat = element.up(1).id.replace('-nav', '');
	show_project_category(subcat);
}

function handle_project_mouseout(event) {
	if (project_state == 0) {
		var element = Event.element(event);
		var nav = element.up(1).id;
		$(nav).removeClassName('active');
		nav_child = '#' + nav + ' ul';
		var subnav = $$(nav_child);
		for(var i=0; i<subnav.length; i++){
			subnav[i].hide();
		}
	}
}