/*
 * nbsp, KW | 2008-11.03 - eLearning-Start-Seite CID =
 * aufgerufen direkt aus Ausgabetemplate --> /master/custom/website/views/sftemplates/usertemplates/home/dspSlideShow.cfm
 * 
 */

// KW - Globale Variablen setzen
var slideShowData;
var mySlideShowRunner;
var mySlideShowItems;
var mySlideShowRunI = 0;
var mySlideShowRunFirst = 1;
var mySlideShowClassID = 0;
var mySlideShowTask;
var actImg = 0;
var stopActions = 0;

function doLoadSlideShow(pContentID){

	// KW - Store mit Bildern und Daten der SlideShow - pContenID = ID des smtextdocuments	
	homeSlideShowData = new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.getSlideShowV2&pk='+pContentID,
	    root: 'data',
	    totalProperty: 'totalcount',
		autoLoad: true,
	    fields: ['pkcstslideimages', 'title', 'url', 'src'],
	    listeners: {
			load: startSlideShow			
		}
	});
}

/* ****************************************************** */

// KW - 
 function startSlideShow(pStore,pData){
 	
 	var myPaging = '';
	var myPagingButton = '<div class="btn-pp" id="button_slide_pp"></div>';
	
 	slideShowData = pData;
 	mySlideShowItems = slideShowData.length;
 	
 	var myPageNumber;
 	
 	for(var i = 0; i < pData.length; i++){
 		if((i+1) < 10){
 			myPageNumber = '0'+(i+1);
 		}else{
 			myPageNumber = i+1;
 		}
 		
 		//myPaging = myPaging + '<div class="btn-'+myPageNumber+'"><a href="javascript:void(0);" onclick="breakSlideShow('+i+');" id="img_paging_a_'+(i+1)+'" >&nbsp;</a></div>';
 	}
 	
 	myPaging = myPagingButton;
 	
 	//Ext.get('slideshow_paging_div').update(myPaging);
 	
 	// KW - aufruf der Interval-function
 	runMyInterval();
 
 }

/* ****************************************************** */

function runMyInterval(){
	// erst mal beide img-Tags auf hide setzen
	Ext.get('slideshow_img_1').hide();
	Ext.get('slideshow_img_2').hide();
	Ext.get('slideshow_img_3').hide();
	
	// KW - runner und interval erstellen
	mySlideShowTask = {
	 	run: function(){
	 		if(mySlideShowRunI < (mySlideShowItems)){
	 			
	 			/*
	 			Ext.get('slideshow_urltitle_div').update('<a href="'+slideShowData[mySlideShowRunI].data.url+'">&raquo; '+slideShowData[mySlideShowRunI].data.urltitle+'</a>');
	 			Ext.get('slideshow_img_atag').dom.href = ''+slideShowData[mySlideShowRunI].data.url;
	 			*/
	 				 			
	 			doSetImg(mySlideShowRunI,mySlideShowRunFirst, 1);
	 			
	 			mySlideShowRunI++;
	 		}else{
	 			mySlideShowRunI = 0;
	 		}
	 	},
	    interval: 6000 // 6 second
	 }
	 mySlideShowRunner = new Ext.util.TaskRunner();
	 
	 // KW - runner starten
	 mySlideShowRunner.start(mySlideShowTask);
	 
}

/* ****************************************************** */

function doSetImg(pI,pRunFirst,pDir){
	
	stopActions = 1;
	duration = 2;
	
	if(pI < mySlideShowItems - 1)
		nextImg = pI + 1;
	else
		nextImg = 0;
	
	if(pI > 0)
		prevImg = pI - 1;
	else
		prevImg = mySlideShowItems - 1;
	
	
	if(pDir > 0)
		bNext = true;
	else
		bNext = false;
	
	
	if(pRunFirst == 1){
		mySlideShowRunFirst = 0;
		
		Ext.get('slideshow_img_1').dom.src = 'files/smthumbnaildata/lead_col' + nBG + slideShowData[pI].data.src;
		
		Ext.get('slideshow_img_2').dom.src = 'files/smimagedata/lead_col' + nBG + slideShowData[nextImg].data.src;
		
		Ext.get('slideshow_img_3').dom.src = 'files/smimagedata/lead_col' + nBG + slideShowData[prevImg].data.src;
		
		Ext.get('slideshow_img_1').fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: duration,
				useDisplay: true,
				callback: function() {
					stopActions = 0;
				}
			});
		
		
	}else{
		
		if(bNext)
			next_Img = nextImg;
		else
			next_Img = prevImg;
		
		if(Ext.get('slideshow_img_1').isVisible()){
			Ext.get('slideshow_img_1').fadeOut(
			{
				endOpacity: 0,
				easing:'easeOut',
				duration: duration,
				remove: false,
				useDisplay: true
			});
			
			if(bNext){
				dSlideSet 	= 'slideshow_img_3';
				dSlideFade	= 'slideshow_img_2';
			}
			else{
				dSlideSet 	= 'slideshow_img_2';
				dSlideFade	= 'slideshow_img_3';
			}
			
			
			
			Ext.get(dSlideSet).dom.src = 'files/smimagedata/lead_col' + nBG + slideShowData[next_Img].data.src;			
			Ext.get(dSlideFade).fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: duration,
				useDisplay: true,
				callback: function() {
					stopActions = 0;
				}
			});
		}else if (Ext.get('slideshow_img_2').isVisible()){
			Ext.get('slideshow_img_2').fadeOut(
			{
				endOpacity: 0,
				easing:'easeOut',
				duration: duration,
				remove: false,
				useDisplay: true				
			});
			
			if(bNext){
				dSlideSet 	= 'slideshow_img_1';
				dSlideFade	= 'slideshow_img_3';
			}
			else{
				dSlideSet 	= 'slideshow_img_3';
				dSlideFade	= 'slideshow_img_1';
			}
			
			
			
			Ext.get(dSlideSet).dom.src = 'files/smimagedata/lead_col' + nBG + slideShowData[next_Img].data.src;
			Ext.get(dSlideFade).fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: duration,
				useDisplay: true,
				callback: function() {
					stopActions = 0;
				}
			});
			
		} else{
			Ext.get('slideshow_img_3').fadeOut(
			{
				endOpacity: 0,
				easing:'easeOut',
				duration: duration,
				remove: false,
				useDisplay: true
			});
			
			if(bNext){
				dSlideSet 	= 'slideshow_img_2';
				dSlideFade	= 'slideshow_img_1';
			}
			else{
				dSlideSet 	= 'slideshow_img_1';
				dSlideFade	= 'slideshow_img_2';
			}
			
			
			
			Ext.get(dSlideSet).dom.src = 'files/smimagedata/lead_col' + nBG + slideShowData[next_Img].data.src;
			Ext.get(dSlideFade).fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: duration,
				useDisplay: true,
				callback: function() {
					stopActions = 0;					
				}
			});
		}		
	}
	
	Ext.get('slideshow_title_div').update(slideShowData[pI].data.title);
		
	if(slideShowData[pI].data.url.length > 0 && slideShowData[pI].data.url != '##'){
	 	Ext.get('slideshow_img_atag').dom.href = ''+slideShowData[pI].data.url;
	 	Ext.get('slideshow_title_atag').dom.href = ''+slideShowData[pI].data.url;				 	
 	}else{			 		
 		Ext.get('slideshow_img_atag').dom.removeAttribute('href');
 		Ext.get('slideshow_title_atag').dom.removeAttribute('href');
 	}
	
	Ext.get('slideshow_paging_div').update('Bild <strong>' + (pI + 1) + '</strong> / ' + mySlideShowItems);
	actImg = pI;
	
}

