/* 

	List Expander 
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	
*/

this.listexpander = function(){
	
	// edit 
	
	var expandTo = 1; // level up to which you want your lists to be initially expanded. 1 is minimum
	var expandText = "Expand All"; // text for expand all button
	var collapseText = "Collapse All"; // text for collapse all button		
	var listClass = "listexpander" // class name that you want to assign to list(s). If you wish to change it make sure to update the css file as well  
	
	// end edit (do not edit below this line)
	
	this.start = function(){
		var ul = document.getElementsByTagName("ul");
		for (var i=0;i<ul.length;i++){
			if(ul[i].className == listClass){
				create(ul[i]);
				buttons(ul[i])
			};
		};
	};

	this.create = function(list) {	
		var items = list.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){
			listItem(items[i]);
		};
	};	

	this.listItem = function(li){
		if(li.getElementsByTagName("ul").length > 0){
			var ul = li.getElementsByTagName("ul")[0];
			ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
			li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
			li.over = true;	
			ul.onmouseover = function(){li.over = false;} 
			ul.onmouseout = function(){li.over = true;} 
			li.onclick = function(){
    			
				if(this.over){
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";	
							
				}
				
			    var ulid = ul.id; //function added to control images via list title (on/off)
			    if (ulid == "ul1") {
			        changeclass('pic1','1');
    			}
    			else if (ulid == "ul2") {
			        changeclass('pic2','2');
      			}
    			else if (ulid == "ul3") {
			        changeclass('pic3','3');
    			}
    			else if (ulid == "ul4") {
			        changeclass('pic4','4');
    			}
    			else {
       				changeclass(7);      			
    			} //end function				
				;
			};
		};		
	};	
	
	this.buttons = function(list){
		var parent = list.parentNode;
		var p = document.createElement("p");
		p.className = listClass;
		var a = document.createElement("a");
		a.innerHTML = expandText;
		a.onclick = function(){expand(list); changeclass(5);};
		p.appendChild(a);
		var a = document.createElement("a");
		a.innerHTML = collapseText;
		a.onclick = function(){collapse(list); changeclass(6);};
		p.appendChild(a);
		parent.insertBefore(p,list);
	};
	
	this.expand = function(list){
		li = list.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			if(li[i].getElementsByTagName("ul").length > 0){
				var ul = li[i].getElementsByTagName("ul")[0];
				ul.style.display = "block";
				li[i].className = "expanded";
			};
		};
	};
	
	this.collapse = function(list){
		li = list.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			if(li[i].getElementsByTagName("ul").length > 0){
				var ul = li[i].getElementsByTagName("ul")[0];
				ul.style.display = "none";
				li[i].className = "collapsed";
			};
		};
	};
	
	this.depth = function(obj){
		var level = 1;
		while(obj.parentNode.className != listClass){
			if (obj.tagName == "UL") level++;
			obj = obj.parentNode;
		};
		return level;
	};	
	
	start();
	
};

window.onload = listexpander;

// Control to open listexpander items if images are selected (onclick)

function clickImage(imageNo) {
        if (imageNo == 1) {
            document.getElementById('li1').className = "expanded";
            document.getElementById('ul1').style.display = "";
            document.getElementById('li2').className = "collapsed";
            document.getElementById('ul2').style.display = "none";
            document.getElementById('li3').className = "collapsed";
            document.getElementById('ul3').style.display = "none";       
            document.getElementById('li4').className = "collapsed";
            document.getElementById('ul4').style.display = "none";                                  
        }
        if (imageNo == 2) {
            document.getElementById('li1').className = "collasped";
            document.getElementById('ul1').style.display = "none";
            document.getElementById('li2').className = "expanded";
            document.getElementById('ul2').style.display = "";
            document.getElementById('li3').className = "collapsed";
            document.getElementById('ul3').style.display = "none";       
            document.getElementById('li4').className = "collapsed";
            document.getElementById('ul4').style.display = "none";                                  
        }        
        if (imageNo == 3) {
            document.getElementById('li1').className = "collasped";
            document.getElementById('ul1').style.display = "none";
            document.getElementById('li2').className = "collapsed";
            document.getElementById('ul2').style.display = "none";
            document.getElementById('li3').className = "expanded";
            document.getElementById('ul3').style.display = "";       
            document.getElementById('li4').className = "collapsed";
            document.getElementById('ul4').style.display = "none";                                  
        }       
        if (imageNo == 4) {
            document.getElementById('li1').className = "collasped";
            document.getElementById('ul1').style.display = "none";
            document.getElementById('li2').className = "collapsed";
            document.getElementById('ul2').style.display = "none";
            document.getElementById('li3').className = "collapsed";
            document.getElementById('ul3').style.display = "none";       
            document.getElementById('li4').className = "expanded";
            document.getElementById('ul4').style.display = "";                                  
        }   
}
function changeclass(pictureId, pictureNo) { 
    // David Grace - 22 Feb 2008
    if (document.getElementById(pictureId)) {
        if (document.getElementById("ul"+pictureNo).style.display == "block" || document.getElementById("ul"+pictureNo).style.display == "") {
            document.getElementById(pictureId).className="hover"+pictureNo; // Set Current Picture Id to coloured.
        }
        else if (document.getElementById("ul"+pictureNo).style.display == "none") {
            document.getElementById(pictureId).className="pic"+pictureNo; // Set Current Picture Id to black and white.       
        }
    }
    
    // First Picture
    if (pictureNo != "1") {
        // If Id is being passed through is NOT pic1
        if (document.getElementById("ul1").style.display == "none") {
            // If bullet point not being shown, make first picture black and white.
            document.getElementById("pic1").className="pic1";
        }
        else if (document.getElementById("ul1").style.display == "block" || document.getElementById("ul1").style.display == "") {
            // If bullet point is being shown, make first picture colourful.
            document.getElementById("pic1").className="hover1";
        }
    }

    // Second Picture
    if (pictureNo != "2") {
        // If Id is being passed through is NOT 'pic2'
        if (document.getElementById("ul2").style.display == "none") {
            // If bullet point not being shown, make second picture black and white.
            document.getElementById("pic2").className="pic2";
        }
        else if (document.getElementById("ul2").style.display == "block" || document.getElementById("ul2").style.display == "") {
            // If bullet point is being shown, make second picture colourful.
            document.getElementById("pic2").className="hover2";
        }
    }
    
    // Third Picture
    if (pictureNo != "3") {
        // If Id is being passed through is NOT 'pic3'
        if (document.getElementById("ul3").style.display == "none") {
            // If bullet point not being shown, make third picture black and white.
            document.getElementById("pic3").className="pic3";
        }
        else if (document.getElementById("ul3").style.display == "block" || document.getElementById("ul3").style.display == "") {
            // If bullet point is being shown, make third picture colourful.
            document.getElementById("pic3").className="hover3";
        }
    }    
    
    // Fourth Picture
    if (pictureNo != "4") {
        // If Id is being passed through is NOT 'pic4'
        if (document.getElementById("ul4").style.display == "none") {
            // If bullet point not being shown, make fourth picture black and white.
            document.getElementById("pic4").className="pic4";
        }
        else if (document.getElementById("ul4").style.display == "block" || document.getElementById("ul4").style.display == "") {
            // If bullet point is being shown, make fourth picture colourful.
            document.getElementById("pic4").className="hover4";
        }
    }        

}