Cufon.replace('.cufon_fs', { fontFamily: 'French Script MT' });
jQuery(document).ready(function() {
	
	jQuery('ul.newsSlider').bxSlider({
		alignment: 'horizontal',        // 'horizontal', 'vertical' - direction in which slides will move
		controls: true,                 // determines if default 'next'/'prev' controls are displayed
		speed: 500,                     // amount of time slide transition lasts (in milliseconds)
		pager: false,                    // determines if a numeric pager is displayed (1 2 3 4...)
		pager_short: false,             // determines if a 'short' numeric pager is displayed (1/4)
		pager_short_separator: ' / ',   // text to be used to separate the short pager
		margin: 0,                      // if 'horizontal', applies a right margin to each slide, if 'vertical' a bottom margin is applied. example: margin: 50
		next_text: '',              // text to be displayed for the 'next' control
		next_image: '/portals/10/skins/vomero/images/newsArrowR.png',                 // image to be used for the 'next' control
		prev_text: '',              // text to be displayed for the 'prev' control
		prev_image: '/portals/10/skins/vomero/images/newsArrowL.png',                 // image to be used for the 'prev' control
		auto: true,                    // determines if slides will move automatically
		pause: 10000,                    // time between each slide transition (auto mode only)
		auto_direction: 'next',         // order in which slides will transition (auto mode only)
		auto_hover: true,               // determines if slideshow will pause while mouse is hovering over slideshow
		auto_controls: false,           // determines if 'start'/'stop' controls are displayed (auto mode only)
		ticker: false,                  // determines if slideshow will behave as a constant ticker
		ticker_controls: false,         // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
		ticker_direction: 'next',       // order in which slides will transition (ticker mode only)
		ticker_hover: true,             // determines if slideshow will pause while mouse is hovering over slideshow
		stop_text: 'stop',              // text to be displayed for the 'stop' control
		start_text: 'start',            // text to be displayed for the 'start' control
		wrapper_class: 'bxslider_wrap'  // class name to be used for the outer wrapper of the slideshow
	});
	
	jQuery('.bannerSlides').cycle({
		fx: 'fade'
	});
	
	// Load images once the page has loaded
	jQuery("img.delayLoad").each(function() {
		
		// Create a new span element which we will wrap around our image
		// Using a span because if the image was inside an <a> tag then online inline elements should be used
		var delaySpan =  document.createElement("span");

		with (jQuery(this)) {
			// Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
			if (css('display') == 'none') {
				var _display = 'none' } else {
				var _display = 'block' }
			
			// Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
			var cssObj = {
				'height' : css('height'),
				'width' : css('width'),
				'margin-top' : css('margin-top'),
				'margin-right' : css('margin-right'),
				'margin-bottom' : css('margin-bottom'),
				'margin-left' : css('margin-left'),
				'background-image' : css('background-image'),
				'background-color' : css('background-color'),
				'background-repeat' : css('background-repeat'),
				// Hack for now, becuase IE doesn't seem to read the background-position property correctly
				'background-position' : '50% 50%',
				'display' : _display
			}
		}
		
		// Apply our style properties to our span	
		jQuery(delaySpan).css(cssObj);
		
		// Wrap the image in the span
		jQuery(this).wrap(delaySpan)
		
		// Hide the image (leaving just the span visible
		.hide()
		
		// Simulate the mouse over the image, whcih will cause it to switch the img src
		.mouseover()
		
		// Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
		.removeAttr("onmouseover")

		// Simulate the mouse moving out of the image (To reset the image to its normal state)
		.mouseout()

		// Once the image is loaded, perform a function
		.load(function () {
			// Fade the image in
			// Remove the span by unwrapping the image
			jQuery(this).fadeIn().unwrap();
		});
	});	
	
	// .imgSwap is used on partner logos in the footer
	// Create the span to append (We can't just add this as a string later because it won't validate
	var s = document.createElement("span");
	s.className = "hover";
	jQuery('.imgSwap').append(s).each(function() {
		var mySpan = jQuery('> span.hover', this).css({
			'opacity' : 0,
			'width' : jQuery(this).css('width'),
			'height' : jQuery(this).css('height'),
			'background-image' : jQuery(this).css('background-image'),
			'background-position' : '0px -' + jQuery(this).css('height')
		});
		jQuery(this).hover(function () {
			mySpan.stop().fadeTo(200, 1);
		}, function () {
	    	mySpan.stop().fadeTo(500, 0);
		});
	});
});