var sk_black = { src: '/sifr/statkraft_black.swf'};

var sk_light = { src: '/sifr/statkraft_light.swf'};

// sIFR.useStyleCheck = true;

// Next, activate sIFR:
sIFR.activate(sk_black, sk_light);

// Now we can do the replacements. You can do as many as you like, but just
// as an example, we'll replace all `<h1>` elements with the Futura movie.
// 
// The first argument to `sIFR.replace` is the `futura` object we created earlier.
// The second argument is another object, on which you can specify a number of
// parameters or "keyword arguemnts". For the full list, see "Keyword arguments"
// under `replace(kwargs, mergeKwargs)` at 
// <http://wiki.novemberborn.net/sifr3/JavaScript+Methods>.
// 
// The first argument you see here is `selector`, which is a normal CSS selector.
// That means you can also do things like '#content h1' or 'h1.title'.
//
// The second argument determines what the Flash text looks like. The main text
// is styled via the `.sIFR-root` class. Here we've specified `background-color`
// of the entire Flash movie to be a light grey, and the `color` of the text to
// be red. Read more about styling at <http://wiki.novemberborn.net/sifr3/Styling>.

sIFR.replace(sk_black, {
  selector: 'h1.content-title span',
  css: ['.sIFR-root { background-color: #ffffff; color: #000000; }'],
	tuneHeight: 6,
	offsetTop: 6,
	wmode: 'transparent'
});


sIFR.replace(sk_black, {
  selector: 'h1.te-content-title',
  css: ['.sIFR-root { background-color: #ffffff; color: #00A6D3; }'],
	tuneHeight: 6,
	offsetTop: 6,
  wmode: 'transparent'
});


sIFR.replace(sk_black, {
  selector: 'h2.content-sub-title',
  css:[ '.sIFR-root { background-color: #ffffff; color: #000000; }'],
	tuneHeight: 6,
	offsetTop: 6,
  wmode: 'transparent'
});

sIFR.replace(sk_light, {
  selector: 'div.content-teaser',
  css: ['.sIFR-root { background-color: #ffffff; color: #000000; }'],
	tuneHeight: 6,
	offsetTop: 6,
  wmode: 'transparent'
});

sIFR.replace(sk_light, {
  selector: 'div.te-content-teaser',
  css: ['.sIFR-root { background-color: #ffffff; color: #584b45; }'],
  tuneHeight: 6,
	offsetTop: 6,
	wmode: 'transparent'
});

sIFR.replace(sk_light, {
  selector: 'div.list-teaser',
  css:[ '.sIFR-root { background-color: #ffffff; color: #000000; }'],
  tuneHeight: 6,
	offsetTop: 6,
	wmode: 'transparent'
});

sIFR.replace(sk_light, {
  selector: 'h2.sidebar-title span',
  css:[ '.sIFR-root { background-color: #ffffff; color: #000000; }'],
	tuneHeight: 6,
	offsetTop: 6,
  wmode: 'transparent'
});

// <![CDATA[@start Global Menu Elements]]>
// Done in prepareGlobalMenuItems in sk_main.js
// sIFR.replace(sk_light, {
// 	selector: ' a.global-menu-item span',
//   css: ['.sIFR-root { background-color: transparent; color: #000000; cursor: pointer;}'],
//	 tuneHeight: 6,
// 	 offsetTop: 6,
//   wmode: 'transparent',
// 	onReplacement: function(flashInteractor){ 
// 		sifrGMEBindElement( $(flashInteractor.getFlashElement()).parent().parent(), flashInteractor );
// 	},
// 	onRollOver: function(flashInteractor){
// 		 $(flashInteractor.getFlashElement()).parent().parent().data("hover", true);
// 	}
// });

/**
 * SIFR GME Bind Element.
 *
 * @param element The affected anchor element.
 * @param flashInteractor The flashInteractor Object @see http://wiki.novemberborn.net/sifr3/FlashInteractor.
 */
function sifrGMEBindElement(element, flashInteractor){
	// If element is an selected element give it the right selected css color.
	if($(element).parent().hasClass("selected")){
		flashInteractor.changeCSS(['.sIFR-root { background-color: transparent; color: #00a6d3; cursor: pointer;}']);
		return; /* early return selected element */
	}
	
	// Otherwise
	// 1. Bind rollover hover/mouseout on the element so it changes on rollover/rollout
	// 2. Bind mouseover on the element, which sets it's hover state to true.
	// 3. Bind mouseover on the element parent, which also sets it's hover state to true.
	// 4. Bind mouseout with an delayed execution to make sure if the element's state is false then execute the rollOut effect.
	$(element).hover(
		function(){ sifrGMERollOver(element); },
		function(){ sifrGMERollOut(element); }
	);
	$(element).mouseover(function(){
		$(element).data("hover", true);
	});
	$(element).parent().mouseover(function(){
		$(element).data("hover", true);
	});
	$(element).parent().mouseout(function(){
		$(element).data("hover", false);
		window.setTimeout(function(){ 
			if($(element).data("hover") == false){ 
				sifrGMERollOut(element);
			}
		}, 120);
	});
	
	// Store the FlashInteractor for the element.
	$(element).data("flashInteractor", flashInteractor);
}

/**
 * SIFR GME Roll Over
 *
 * @param element The affected element
 */
function sifrGMERollOver(element){
	// 1. Set the affected text element to have hover/css color effect.
	// 2. Set the elements hover state to true.
	$(element).data("flashInteractor").changeCSS(['.sIFR-root { background-color: transparent; color: #00a6d3; cursor: pointer;}']);
	$(element).data("hover", true);
	
	// 1. Get the current active alternate text.
	// 2. Iterate Over all Elements.
	// 3.1 Is an selected element do not change it's state.
	// 3.2 If the current element.text is not the same as the active element.text, 
	// 		 set the element.text to normal css color effect.
	var html = $($(element).data("flashInteractor").getAlternate()).html();
	$('a.global-menu-item').each(function(key, element){
		if($(element).parent().hasClass("selected")){
			return; // is active do nothing.
		}
		if(html != $($(element).data("flashInteractor").getAlternate()).html()){
			$(element).data("flashInteractor").changeCSS([".sIFR-root { background-color: transparent; color: #000000; cursor: pointer;}"]);
		}
	});
}

/**
 * SIFR GME Roll Out
 *
 * @param element The affected element
 */
function sifrGMERollOut(element){
	// 1. Reset the state to normal css color effect.
	// 2. Set the element hover status to false.
	$(element).data("flashInteractor").changeCSS(['.sIFR-root { background-color: transparent; color: #000000; cursor: pointer;}'] );
	$(element).data("hover", false);
}
// <![CDATA[@end]]>
