/*
 Stylesheet Switcher
 -------------------
 Acknowledgements: Implementation is partially based on Mark Wilton-Jones' switching stylesheets example at http://www.howtocreate.co.uk/tutorials/javascript/domcss

 Description:
 Contains functions to have the website switch between the style sheets being utilised.

 Switching of style sheets is done by enabling or disabling particular style sheets using the disabled property of the Link tag that references the style sheet.
 In some browsers the disabled property is only changeable if the title attribute is set in the Link tag, so the functions within rely on the
 title attribute being present for a style sheet to be capable of being switched.

 Ideally, the site should have a persistent style sheet containing all global styles. It should be referenced in a link tag without a title
 attribute so it can never be disabled. e.g. <link rel="stylesheet" type="text/css" href="../../templates/jscript/global.css">

 Then define a default switchable (preferred) stylesheet that will always be utilised where style sheet switching is not supported.
 e.g. <link rel="stylesheet" type="text/css" href="../../templates/jscript/default.css" title="Default">

 Lastly, define all the alternate switchable style sheets using the 'rel' attribute value 'alternate stylesheet'. This will ensure that by default
 most browsers will not utilise these stylesheets at all, and in browsers that can switch stylesheets, these stylesheets will be disabled by default.
 e.g.
 <link rel="alternate stylesheet" type="text/css" href="../../templates/jscript/small.css" title="Small Font">
 <link rel="alternate stylesheet" type="text/css" href="../../templates/jscript/medium.css" title="Medium Font">
 <link rel="alternate stylesheet" type="text/css" href="../../templates/jscript/large.css" title="Large Contrast">

*/

/**
 * Retrieves all the Link and Style tag XHTML objects from within a document and returns them in an array
 *
 * @return array
 */
function getAllStylesheets()
{
	// Firstly save references to all the LINK and STYLE tag objects

	// Does the browser support DOM objects?
	if( document.getElementsByTagName )
	{
		// Yes. This browser supports DOM, so get the link and style tags using getElementsByTagName
		var link_tags = document.getElementsByTagName('link');
		var style_tags = document.getElementsByTagName('style');
	}
	else if( document.styleSheets && document.all )
	{
		// No. Browser doesn't support DOM.
		// So alternately use the document.all.tags method which is supported by browsers that are
		// capable of switching style sheets.
		var link_tags = document.all.tags('LINK');
		var style_tags = document.all.tags('STYLE');
	}
	else
	{
		// Browser is to old to support either method.
		return [];
	}

	// Next traverse through all the LINK tags and determine whether it's a reference to a style sheet.
	// If it is save that tag to an array of Link and Style tags that will be outputted from the function.
	var style_related_tags = new Array();
	var index = 0;

	while( link_tags[index] )
	{
		// Obtain the value of the 'rel' attribute using a method that is supported by the browser
		if( link_tags[index].rel )
		{
			var rel = link_tags[index].rel;
		}
		else if( link_tags[index].getAttribute )
		{
			link_tags[index].getAttribute('rel');
		}
		else
		{
			var rel = '';
		}

		// Does the 'rel' attribute contain 'style'?
		if( (typeof(rel) == 'string') && (rel.toLowerCase().indexOf('style') != -1) )
		{
			// Yes. So save this LINK tag to the output array of style related tags
			style_related_tags[style_related_tags.length] = link_tags[index];
		}

		// Importantly, increment the link_tags index
		index++;
	}

	// Now, save all the style tags to the output array
	var index = 0;

	while( style_tags[index] )
	{
		style_related_tags[style_related_tags.length] = style_tags[index];
		// Importantly, increment the style_tags index
		index++;
	}

	// Finally, return the output array of style related tags
	return style_related_tags;
}

/**
 * Retrieves the name of the current text size style sheet being utilised by the website
 *
 * @return string
 */
function getActiveTextsize()
{
	// Get all the relevant style sheet related tags
	all_style_sheets = getAllStylesheets();

	// Traverse through all the tags to find the current text size style sheet
	var index = 0;

	while( all_style_sheets[index] )
	{
		// Does this tag refer to a switchable text size style sheet?
		if( (all_style_sheets[index].title) && (all_style_sheets[index].title.toLowerCase().indexOf('text') != -1) )
		{
			// Yes. So is it the active text size style sheet?
			if( all_style_sheets[index].disabled == false )
			{
				return all_style_sheets[index].title;
			}
		}

		// Importantly, increment the all_style_sheets index
		index++;
	}

	// Fallback if couldn't find active text size style sheet
	// This will usually indicate that the default global.css stylesheet is being utilised to define the text sizes
	return '';
}


/**
 * Switches the current colour theme style sheet being utilised by the website
 *
 * @param string theme_name		- the theme name as defined in the title attribute of the 'link' or 'style' tag
 * @param string color		    - the theme color for raddock controls
 */
function setActiveTheme(colour)
{
	// Get all the relevant style sheet related tags
	all_style_sheets = getAllStylesheets();

	// Traverse through all the tags and disable/enable the appropriate themed style sheet
	var index = 0;

	while( ( all_style_sheets[index] ) && ( typeof ( all_style_sheets[index].href ) != "undefined")  )
	{
        // Switch the raddock style sheet
        if ( all_style_sheets[index].href.indexOf('RadDockableObject') > 0 )
        {
            // get the current colour
            var pattern = new RegExp(/skins\/(\w+)\/RadDockableObject/ );
            var current_colour = all_style_sheets[index].href.match(pattern)

            // replace the old colour with the new one
            all_style_sheets[index].href = all_style_sheets[index].href.replace(current_colour[1], colour)

        }

    	// Importantly, increment the all_style_sheets index
		index++;
	}

	// Fallback for unsupported browsers
	if( all_style_sheets.length == 0 )
	{
		alert('Your browser does not support changing themes');
		return
	}
    save_style_state();
}


