////////////////////////////
//                        //
//   sIFR configuration   //
//                        //
////////////////////////////

var arnopro = {
    src: '/js/sifr/arnopro.swf'
};
var arnoprodisplay = {
    src: '/js/sifr/arnoprodisplay.swf'
};
// For the italic, until I can get it to stop "double-italicizing" headings:
var arnoproitalic = {
    src: '/js/sifr/arnoproitalic.swf'
};
  
// You probably want to switch this on, but read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad> first.
sIFR.useStyleCheck = true;
sIFR.activate(arnopro, arnoprodisplay, arnoproitalic);

sIFR.replace(arnoprodisplay, {
	selector: 'h1'
	//,selectable: false
	,css: [
	  '.sIFR-root { text-align: left; color: #C1BFBC; }'
	  ,'a { text-decoration: none; }'
	  ,'a:link { color: #C1BFBC; }'
	  ,'a:hover { color: #C1BFBC; }'
	]
	,wmode: 'transparent'
});
sIFR.replace(arnopro, {
	selector: '#nav h3'
	,selectable: false
	,css: [
	  '.sIFR-root { text-align: left; color: #333333; }'
	  ,'a { text-decoration: none; }'
	  ,'a:link { color: #996600; }'
	  ,'a:hover { color: #704A00; }'
	]
	,wmode: 'transparent'
});
sIFR.replace(arnopro, {
	selector: '#tagline h3'
	,selectable: true
	,css: [
	  '.sIFR-root { text-align: right; color: #666666; }'
	  ,'a { text-decoration: none; }'
	  ,'a:link { color: #996600; }'
	  ,'a:hover { color: #704A00; }'
	]
	,wmode: 'transparent'
});
// sIFR.replace(arnopro, {
sIFR.replace(arnopro, {
	selector: '#page-title h2'
	//,selectable: false
	,css: [
	  '.sIFR-root { text-align: left; color: #4C4C4C; font-style: normal;}'
	  // '.sIFR-root { text-align: left; color: #7F99B2; font-style: normal; letter-spacing: -1; }'
	  ,'a { text-decoration: none; }'
	  ,'a:link { color: #003366; }'
	  ,'a:hover { color: #003366; }'
	]
	,wmode: 'transparent'
});

/* Other example parameters:

  sIFR.replace(examplefont, {
    selector: 'h3'
    ,selectable: false
	,filters: {
      DropShadow: {
        knockout: true
        ,distance: 1
        ,color: '#330000'
        ,strength: 2
      }
    }
  });

*/

  





//////////////////////////
//                      //
//   jQuery functions   //
//                      //
//////////////////////////


