/*
 * 
 * 		<!--- NBSP GmbH / AF / 05.11.2008 / So funktionierts --->
 * 
 */

var aImages = new Array();
var nActId = 0;

function DoOnLoad() {
	//loadNavi();
}

function loadBox(id) {
	homeSlideShowData = new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.getSlideShowElement&pk=' + id,
	    //root: 'data',
	    //totalProperty: 'totalcount',
		autoLoad: true,
	    fields: ['pkcstslideimages', 'title', 'description', 'url','urltitle','src'],
	    listeners: {
			load: showBox	
		}
	});
	
	changeActiveStatus(id);
	nActId = id;
}

function loadNavi(id) {
	homeSlideShowData = new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.getSlideShow&pk=' + id,
	    root: 'data',
	    totalProperty: 'totalcount',
		autoLoad: true,
	    fields: ['pkcstslideimages', 'title', 'description', 'url','urltitle','src'],
	    listeners: {
			load: showNavi			
		}
	});
}

function showBox(pStore,pData) {
	
	dmy = "";
	ndmy = 0;
	
	nPrev = 0;
	nNext = 0;
	
	for(i=0; i<aImages.length; i++)
	{
		if (aImages[i] == nActId) {
			ndmy = i + 1;
			if(i > 0)
				nPrev = aImages[i - 1];
			
			if(i < aImages.length - 1)
				nNext = aImages[i + 1];
		}
		
	}
	
	if(nPrev)
		sPrev = '<div class="btn-1"><a href="#" onClick="loadBox(' + nPrev + '); return false;">' + getLanguageText('defaults.previous') + '<!-- leer -->' + '</a></div>';
	else	
		sPrev = '<div class="btn-1 bgnone">&nbsp;</div>';
		
	if(nNext)
		sNext = '<div class="btn-2"><a href="#" onClick="loadBox(' + nNext + '); return false;">' + getLanguageText('defaults.next') + '<!-- leer -->' + '</a></div>';
	else	
		sNext = '<div class="btn-2 bgnone">&nbsp;</div>';
	
	var template = new Ext.XTemplate(
		'<div class="image"><img border="0" alt="dummy" src="/{src}"/></div>' +
		'<div class="img-controller clearfix">' +
			'<div class="left">' +
			sPrev +
			'</div>' +
			'<div class="center">' +
				'<div class="pages">' + getLanguageText('howitworks.pagexofy1') + ' <span class="active">' + ndmy + '</span> ' + getLanguageText('pages.knowledgecheck.header.questionxfromy2') + ' ' + aImages.length + '</div>' +
			'</div>' +
			'<div class="right">' +
			sNext +
			'</div>' +
		'</div>' +
		'<p>{description}</p>'
		);
		
	template.overwrite("howitworks", pStore.reader.jsonData);
}

function showNavi(pStore,pData) {

	var template = new Ext.XTemplate(
		'<ul>' +    
			'<tpl for="data">' +   
	        	'<li class="link" name="howitworksnavilinks" id="{pkcstslideimages}"><a href="#" onClick="loadBox({pkcstslideimages}); return false;">{title}</a></li>' +
			'</tpl>' +
    	'</ul>'
		);
		
	template.overwrite("howitworksnavi", pStore.reader.jsonData);
	
	for(i=0; i<pData.length; i++)
	{
		aImages[i] = pData[i].data.pkcstslideimages;
	}
	
	loadBox(pData[0].data.pkcstslideimages);
	
	
}

function changeActiveStatus(id) {
	//arr = document.getElementsByName("howitworksnavilinks");

	for(i=0; i<aImages.length; i++)
	{		
		if(document.getElementById(aImages[i]).id == id){
			//document.getElementById(aImages[i]).className = "active";
			
			var nav_el = Ext.get(''+aImages[i]);
			nav_el.select('a').each(function(el){
				el.setVisibilityMode(Ext.Element.DISPLAY);
				el.hide();
			})
			
			nav_el.select('span').each(function(el){
				el.remove();
			})
		
			nav_el.createChild({tag:'span',html: ''+nav_el.select('a').elements[0].firstChild.data});
			nav_el.replaceClass('link','active');			
		}
		else{	
			//document.getElementById(aImages[i]).className = "link";
			
			var nav_el = Ext.get(''+aImages[i]);
		
			nav_el.select('span').remove();			
			nav_el.select("a").show();		
			nav_el.replaceClass('active','link');		
			
		}
	}
}