if (ing.wholesalebanking.campaign.globals.gApiKey)
	google.loader.ApiKey = ing.wholesalebanking.campaign.globals.gApiKey;


function setupFlashReplacementIfNeeded() {
	if (!swfobject.hasFlashPlayerVersion(ing.wholesalebanking.campaign.visual.minFlashVersion)
			|| !ing.wholesalebanking.campaign.visual.flashObject) {
		// - load 'scrollTo' plugin
		$.getScript(item4initlibsapp + "=jquery.scrollTo-min.js");
		// - load 'serialScroll' plugin
		$.getScript(item4initlibsapp + "=jquery.serialScroll-1.2.1-min.js");
		// - load 'mouseHold' plugin
		$.getScript(item4initlibsapp + "=jquery.mousehold.js");
		// - load 'scroll-visual'
		$.getScript(item4initlibsapp + "=scroll-visual.js", function() {
			initUI();
		});
	}
}


google.load("jquery", "1.2.6", {
	compressed :true
});
google.setOnLoadCallback( function() {
	// with swfobject loaded, try to init/replace static content

		swfobject.registerObject(ing.wholesalebanking.campaign.visual.flashObjectId,
				ing.wholesalebanking.campaign.visual.minFlashVersion);

		ing.wholesalebanking.campaign.visual.flashObject = swfobject
				.getObjectById(ing.wholesalebanking.campaign.visual.flashObjectId);

		// Fx has a tendency to hide the flash object. For no reason; show it!
		var el = document.getElementById(ing.wholesalebanking.campaign.visual.flashObjectId); 
		if (el) el.style.visibility = "visible";

		setupFlashReplacementIfNeeded();

	});

/**
 * Initializes the User Interface. See code comments for actual initialization
 * order and setup
 */
function initUI() {
	// remove visible overflow from outer container 
	$(ing.wholesalebanking.campaign.visual.overallContainerRef).css("overflow", "hidden");
	// show paging
	$(ing.wholesalebanking.campaign.visual.scrollButtonContainerRef).show();
	
	// add a dummy first and last item, to allow scrolling from the right direction when skipping over end or beginning
	items = $(ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
			+ ing.wholesalebanking.campaign.visual.scrollContentRef + " " + ing.wholesalebanking.campaign.visual.itemRef);
	var firstItem = $(items.get(0));
	var lastItem = $(items.get((items.size() - 1)));
	lastItem.clone().html("&nbsp;").insertAfter(lastItem);
	firstItem.clone().html("&nbsp;").insertBefore(firstItem);

	preInitScroll(ing.wholesalebanking.campaign.visual.scrollContainerRef);
	//undo hiding of prev by init
	$prevBtn.show()

	// init the serialScroll object
	$(ing.wholesalebanking.campaign.visual.scrollContainerRef).serialScroll(
			{
				target :ing.wholesalebanking.campaign.visual.scrollAreaRef, // element to scroll, relative to container
				cycle :false, // wrap around done by ourself too
				interval :ing.wholesalebanking.campaign.visual.autoScrollInterval, // auto scroll interval
				start :0,
				lock :true, // disallow click on while scrolling (and queue events)?
				items :ing.wholesalebanking.campaign.visual.itemRef, // items that are scrolled, relative to target
				//prev: ".previous", // element to attach 'prev' event to
				//next: ".next", // element to attach 'next' event to
				step :1, // step size/direction for scrolling (irrelevant when using buttons)
				force :true, // scroll to first element upon init?
				axis :"x", // axis/axes to scroll (from scrollTo)
				easing :"easeInOutQuad", // easing function to use (from scrollTo)
				constant :false, // // scroll at constaint speed, no matter distance?
				jump :false, // attach click event to indivdual scroll items?
				lazy :false, // get items upon each scroll (and re-evaluate dynamically added/removed items)?
				duration :ing.wholesalebanking.campaign.visual.detailFadeIn
						+ ing.wholesalebanking.campaign.visual.detailFadeOut, // length of the animation
				offset :0, // offset for end position of scroll (if needed in center, f.e.)
				// compute items in view besides the current one
				exclude :$itemsInView - 1,
				onBefore : function(e, elem, $pane, $items, pos) {
					// event, target element, scrolling element, all items, target position

					var forward = (pos - ing.wholesalebanking.campaign.visual.indexOld) > 0 ? true : false;
					ing.wholesalebanking.campaign.visual.indexNew = pos;

					if (pos == 0) {
						if (forward) {
							ing.wholesalebanking.campaign.visual.toEnd = false;
						} else {
							ing.wholesalebanking.campaign.visual.toEnd = true;
						}
					} else if (pos == $itemsInList.size() - 1) {
						if (forward) {
							ing.wholesalebanking.campaign.visual.toStart = true;
						} else {
							ing.wholesalebanking.campaign.visual.toStart = false;
						}
					} else {
						$(
								ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
										+ ing.wholesalebanking.campaign.visual.scrollButtonContainerRef + " .counter").text(
								pos + " / " + ($itemsInList.size() - 2));
					}

					// show details that came with this photo
					switchDetails();

					ing.wholesalebanking.campaign.visual.indexOld = pos;

				},
				onAfter : function(elem) {
					if (ing.wholesalebanking.campaign.visual.toStart) {
						$(
								ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
										+ ing.wholesalebanking.campaign.visual.scrollAreaRef).scrollTo(
								$($itemsInList.get(0)));
						ing.wholesalebanking.campaign.visual.toStart = false;
						setTimeout( function() {
							$(
									ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
											+ ing.wholesalebanking.campaign.visual.scrollAreaRef).trigger("goto", [ 1 ]);
							switchDetails();
						}, 100);
					}
					if (ing.wholesalebanking.campaign.visual.toEnd) {
						$(
								ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
										+ ing.wholesalebanking.campaign.visual.scrollAreaRef).scrollTo(
								$($itemsInList.get($itemsInList.size() - 1)));
						ing.wholesalebanking.campaign.visual.toEnd = false;
						setTimeout( function() {
							$(
									ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
											+ ing.wholesalebanking.campaign.visual.scrollAreaRef).trigger("goto",
									[ ($itemsInList.size() - 2) ]);
							switchDetails();
						}, 100);
					}
				}
			});

	//hide all photo-details
	$(".photo-details").css("display", "none");
	if ($.browser.msie) {
		$(".photo-details").css("position", "absolute");
		$(".photo-details").css("position", "relative");
	}

	// and show (real) first photo's + details + counter
	ing.wholesalebanking.campaign.visual.indexOld = 1;
	setTimeout(
			function() {
				$(
						ing.wholesalebanking.campaign.visual.scrollContainerRef + " "
								+ ing.wholesalebanking.campaign.visual.scrollAreaRef).trigger("goto", [ 1 ]);
			}, 100);

	// stop the auto-scroll that is normally present at start (better/easier than resetting the interval)
	//togglePlay();

}