/**
 * Retrieves the name of the current colour theme style sheet being utilised by the website
 *
 * @return string
 */
function getActiveTheme()
{
    // Get all the relevant style sheet related tags
	all_style_sheets = getAllStylesheets();

	// Traverse through all the tags and disable/enable the appropriate themed style sheet
	var index = 0;

	while( ( all_style_sheets[index] ) && ( typeof ( all_style_sheets[index].href ) != "undefined")  )
	{
        // Switch the raddock style sheet
        if ( all_style_sheets[index].href.indexOf('RadDockableObject') > 0 )
        {
            // get the current colour
            var pattern = new RegExp(/skins\/(\w+)\/RadDockableObject/ );
            var current_colour = all_style_sheets[index].href.match(pattern)

            return current_colour[1];
        }

    	// Importantly, increment the all_style_sheets index
		index++;
	}
    return '';	
}


/**
 * Switches the current text size style sheet being utilised by the website
 *
 * NOTE: Passing a blank string as the value for textsize_name will cause the site to fall back to using the default text
 *		 sizes defined in global.css.
 *
 * @param string textsize_name		- the text size name as defined in the title attribute of the 'link' or 'style' tag
 */
function setActiveTextsize(textsize_name)
{
	// Get all the relevant style sheet related tags
	all_style_sheets = getAllStylesheets();

	// Traverse through all the tags and disable/enable the appropriate text size style sheet
	var index = 0;

	while( all_style_sheets[index] )
	{
		// Does this tag refer to a switchable text size style sheet?
		if( (all_style_sheets[index].title) && (all_style_sheets[index].title.toLowerCase().indexOf('text') != -1) )
		{
			// Yes. So set it to be disabled by default
			// NOTE: IE requires the style sheet to be disabled before it can be enabled
			all_style_sheets[index].disabled = true;

			// Is this text size style sheet the one to be switched to?
			if( all_style_sheets[index].title == textsize_name )
			{
				// Yes. This is the text size to be switched to so enable this style sheet
				all_style_sheets[index].disabled = false;
			}
		}

		// Importantly, increment the all_style_sheets index
		index++;
	}

	// Fallback for unsupported browsers
	if( all_style_sheets.length == 0 )
	{
		alert('Your browser does not support changing text sizes');
	}
	
	save_style_state();
}





/**
 * Causes the text size being utilised by the website to be changed.
 *
 * @param string sizeChange  -- valid values: increase, decrease
 */
function switchTextsize(sizeChange)
{
	// Get the title of the active text size being utilised by the site
	var textsizeTitle = getActiveTextsize();

	switch( sizeChange )
	{
		case 'increase':
			// Is the global.css (default style sheet) being utilised to define the text size?
			if( textsizeTitle == '' )
			{
				// Yes. So increase the text size to be medium.
				setActiveTextsize('Text Size Medium');
			}
			// No. Default style sheet not being utilised as defining the text size.
			// So is the medium text size style sheet being used?
			else if( textsizeTitle == 'Text Size Medium')
			{
				// Yes. So increase the text size to be large.
				setActiveTextsize('Text Size Large');
			}
			else
			{
				// The text size is as large as it can go or can't be determined.
				// So do nothing.
			}
			break;
		case 'decrease':
			// Is the largest text size style sheet being utilised?
			if( textsizeTitle == 'Text Size Large' )
			{
				// Yes. So decrease the text size to be medium.
				setActiveTextsize('Text Size Medium');
			}
			// No. Largest text size not being used.
			// So is the medium text size being utilised?
			else if( textsizeTitle == 'Text Size Medium' )
			{
				// Yes. So decrease the text size to being the default text size as defined in the default
				// style sheet (global.css) by passing a blank value to the setActiveTextsize function (passing
				// a blank value to the function will ensure all the other text size style sheets disabled).
				setActiveTextsize('');
			}
			else
			{
				// The text size is as small as it can go or can't be determined.
				// So do nothing.
			}
			break;
	}
}


/**
 * Sets the style sheets being utilised
 */
function set_saved_style()
{
	// Set the active colour theme
	var activeTheme_name = readCookie("activeTheme");

	if( (typeof(activeTheme_name) == 'string') && (activeTheme_name.length > 0) )
	{
		setActiveTheme(activeTheme_name);
	}

	// Set the active text size style sheet
	// NOTE: If an invalid or blank style sheet title is specified, the site will fall back
	// to using the default text sizes specified in the global style sheet global.css.
	var activeTextsize_name = readCookie("activeTextsize");
	setActiveTextsize(activeTextsize_name);
}


/**
 * Saves the style sheets being utilised
 */
function save_style_state(e)
{
	// Save the active colour theme
	var themeTitle = getActiveTheme();
	createCookie("activeTheme", themeTitle, 365);

	// Save the active text size
	var textsizeTitle = getActiveTextsize();
	createCookie("activeTextsize", textsizeTitle, 365);
}
//window.onunload = save_style_state;