/* *********************************
		tic_slide
			requires:	- jquery must be loaded
							- playerid as div element existing in HTML
							- arr_pics containing the imagepaths
	
	*/
	
	
	
	var tic_slide = function( 
		playerid, 		// HTML element by ID
		arr_pics, 		// Array containg the image-paths
		options			// obj, optional { columnwidth, imageheight, showtime, fadetime, shuffle (bool) }
		// columnwidth,	// optional (DEPRECATED)
		// imageheight 	// optional (DEPRECATED)
	){
		
		// check
		if( !playerid || playerid == "" ) return;
		if( !arr_pics || arr_pics.length == 0 ) return;
		
		$(function(){ // onload	(also used as closure for the settings below)
			
			// init
			var container 	= $('#' + playerid ),										// player div by id 
			 	imageid		= 0, 																// the current position inside arr_pics
			 	showtime		= ((options && options.showtime)		|| 5000 ),		//	time to show (ms)
				fadetime		= ((options && options.fadetime) 	|| 2000 ),		//	time to fade (ms)
			 	// columnwidth	= ((options && options.columnwidth) || false ),		//	width 
			 	// imageheight	= ((options && options.imageheight) || false ),		//	height
			 	newimage 	= new Image(); 												// used as preloading-container
			
			// create (and reference) image inside container 	
			container.html('<img>');
			var pic = $('#' + playerid + ' img');
			pic.attr({ src: arr_pics[0] });						// load first image 
			// if (columnwidth) pic.attr({ width: columnwidth });	
			// if (imageheight) pic.attr({ height: imageheight  });	
			pic.css({ width: '100%' });	
			
			window.setTimeout(
				function loadnext (){
					
					// calc next picture or execute autojump to next medium
					imageid++;
					if (imageid >= arr_pics.length){
						imageid = 0;
						if (typeof autoplay != "undefined"){	// check
							autoplay.jump(); // Jump if possible (only possible on page 4)
							return;
						}
					}
					
					// when finished loading
					newimage.onload = function () {
							
							// preload very next here if needed
							// see below
							
							// set new src as background image 
							container.css({ 
								backgroundImage : "url(" + encodeURI(arr_pics[imageid]) + ")",
								'background-repeat': 'no-repeat'
							})
							.find( 'img' )
								.css({ width: '100%' })	
								.animate(				// fade image away
									{ opacity: 0 },	// css to animate 
									fadetime , 			// time
									"swing", 			// type
									function () {		// callback 
										container.find('img')
											.attr({ src : arr_pics[imageid] })	// insert new source
											.css ({ opacity: 1 });					// set back to visible state
										
										// preload (shoud be above)
										var preloadid = imageid+1;
										if (preloadid < arr_pics.length) {
												var preload = new Image();	
												preload.src = arr_pics[preloadid];
										}
										
										// recursive call
										window.setTimeout( loadnext, showtime);
									}
								)
					}
					// load it
					newimage.src = arr_pics[imageid];
				
				},
			 	showtime	// initial delay
			 );
		});
		
		
	}