/* Searches are keyed on the id value of clicked div
	   Url's below are generated by the system
	*/
/*
	var u = {
		faqs: "http://www.studiosv.com/sv/shop/products/dvdnl/Actie%20en%20Avontuur.html",
		tips: "http://www.studiosv.com/sv/shop/products/dvdnl/Kinderen%20en%20Familie.html",
		techspec: "http://www.studiosv.com/sv/shop/products/dvdnl/Animatie.html"
	};
	urls = $H(u);

*/
	var s = {};
	seen = $H(s);

	function getHTML(container)
	{
		var elementid;
		
//		var url = "http://www.studiosv.com/sv/shop/products/dvdnl/Actie%20en%20Avontuur.html";

		var url = urls[container];

//		var pars = 'someParameter=ABC';

		/*
		returns an array of all elements that match a given css query. 
		In this case, the query might look like '#faq #content', 
		which would return all elements with id 'content' under an element with ID 'faq'.
		*/
//		var el = $$('#' + container + ' #' + elementid);	

		var content;
		var summary;
		if (container=='hkmrk') {
			content = 'contenthk';
			summary = 'summaryhk';
		}
		else {
			content = 'content';
			summary = 'summary';
		}
		//var el = $$('#' + container + ' #content');		
		var el = $$('#' + container + ' #' + content);		
		elementid = el[0]; // We only need the first one, as there should be only one

		if(seen[container]) {
			/*
				Call has been made before
				just display the contents
			*/
			//alert('Seen: ' + container);
		}
		else {
			var myAjax = new Ajax.Updater(
//								{success: 'placeholder'}, 
								{
									success: elementid
								}, 
//								{success: el[0]}, // We only need the first, as there should be only one
								url,
								{
									method: 'get', 
//									parameters: pars, 
									onFailure: reportError
								});

		}

		/* If we get here the Ajax call has most probably been successful*/

		/* Mark this call as 'seen', as we want to retrieve same data only once*/
		seen[container] = 1;

		/*
			Toggle:
			1. summary/content div
			2. more/less icon
			We start out with a style 'display:none;' for the content div and less icon 
		*/
		Element.toggle(elementid); // content div

		/* Summary div*/
		//el = $$('#' + container + ' #summary');		
		el = $$('#' + container + ' #' + summary);		
		Element.toggle(el[0]);


		/* Toggle more/less icons*/
		el = $$('#' + container + ' #icons #iconmore');
		Element.toggle(el[0]);
		el = $$('#' + container + ' #icons #iconless');
		Element.toggle(el[0]);
	}


	function reportError(request)
	{
		alert('Sorry. There was an error.');
	}

	var myGlobalHandlers = {
		onCreate: function(){
				Element.show('systemWorking');
			},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemWorking');
			}
		}
	};

	Ajax.Responders.register(myGlobalHandlers);




	function toggleDIV(container)
	{
		var elementid;

		/*
		returns an array of all elements that match a given css query. 
		In this case, the query might look like '#faq #content', 
		which would return all elements with id 'content' under an element with ID 'faq'.
		*/
//		var el = $$('#' + container + ' #' + elementid);	
		var el = $$('#' + container + ' #contentl');		
		elementid = el[0]; // We only need the first one, as there should be only one

		/* We start out with a style 'display:none;' for the content div */
		Element.toggle(elementid);
		el = $$('#' + container + ' #contents');		
		Element.toggle(el[0]);
	}