//<![CDATA[ 
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') != -1) || (ua.indexOf('iPod') != -1) || (ua.indexOf('iPad') != -1) ) {
	event = (ua.match(/(iPad)|(iPhone)|(iPod)/i)) ? "touchstart" : "click";

	var mobileSiteCSS = '<link href="/css/grids-mobile.css" rel="stylesheet" type="textcss" />';
	document.write(mobileSiteCSS);
		
	$(document).ready(function(e) {	
		//Set the rollover effect
        $(".menuItems#mobile a").each(setRollOverDiv);
		
		$(".menuItems#mobile a").hover(hoverIn,hoverOut);
		//handlerIn
			
		$("a").each(function(index, element) {
            $(this).bind(event, function() {
				if($(this).attr("href") != ""){
					setRollOverDiv();
					window.location = $(this).attr("href");
		}
			});
		
        });
		//handlerOut
    });
}
			
/**
 * Function to add a <div> tag for the rollover effets
 */
function setRollOverDiv(){
	var currentText = $(this).children("div.button").text();
	$(this).append($("<div class='rollover'>" + currentText +"</div>"));
	$(this).css({"text-decoration": "none", "color" : "#fff"});
	$(this).children("div.button").css("display","block");
	$(this).children("div.rollover").css("display","none");
		
}
		//Set the rollOver <div> tag
/**
 * Function when the hover in event is fired on the navigation button
 **/
function hoverIn(){
	$(this).children("div.rollover").css("display","block");
	$(this).children("div.button").css("display","none");
}
	
/**
 * Function when the HOVER OUT event is fired on the navigation buttons (turn off the rollover)
 **/
function hoverOut(){
	$(this).children("div.button").css("display","block");
	$(this).children("div.rollover").css("display","none");
	
}
//]]>