$(document).ready(function() {
						   
		// Email address obfuscator
		// adapted from Colin Viebrock's method: http://viebrock.ca/code/51/email-protection-with-jquery
		// turns <a href="#" rel="me/example.com" class="email"></a> 
		// into  <a href="mailto:me@example.com" class="email">me@example.com</a>
		$('a.email').each(function(){ 
			e = this.rel.replace('/','@'); 
			this.href = 'mailto:' + e; 
			$(this).text(e); 
		}); 
						   
		// Form autofocus -- focuses on the first form field on any given page:				   
		$("input:visible:enabled:first").focus();
		
		
		// Flash plugin:
		// (Details at http://jquery.lukelutman.com/plugins/flash/example-basic.html)
		
		// Sample code:
		/*
		// Javascript:
		$(document).ready(function(){
			$('#example').flash(
				{ src: 'example.swf',
				  width: 720,
				  height: 480 },
				{ version: 8 }
			);
		});
		
		// Before:
		<div id="example">Say hello to the jQuery flash plugin :)</div>
		
		// After:
		<div id="example" class="flash-replaced">
			<embed width="360" height="215" type="application/x-shockwave-flash" src="example.swf" pluginspage="http://www.adobe.com/go/getflashplayer" />
			<div class="alt">Say hello to the jQuery flash plugin :)</div>
		</div>
		*/
		
						   
		/* GRID BG "X-RAY" TOGGLE */
		
		var originalLinkText = "Show this site's grid";
		var newLinkText = "Hide it again";
		
		// Create the link itself so no-JS visitors don't get toggle:
		$('a.grid-toggle').text(originalLinkText);
		
		// alert("JS file(s) successfully loaded.");
        $('a.grid-toggle').click(function() {
 		    if ( $('div#container').hasClass("showgrid") ) {
					$('div#container').removeClass("showgrid");
					$(this).text(originalLinkText);
					// alert(originalLinkText);
					return false;
			} else {
					$('div#container').addClass("showgrid");
					$(this).text(newLinkText);
					return false;
			}
		});
		
		
		/* BASIC JS PAGE SIZE TOGGLE */

		// alert("JS file(s) successfully loaded.");
        $('a.size-toggle').click(function() {
 		    if ( $('body').hasClass("large-page") ) {
					$('body').removeClass("large-page");
					$('body').addClass("small-page");
					return false;
			} else {
					$('body').removeClass("small-page");
					$('body').addClass("large-page");
					return false;
			}
		});
		
		
		/* SHOW/HIDE TOP MESSAGE */
		
		// Create the link itself so no-JS visitors don't get it:
		$('.corner').html('<a href="#" id="close">&times;</a>');
		
		// Then figure out a way to slide up and/or fade out top portion */
		$('div#top a#close').click(function() {
 		    $('div#top').empty();
			$('div#top').addClass("message-off");
			return false;
		});
		
		
});






//////////////////////////
//                      //
//  CSS STYLE SWITCHER  //
//                      //
//////////////////////////


// jQuery Style Switcher 
// by Kelvin Luck
// http://www.kelvinluck.com/article/switch-stylesheets-with-jquery

/*
$(document).ready(function() {
        $('.styleswitch').click(function()
        {
                switchStylestyle(this.getAttribute("rel"));
                return false;
        });
        var c = readCookie('style');
        if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
        $('link[@rel*=style][@title]').each(function(i)
        {
                this.disabled = true;
                if (this.getAttribute('title') == styleName) this.disabled = false;
        });
        createCookie('style', styleName, 365);
}
*/


/*
Then all you need to do is to add a class of “styleswitch” to any links that you want to activate the stylesheet switcher and a “rel” attribute which corresponds to the “title” attribute of the link tag embedding the stylesheet you want to switch to.

Example HTML code:

<head>
	...
	<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
	...
</head>

<body>
	<p>
		Currently active stylesheet:
		<span id="st1">styles1</span>
		<span id="st2">styles2</span>
		<span id="st3">styles3</span>
	</p>
	<p>Choose a different stylesheet:</p>
	<ul>
		<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>
		<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>
		<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>

	</ul>
</body>



ALTERNATIVE VERSION:

Paul Gendek
August 26th, 2008

I created something similar using only jQuery, the Cookie plugin, and a small function.

Basically, you declare your style sheets as usual (reset, default, etc), and the additional styles as rel=”alternate stylesheet”. Give them title tags that match the rel tag of the selection links (light, dark, etc) and add class=”styleswitcher”.

Here’s the function:

$.styleswitcher = function(name) {
$(’body’).toggle();
$(’link[@rel*=stylesheet][@title]‘).each(function(i)
{
this.setAttribute(’rel’, ‘alternate stylesheet’);
this.disabled = true;

if (this.title == name) {
this.disabled = false;
this.setAttribute(’rel’, ’stylesheet’);
}
});
$(’body’).toggle();
$.cookie(’stylesheet’, name, {expires: 365});
};

$(document).ready(function() {
$(’.styleswitcher’).click(function()
{
$.styleswitcher(this.getAttribute(’rel’));
return false;
});
if ($.cookie(’stylesheet’)) {
$.styleswitcher($.cookie(’stylesheet’));
};
});

This works better because the user can still choose which page style to view in the browser itself (Firefox: View > Page Style), and it’s a lot easier/faster/smaller.


*/