/* ****************************************************** */

function nextSlideImg() {

	if (!stopActions) {		
	
		breakSlideShow(99);
		if(actImg == mySlideShowItems - 1) {
			doSetImg(0, 0, 1);			
		}
		else
			doSetImg(actImg + 1, 0, 1);
		
		mySlideShowRunI = actImg;
	}
}

function prevSlideImg() {
	if (!stopActions) {		
		breakSlideShow(99);
		if(actImg == 0) {
			doSetImg(mySlideShowItems - 1, 0, -1);
			
		}
		else {
			doSetImg(actImg - 1, 0, -1);
			
		}
		mySlideShowRunI = actImg;
		
	}
	
}

function breakSlideShow(pID){
	
	//console.log(pID);
	
	if(pID == 99){
		mySlideShowRunner.stopAll();
		Ext.get('slideshow_actions').update('<a href="javascript:void(0)" onclick="breakSlideShow(66);" class="play">&nbsp;</a>');
	}else if(pID == 66){
		if (!stopActions) {	
						
			if(actImg == mySlideShowRunI)
				mySlideShowRunI = actImg + 1;
			
			
			mySlideShowRunner.start(mySlideShowTask);
			Ext.get('slideshow_actions').update('<a href="javascript:void(0)" onclick="breakSlideShow(99);" class="break">&nbsp;</a>');
			/*for(var i = 0; i < slideShowData.length; i++){
				Ext.get('img_paging_a_'+(i+1)).dom.className = '';
			}*/
		}
	}else{
		mySlideShowRunner.stopAll();
		Ext.get('button_slide_pp').update('<a onclick="breakSlideShow(66);" class="play"></a>');
		
		for(var i = 0; i < slideShowData.length; i++){
			Ext.get('img_paging_a_'+(i+1)).dom.className = '';
		}
		
		Ext.get('img_paging_a_'+(pID+1)).dom.className = 'active';
		
		Ext.get('slideshow_title_div').update(slideShowData[pID].data.title+':&nbsp;');
	 	
	 	if(slideShowData[pID].data.url.length > 0 && slideShowData[pID].data.url != '##'){
	 		Ext.get('slideshow_urltitle_div').update('<a href="'+slideShowData[pID].data.url+'">&raquo; '+slideShowData[pID].data.urltitle+'</a>');
		 	Ext.get('slideshow_img_atag').dom.href = ''+slideShowData[pID].data.url;
	 	}else{
	 		Ext.get('slideshow_urltitle_div').update('<a>&raquo; '+slideShowData[pID].data.urltitle+'</a>');
	 		Ext.get('slideshow_img_atag').dom.removeAttribute('href')
	 	}
		
		if(Ext.get('slideshow_img_1').isVisible()){
			Ext.get('slideshow_img_1').fadeOut(
			{
				endOpacity: 0,
				easing:'easeOut',
				duration: 2,
				remove: false,
				useDisplay: true
			});
			Ext.get('slideshow_img_2').dom.src = slideShowData[pID].data.src;
			Ext.get('slideshow_img_2').fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: 2,
				useDisplay: true
			});
		}else{
			Ext.get('slideshow_img_2').fadeOut(
			{
				endOpacity: 0,
				easing:'easeOut',
				duration: 2,
				remove: false,
				useDisplay: true
			});
			Ext.get('slideshow_img_1').dom.src = slideShowData[pID].data.src;
			Ext.get('slideshow_img_1').fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: 2,
				useDisplay: true
			});
		}
	}
}


/* ****************************************************** */