// © Copyright Kenny Grant 2007 
// Released under the BSD licence
// Choose alternative styles via links in the document

// Requires Prototype and lib/cookie.js
// Note cookie management doesn't work for safari locally


/*
A possible improvement would be to allow subdomains for titles, so that we have sets of stylesheets
e.g.
colour-red

text-small
text-large


example list of css links (must have rel="alternate[sic] stylesheet" )

<link type="text/css" media="all" rel="stylesheet" href="stylesheets/colours/colour-red.css" title="colour-red">
		

<!-- alternative styles -->
<link type="text/css" media="all" rel="alternate stylesheet" href="stylesheets/colours/colour-brown.css?version=335" title="colour-brown">
<link type="text/css" media="all" rel="alternate stylesheet" href="stylesheets/colours/colour-cyan.css?version=335" title="colour-cyan">
<link type="text/css" media="all" rel="alternate stylesheet" href="stylesheets/colours/colour-grey.css?version=335" title="colour-grey">


example HTML list of controls (must have rel='style')
<ul>
	<li><a href="#" rel="style" title="grey" class="selected">Grey</a></li>
	<li><a href="#" rel="style" title="red"><img src="images/site/red_dot.png"></a></li>
	<li><a href="#" rel="style" title="cyan">Cyan</a></li>
	<li><a href="#" rel="style" title="brown">Brown</a></li>
</ul>



*/


var MCStyle = {
	Version			: 1.0,
	styles			: null, // list of alternative style links 
	style_controls	: null, // list of style controls (ie anchor tags with rel="style")
	default_style	: '',
	
	
	// initialize our list of styles
	//
	//
	initialize: function() {
	
		MCStyle.styles 			= new Array();
		MCStyle.style_controls 	= new Array();
		
		// find our alternative stylesheets in head and keep them in a list
		var style_list = $A(document.getElementsByTagName('link'));
		style_list.each(function(style_link) {
			var rel 	= String(style_link.getAttribute('rel'));
			var title 	= String(style_link.getAttribute('title')); // must have rel and title to be alternatives
			
			if ((rel == "alternate stylesheet") && title && (title.length > 0) )
				{
				// add to styles list
				MCStyle.styles.push(style_link);
				}
		});
		
		//find our stylesheet controls to observe clicks
		var anchor_list = $A(document.getElementsByTagName('a'));
		anchor_list.each(function(anchor) {
			var rel 	= String(anchor.getAttribute('rel'));
			if (rel == 'style')
				{
				MCStyle.style_controls.push(anchor);
				//observe click events
				Event.observe(anchor,'click',MCStyle.on_click.bindAsEventListener(MCStyle));	
				}
		});
		
		
		
		if (MCStyle.styles.size() == 0)
			{return;}
		
		
		// Finally, if the user has already chosen a stylesheet, apply it
		stored_style = MCStyle.read_stylesheet("colour");
		if (stored_style && stored_style != 'colour-null')
			{
			MCStyle.enable_stylesheet(stored_style);
			}
		else
			{
			
			// else apply the last stylesheet in our list as a default
			style_name = MCStyle.styles.last().getAttribute('title');	
			MCStyle.enable_stylesheet(style_name);
			// store this choice for future use
			MCStyle.write_stylesheet(style_name);		


			}
			
			
	//	MCStyle.enable_stylesheet(MCStyle.read_stylesheet("text"));
	},
			
			
	// Respond to a click on stylesheet control
	//
	// we respond by changing the stylesheet to that indicated by control's rel attribute
	on_click: function(event){
		link = Event.element(event);
		tag_type = link.tagName.toLowerCase();
		
		
		// if not an anchor, try the one up - this would happen if the link contains an image 
		if (tag_type != 'a')
			link = link.up();
		
		style_name = String(link.getAttribute('title'));

		// select the correct stylesheet for this link
		MCStyle.enable_stylesheet(style_name);
		
		// store this choice for future use
		MCStyle.write_stylesheet(style_name);
	},
	
	
	// Enable a given style sheet
	//
	// Disables all alternative styles save the one we want
	enable_stylesheet: function(style_name){
		
		
		var parts = MCStyle.split_style_name(style_name);
		domain = parts[0];	
		
		// select the correct stylesheet for this link
		MCStyle.styles.each(function(stylesheet) {
			var title = String(stylesheet.getAttribute('title'));
			
			if (title == style_name)
				{	
				stylesheet.disabled = true;// for Safari bug
				stylesheet.disabled = false;
				}
			else if (title.include(domain)) // only disable those who are in same domain (ie text)
				{	
				stylesheet.disabled = true;	
				}
		});
		
		//select this link and deselect others
		MCStyle.style_controls.each(function(anchor) {
			var title 	= String(anchor.getAttribute('title'));
			if (title == style_name)
				anchor.className = 'selected';
			else if (title.include(domain)) // only disable those who are in same domain (ie text)
				anchor.className = '';
		});	
		

		
	},
	
	
	// Extract the first part of the style name
	// if it only has one part, return 'style' as the domain
	// Always returns an array with at least 2 parts
	//
	split_style_name: function(style_name){
		name_parts = style_name.split("-")
	
		if (name_parts.length == 1)
			{
			name_parts.push(style_name);
			name_parts[0] = "style"; // default style domain	
			}
		
		return name_parts;
	},
	
	
	// Return the user's preferred stylesheet
	//
	//
	read_stylesheet: function (style_domain) {
		return style_domain + "-" + Cookie.get("user-"+style_domain);	
	},
	
	
	// Write the user's preferred stylesheet
	//
	// Note this will fail when viewing the site locally with Safari
	write_stylesheet: function (style_name) {
		var parts = MCStyle.split_style_name(style_name);
		Cookie.set("user-"+parts[0],parts[1],365);
	}, 
	
	
	// Add the following CSS, at the start of all stylesheets so that it can be overridden
	// By any user CSS
	addStyleRule: function(property,css) {
		if (Prototype.Browser.IE) 
			document.styleSheets[0].addRule(property, css,0); 
		else
			document.styleSheets[0].insertRule(property+' {'+ css + '}', 0);	
	}
		
}

Event.observe(window,'load',MCStyle.initialize,false);