/**
 * jQuery Slideshow plugin
 *
 * @author	Markus Pape <pape@sporet-net-gmbh.de>
 * @version	0.0.1
 * @updated	2010-11-18
 */

(function($){
	$.fn.slideshow = function(options) {

		// extend default options
		var opts = $.extend({}, $.fn.slideshow.defaults, options);
		
		return this.each(function() {
			var $reel = $(this);
			var $canvas = $reel.find('.canvas');
			var $loader;
			
			var currentFrameNr=1;
			var currentFrame; //for hide and show if <img ...> is used
			var loop, fadeInIntv, fadeOutIntv;
			var intvCheckLoop;
			var loop_ended=true;
			var count=0;
			
			var links = [];
			var frames = [];
			
			var boxWidth;
			var boxHeight;
			var playSpeed;	
				
			var frame_data = new Array();
			
			
			jQuery.ajax({
				type: "GET",
				async:   false,
				url: opts.imageurl+"test.xml",
				dataType: "xml",
				success: function(xml) {
					//alert("xml: " + xml.toString());
					$(xml).find('FRAME').each(function(){
						//var id = $(this).attr('id');
						var image = $(this).find('IMAGE').text();
						var url = $(this).find('TARGET_URL').text();
						frame_data.push(new Array (image,url));
						//alert("image: " + frame_data[0][0]+"\n"+"url: " + frame_data[0][1]);
					});
					$options = $(xml).find('OPTIONS');
					
					boxWidth = $options.find('boxWidth').text();
					boxHeight= $options.find('boxHeight').text();;
					playSpeed= $options.find('playSpeed').text();;
					
					//alert("test: " + $(xml).find('OPTIONS').text());
					frames = loadFrames();
					
				}
				
			});	
			

			// load the images, updates the loading bar and returns image array
			function loadFrames() {
				
				// setup visuals
				$loader = $('<div class="loading-bar"><div class="bar"></div></div>').prependTo($canvas);	
				
				$canvas.css({'cursor':'pointer'});
				$canvas.css({'width':boxWidth});
				$canvas.css({'height':boxHeight});
				
				var frames = [];
					
				var cnt = 0;
				var updateBar = function() {
					cnt++;
					var barWidth = (100/frame_data.length)*cnt;
					$loader.find('.bar').css({
						'width':barWidth+'%'
						});
					if(cnt == frame_data.length) {
						init();
					}
				}
				
				for (i=0;i<frame_data.length;i++) {
					frames[i] = $('<img />').attr("src", opts.imageurl+frame_data[i][0]+"?"+new Date().getTime()).attr('class', 'image_frame2').attr('id', 'image_frame_'+i).load(updateBar);
					links[i] = $('<a />').attr("href", frame_data[i][1]).attr('class', 'a_image_frame2').attr('id', 'a_image_frame_'+i);
					frames[i].appendTo(links[i]);
					links[i].appendTo($canvas);
					//alert("Data Loaded:\n\n" + frames[i].attr('src')+"\n");
				}
				currentFrame=frames[currentFrameNr];
				
				return frames;
			}

			// show frame
			function showFrame(frameNr) {
				if(frameNr > 0 && frameNr <= frames.length) {
					if (currentFrameNr != frameNr)
						fadeOut(currentFrame,100);
					
					currentFrameNr = frameNr;
					currentFrame=frames[frameNr-1];
					
					currentFrame.css({'visibility':'visible','display':'inline',opacity: 0,'filter':'alpha(opacity=0)'});
					fadeIn(currentFrame,0);
					//$image.attr('src', frames[axis][frame-1].attr('src'));
					/*$canvas.css({
						'background-image':'url('+frames[frame-1].attr('src')+')'
					});*/
				}
			}
			
			function fadeIn(frame,step) {
				step = step || 0;
	
				frame.css({opacity : (step/100)});
				frame.css({'filter':'alpha(opacity=' + step + ')'}); // IE
				
				step = step + 2;
	
				if (step <= 100) {
					window.setTimeout(function () { fadeIn(frame,step); }, 20);
				}
			}
			
			function fadeOut(frame,step) {
				step = step || 100;
	
				frame.css({opacity : (step/100)});
				frame.css({'filter':'alpha(opacity=' + step + ')'}); // IE
				
				step = step - 2;
	
				if (step > 0) {
					window.setTimeout(function () { fadeOut(frame,step); }, 20);
				} else {
					frame.css({'visibility':'hidden','display':'none'});
				}
			}

			// show next frame
			function showNext() {
				if (opts.inv==true) //andere Drehrichtung, wenn bilder in anderer reihenfolge
					(currentFrameNr == 1) ? showFrame(frames.length) : showFrame(currentFrameNr-1);
				else
					(currentFrameNr == frames.length) ? showFrame(1) : showFrame(currentFrameNr+1);
			}

			// show previous frame
			function showPrev() {
				if (opts.inv==true) //andere Drehrichtung, wenn bilder in anderer reihenfolge
					(currentFrameNr == frames.length) ? showFrame(1) : showFrame(currentFrameNr+1);
				else
					(currentFrameNr == 1) ? showFrame(frames.length) : showFrame(currentFrameNr-1);	
			}

			// play in a loop
			function play() {
				pause();
				loop = setInterval(showNext, playSpeed);
			}
			
			// play one loop
			function play_once(){
				pause();
				loop_ended=false;
				loop = setInterval (function () { play_some_frames(frames.length); }, playSpeed);
			}
			// play a frames till limit is reached
			function play_some_frames(count2){
				if (count<count2) {
					showNext();
					count++;
				} else {
					pause();
				}
			}

			// pause the loop
			function pause() {
				count=0;
				clearInterval(loop);
				//clearInterval(intvCheckLoop);
				loop_ended=true;
			}			

			// reset to first frame
			function reset() {
				count=0;
				showFrame(1);
			}

			function mouse(){
				// track drag movements
				var curPosX = 0;
				var curPosY = 0;
				var isDrag = false;
		
				$canvas.mousedown(function(e) {
					isDrag=true;
					e.preventDefault();
				});
				
				$(document).mouseup(function(e) {
					isDrag=false;
				});
		
				$(document).mousemove(function(e){
					if(isDrag) {
						var difX = (e.pageX - curPosX);
						var difY = (e.pageY - curPosY);
						
						function rotate(dif) {
							curPosX = e.pageX;
							curPosY = e.pageY;
							if(dif < 0) {
								showNext();
							} else {
								showPrev();
							}
						}
						
						if( difX>20 || difX<-20) {
							rotate(-difX);
						} else if( difY>20 || difY<-20) {
							rotate(difY);
						}
						
					}
				});
			}
			// initialize after all images loaded
			function init() {
				// remove loading bar
				$loader.remove();

				// display first frame
				showFrame(1);
				
				if (opts.mouse ==true )
					mouse();
				
				play();	
			}
			 
		});
		
	};
	// default options
	$.fn.slideshow.defaults = {
		imageurl: 'frames/slidetest/', // absolut oder relativ
		inv:false,
		mouse:false	
	};
})(jQuery);