/* 
    Overview:
	
	This code example allows the user to change the appearance of a web page(s) by selecting a
	different style sheet. If implemented on a website, you would include this in every page of
	the site. It saves the selection in a cookie, so each page retains the style selected.
    
    1) Page loads (window.onload): 
       Reads cookie from function readCookie("style") to see if a previous alternative style was
	   selected. If it was then it is set as the active style sheet by function
	   setActiveStyleSheet(). If not then the default style sheet is used (getPreferredStyleSheet).
       
    2) User clicks link to select alternative style sheet (setActiveStyleSheet):
       Alternative style is enabled as the active style sheet.
       
    3) Page unloads (window.onunload):  
       Saves the active style sheet (getActiveStyleSheet) to a cookie (createCookie).  

    disclaimer:  I did not write this code, but found many versions of this on the web.
                    
                 This particular version was found on the A List Apart website. It has
                 a complete explanation of the code:
    
                 http://www.alistapart.com/articles/alternate/
                
				 We have covered every concept in this example except reading and writing
				 cookies (createCookie(), readCookie()). Cookies are just small text files that
				 are written to your browsers cache.
				  
				 Remember: Each browser had its own cache location.
				 
				 Here is a simple guide to using cookies in JavaScript:
				 
				 http://developer.mozilla.org/en/docs/DOM:document.cookie
				 
	note:        The 2 drawbacks to this are obviously that:
	        
			     a) cookies are required
				 b) the style is changed AFTER the page is loaded so there will be a 
				    slight delay in the style change. Another alternative is to create
					a server-side style switcher. 
					
					An example of this would be:
					http://alistapart.com/articles/phpswitch/
*/  

// I wrote this to eliminate the inline event calls within HTML (separation of layers) 
function initSwitcher() {

    // Finds the links that are used to change styles (identified by title tag)
    
    var links = document.getElementsByTagName("a");
    
    for (var i=0; i < links.length; i++) { // loops through array
   
       if (links[i].getAttribute("title")) { // have a title attribute?
        
           links[i].onclick = function() { // setting onclick event of each node
              
                setActiveStyleSheet(this.getAttribute("title")); // in the node itself, so 'this' is used
            
                return false; // cancels default onclick behavior
           } 
	   }
    } 
}

// Enables the stylesheet that was selected last time (from cookie)
// First it disables all the stylesheet, then re-enables the one that was passed
function setActiveStyleSheet(title) {
 
    var i, a, main;
   
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     
       if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?;
           && a.getAttribute("title")) { // has a title attribute?
    
           // disable stylesheet
           a.disabled = true;
      
           // Matches the passed alternative style name?; if so re-enable it 
           if(a.getAttribute("title") == title) a.disabled = false;
       }
    }
}
 
// Gets the 'active' stylesheet that is defined in the HTML file  
function getActiveStyleSheet() {

  var i, a;
  
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  
     if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?
         && a.getAttribute("title") // has a title attribute
         && !a.disabled) { // and not disabled?
    
         return a.getAttribute("title");
     }
  }
  
  return null; // not found 
}

// Sets the default stylesheet (rel="stylesheet" NOT rel="alternate stylesheet"). 
// note: the main.css is your "sticky" stylesheet that will never be changed (no title attribute)
function getPreferredStyleSheet() {

  var i, a;

  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  
  	  // Returns default stylesheet with title attribute 
      if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?
      	 && a.getAttribute("rel").indexOf("alt") == -1 // is it NOT alternative style?
         && a.getAttribute("title"))  // does it have the title attribte present
       
         return a.getAttribute("title");
  }
  
  return null; // if no "link" elements found, return null
  
}

// Created by Peter-Paul Koch (http://www.quirksmode.org/)
function createCookie(name,value,days) {
  
  if (days) {
  
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    
  } else {
  
    expires = "";  
  }
    document.cookie = name+"="+value+expires+"; path=/"; 
}

// Created by Peter-Paul Koch (http://www.quirksmode.org/)
function readCookie(name) {

  var nameEQ = name + "=";
  var ca = document.cookie.split(';');

  for(var i=0;i < ca.length;i++) {
  
    var c = ca[i];
    
    while (c.charAt(0)==' ') {
    
        c = c.substring(1,c.length);
    
    }
    
    if (c.indexOf(nameEQ) == 0) {
    
        return c.substring(nameEQ.length,c.length);
    }
  
  }
  
  return null;
}

/****************** Functions for page load and unload ******************/

// Setting up links, and default stylesheets when loaded
window.onload = function() {
}



    var cookie = readCookie("style"); // name of cookie that would be saved
  
    // If cookie not set, get the preferred stylesheet defined in the HTML file
    var title = cookie ? cookie : getPreferredStyleSheet();  
    
    setActiveStyleSheet(title);


// Saving selected stylesheet (before closing browser or going to new web page)
window.onunload = function() {

    var title = getActiveStyleSheet();
    
    createCookie("style", title, 365); // 365 day cookie
}