/*
 * 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;

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.getSlideShow&pk='+pContentID,
	    root: 'data',
	    totalProperty: 'totalcount',
		autoLoad: true,
	    fields: ['pkcstslideimages', 'title','url','urltitle','src'],
	    listeners: {
			load: startSlideShow			
		}
	});
}

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

// KW - 
 function startSlideShow(pStore,pData){
 	
 	var myPaging = '';
	var myPagingButton = '<div class="btn-pp" id="button_slide_pp"><a href="javascript:void(0);" onclick="breakSlideShow(99);" class="pause">Pause</a></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)+'" >'+( i + 1 )+'</a></div>';
 	}
 	
 	myPaging = 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();
	
	// KW - runner und interval erstellen
	mySlideShowTask = {
	 	run: function(){
	 		if(mySlideShowRunI < (mySlideShowItems)){
	 			
	 			Ext.get('slideshow_title_div').update(slideShowData[mySlideShowRunI].data.title+':&nbsp;');
	 			/*
	 			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;
	 			*/
	 			
	 			if(slideShowData[mySlideShowRunI].data.url.length > 0 && slideShowData[mySlideShowRunI].data.url != '##'){
			 		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;
			 	}else{
			 		Ext.get('slideshow_urltitle_div').update('<a>&raquo; '+slideShowData[mySlideShowRunI].data.urltitle+'</a>');
			 		Ext.get('slideshow_img_atag').dom.removeAttribute('href')
			 	}
	 			
	 			
	 			
	 			
	 			if(mySlideShowRunFirst == 1){
	 				Ext.get('img_paging_a_'+(mySlideShowRunI+1)).dom.className = 'active';
	 				mySlideShowClassID = (mySlideShowRunI+1);
	 			}else{
	 				Ext.get('img_paging_a_'+mySlideShowClassID).dom.className = '';
	 				Ext.get('img_paging_a_'+(mySlideShowRunI+1)).dom.className = 'active';
	 				mySlideShowClassID = (mySlideShowRunI+1);
	 			}
	 			doSetImg(mySlideShowRunI,mySlideShowRunFirst);
	 			
	 			mySlideShowRunI++;
	 		}else{
	 			mySlideShowRunI = 0;
	 		}
	 	},
	    interval: 6000 // 6 second
	 }
	 mySlideShowRunner = new Ext.util.TaskRunner();
	 
	 // KW - runner starten
	 mySlideShowRunner.start(mySlideShowTask);
	 
}

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

function doSetImg(pI,pRunFirst){
	
	if(pRunFirst == 1){
		mySlideShowRunFirst = 0;
		Ext.get('slideshow_img_1').dom.src = slideShowData[pI].data.src;
		Ext.get('slideshow_img_1').fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: 2,
				useDisplay: true
			});
	}else{
		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[pI].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[pI].data.src;
			Ext.get('slideshow_img_1').fadeIn(
			{
				endOpacity: 1,
				easing:'easeOut',
				duration: 2,
				useDisplay: true
			});
		}	
	}
}

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

function breakSlideShow(pID){
	
	//console.log(pID);
	
	if(pID == 99){
		mySlideShowRunner.stopAll();
		Ext.get('button_slide_pp').update('<a onclick="breakSlideShow(66);" class="play">Play</a>');
	}else if(pID == 66){
		mySlideShowRunner.start(mySlideShowTask);
		Ext.get('button_slide_pp').update('<a onclick="breakSlideShow(99);" class="pause">Pause</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">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
			});
		}
	}
}

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