////////////////////////////// Colour Functions /////////////////////////////////////
    //Convert a hex value to its decimal value - the inputed hex must be in the
    // format of a hex triplet - the kind we use for HTML colours. The function
    // will return an array with three values.
    function hex2num(hex) {
     if(hex.charAt(0) == "#") {
      hex = hex.slice(1);
     }
     hex = hex.toUpperCase();
     var hex_alphabets = "0123456789ABCDEF";
     var value = new Array(3);
     var k = 0;
     var int1,int2;
     for(var i=0;i<6;i+=2) {
      int1 = hex_alphabets.indexOf(hex.charAt(i));
      int2 = hex_alphabets.indexOf(hex.charAt(i+1));
      value[k] = (int1 * 16) + int2;
      k++;
     }
     return(value);
    }
    //Give a array with three values as the argument and the function will return
    // the corresponding hex triplet.
    function num2hex(triplet) {
     var hex_alphabets = "0123456789ABCDEF";
     var hex = "#";
     var int1,int2;
     for(var i=0;i<3;i++) {
      int1 = triplet[i] / 16;
      int2 = triplet[i] % 16;

      hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2);
     }
     return(hex);
    }

    //Function that fades the color.
    //Arguments...
    //id  - ID of the element whose colour must be faded.
    //start_hex - The initial color of the element.
    //stop_hex - The final color. The element will fade from the initial color to the final color.
    //difference- The colour values will be incremented by this number
    //delay  - The speed of the the effect - higher delay means slower effect.
    //color_background- The fade must be for the color of the element or for its background.
    //      Allowed values are 'c'(Color of element) and 'b'(Background)
    //
    // fadeColor by Binny V A:
    // http://binnyva.blogspot.com/2006/02/color-fade-effect-using-javascript.html
    //
    function fadeColor(id,start_hex,stop_hex,difference,delay,color_background) {
     //Default values...
     if(!difference) difference = 20;
     if(!delay) delay = 100;
     if(!start_hex) start_hex = "#FFFFFF";
     if(!stop_hex) stop_hex = "#000000";
     if(!color_background) color_background = "c";

     var ele = document.getElementById(id);
     if(!ele) return;
     var start= hex2num(start_hex);
     var stop = hex2num(stop_hex);

     //Make it numbers rather than strings.
     for(var i=0;i<3;i++) {
      start[i] = Number(start[i]);
      stop[i] = Number(stop[i]);
     }

     //Morph one colour to the other. If the start color is greater than the stop colour, start color will
     // be decremented till it reaches the stop color. If it is lower, it will incremented.
     for(var i=0;i<3;i++) {
      if (start[i] < stop[i]) {
       start[i] += difference;
       if(start[i] > stop[i]) start[i] = stop[i];//If we have overshot our target, make it equal - or it won't stop.
      }
      else if(start[i] > stop[i]) {
       start[i] -= difference;
       if(start[i] < stop[i]) start[i] = stop[i];
      }
     }

     //Change the color(or the background color).
     var color = "rgb("+start[0]+","+start[1]+","+start[2]+")";
     if(color_background == "b") {
      ele.style.backgroundColor = color;
     } else {
      ele.style.color = color;
     }

     //Stop if we have reached the target.
     if((start[0] == stop[0]) && (start[1] == stop[1]) && (start[2] == stop[2])) return;

     start_hex = num2hex(start);
     //Keep calling this function
     window.setTimeout("fadeColor('"+id+"','"+start_hex+"','"+stop_hex+"',"+difference+","+delay+",'"+color_background+"')",delay);
    }

window.onload = function () {
  /* categories stores all the filter categories that can be selected */
  var categories = document.getElementById('CategoryMenu').getElementsByTagName('li');

  /* divContainers stores all the div tags that _could_ contain a project entry */
  var divContainers = document.getElementById('ProjectList').getElementsByTagName('div');
  /* divContainerName is used to specifically select the div containers
     inside divContainers that actually do contain a project entry. (Kind of an odd way
     of doing this, now that I look at this later) */
  var divContainerName = "container";

  /* This is the header tag on the page that will change based on the filter selected */
  var projHeading = document.getElementById('ProjectsHeading');

  var highlightColor = "#82D9BC";
  var itemHighlightColor = "#CBE2F0";
  var allHighlightColor = "#33A681";

  /* Set the highlight (background) for the first filter category item, which should
     be All Projects. */
  document.getElementById('CategoryMenu').getElementsByTagName('li')[0].style.background = highlightColor;

  /* Set all the filter category items to run showCollection on click */
  for (i=0; i<categories.length; i++) {
      categories[i].onclick = showCollection;
  }

  function showCollection() {
      var showRow;
      var keyValue = this.getAttribute("title");
      var reAll = new RegExp("All", "i");

      this.style.background = highlightColor;

      /* Change project header to reflect the name of the current filter */
      if (reAll.test(keyValue)) {
        projHeading.removeAttribute("style");
        projHeading.innerHTML = "Showing: All Projects";
      } else {
        projHeading.style.background = highlightColor;
        projHeading.innerHTML = "Showing: " + this.innerHTML + " Projects";
      }

      /* Cycle through categories and remove highlight for all but the
         currently selected. */
      for (i=0; i<categories.length; i++) {
        if (categories[i].getAttribute("style") && categories[i] != this) {
              categories[i].removeAttribute("style");
          }
      }

      /* "All Projects" was selected. */
      if (reAll.test(keyValue)) {
          for (iRow=0; iRow<divContainers.length; iRow++) {
            /* if the current div is a project entry */
            if (divContainers[iRow].className == divContainerName) {
              divContainers[iRow].getAttribute("style");
              divContainers[iRow].removeAttribute("style");
              var listItems = divContainers[iRow].getElementsByTagName('li');
              for (i=0; i<listItems.length; i++) {

                /* CHROME COMPATIBILITY - The getAttribute method must be run
                   before removeAttribute to work within Chrome.
                   Otherwise, Chrome does not update the page to reflect that
                   the style attribute was removed (and then revert to the
                   computed style). */
                listItems[i].getAttribute("style");
                listItems[i].removeAttribute("style");

              }
            }
          }
      } else {
        var reFeature = new RegExp(keyValue, "i");
        for (iRow=0; iRow<divContainers.length; iRow++) {
            /* Check that the div container class name is a project entry
               before doing anything with it. */
            if (divContainers[iRow].className == divContainerName) {

			  showRow = false;

              /* Highlight the bullets in the project entry that contain
                 a key word. */
			  var lists = divContainers[iRow].getElementsByTagName('ul');
			  for (iList=0; iList<lists.length; iList++) {
				  if (lists[iList].className == "catList") {
					  var listItems = lists[iList].getElementsByTagName('li');

					  for (iItem=0; iItem<listItems.length; iItem++) {
						  if ( reFeature.test(listItems[iItem].innerHTML) ) {
							  showRow = true;
							  listItems[iItem].style.background = itemHighlightColor;
						  } else {
                               /* CHROME COMPATIBILITY - getAttribute before
                                  removeAttribute */
                              listItems[iItem].getAttribute("style");
							  listItems[iItem].removeAttribute("style");
						  }
					  }
				  }
			  }

			  if (showRow) {
                  /* CHROME COMPATIBILITY - getAttribute before removeAttribute */
                  divContainers[iRow].getAttribute("style");
				  divContainers[iRow].removeAttribute("style");
			  } else {
				  divContainers[iRow].style.display = "none";
			  }
		  }
      }
    }
    fadeColor("ProjectList","#D9D9D9","#FFFFFF",5,100,"b");
  }

}