var SlideshowMotion = {

	DURATION_BETWEEN_IMAGES: 300,

	init: function(slideshowElement) {

		var onImageShown = function(imageObject) {
      var index = imageObject.index;
      var image = imageObject.node;
      //console.log('SlideshowMotion->onImageShonw() index: ' + index);
			if (index === 0) {
				//console.log('SlideshowMotion->onImageShonw() image.offsetHeight: ' + image.offsetHeight);
				//console.log('SlideshowMotion->onImageShonw() loaderLink: ');console.log(loaderLink);
				loaderLink.style.top = (Math.round(image.offsetHeight / 2) - 36) + 'px';
				loaderLink.style.left = (Math.round(image.offsetWidth / 2) + slideshowElement.offsetLeft + image.offsetLeft - 36) + 'px';
        showLoaderLink();
				if (isSlideshowPage && !hasLoaded) {
					onLoaderLinkClick()
				}
			}
			else {
				if (index === imageCount - 1) {
					setTimeout(function() {
            //console.log('SlideshowMotion->onImageShown() --- Last image shown and delay ended. ImageObject: ');console.log(imageObject);
            ImageSwitcher.hideImage(imageObject, function() {
              //console.log('SlideshowMotion->onImageShown() --- Last image hiddened. Showing first image.');
              ImageSwitcher.showImage(imageObjects[0], onImageShown);
            });
          }, 3000);
        }
				else {
          //console.log('SlideshowMotion->onImageShown() --- Hiding image in ' +  imageObject.durationBeforeHiding + ' milliseconds.');
					setTimeout(function() { ImageSwitcher.hideImage(imageObject); }, imageObject.durationBeforeHiding);
				}
			}
		};

		var onImageLoad = function() {
      imagesLoaded++;
			if (!hasLoaded && imagesLoaded >= Math.floor(imageCount / 2))  {
				hasLoaded = true;
        //console.log('enough images loaded. let\'s begin.');
				start();
			}
			if (imagesLoaded === 1) {
        /*
				var image = imageObjects[imagesLoaded - 1].node;
				//image.style.opacity = '0';
				//image.style.display = 'block';
				loaderLink.style.left = Math.round((slideshowElement.offsetWidth - image.offsetWidth) / 2) + 'px'; 
				loaderLink.style.top = Math.round((slideshowElement.offsetHeight - image.offsetHeight) / 2) + 'px'; 
        */
			}
		};

		var start = function() {
			if (!hasLoaded) {
        //console.log('SlideshowMotion->start(): Not loaded yet. Let\'s load the images.');
				List.walk(imageObjects, function(imageObject, index) {
					if (index > 0) {
						ImageSwitcher.loadImage(imageObject, onImageLoad);
					}
				});
			}
			else {
				//console.log('SlideshowMotion->start(): Images loaded already. Hiding first image.');
				Animations.fadeOut(loaderLink, 300, function() {
					loaderLink.style.visibility = 'hidden';
					if (svgLoader) {
						svgLoader.reset();
					}
					else {
						gifAnimation.style.display = 'none';
						playButtonImage.style.display = 'block';
						playButtonImage.style.opacity = '1';
					}
          //console.log('SlideshowMotion->start(): Going to second image and beyond.');
          var index = 1;
          (function showImage() {
            ImageSwitcher.showImage(imageObjects[index], onImageShown);
            index++;
            if (index < imageCount) {
              setTimeout(showImage, imageObjects[index - 1].nextImageDelay);
            }
          })();
          ImageSwitcher.hideImage(imageObjects[0]);
				});
			}
		};

		var onLoaderLinkClick = function(e) {
			List.walk(DOM.getElementsByClassName('gif-animation', loaderLink), function(gif) {
				gif.style.display = 'block';
				gifAnimation = gif;
			});
			List.walk(DOM.getElementsByClassName('play-button-image', loaderLink), function(img) {
				Animations.fadeOut(img, 300, start);
				playButtonImage = img;
			});
		};

    var showLoaderLink = function() {
      loaderLink.style.visibility = 'visible';
      Animations.fadeIn(loaderLink, 300);
    };

		var imageObjects = List.map(slideshowElement.getElementsByTagName('img'), function(image, index) {
			var imageObject = Slideshow.slideshowImageToImageObject(image, index)
			//imageObject.transitionIn = imageObject.transitionOut = 'fade';
			//imageObject.transitionInDuration = imageObject.transitionOutDuration = 100;
			return imageObject;
		});
		var imageCount = imageObjects.length;
		var isSlideshowPage = DOM.hasClass(slideshowElement, 'page-slideshow');

		var imageSwitcher = ImageSwitcher.init(imageObjects, {
			onImageShown: onImageShown
		}, true, false);
		var loaderLink = DOM.getElementsByClassName('slideshow-loader', slideshowElement.parentNode)[0];

		var hasLoaded = false;
		var imagesLoaded = 0;
		var loadImageIndex = 0;

		var svgLoader;
		var gifAnimation;
		var playButtonImage;

		ImageSwitcher.loadImage(imageObjects[0], function() {
      //console.log('SlideshowMotion->init() --- Showing first image.');
			ImageSwitcher.showImage(imageObjects[0], onImageShown);
		});
		if (false && Modernizr.svg) {
			List.walk(loaderLink.getElementsByTagName('object'), function(obj) {
				DOM.onSvgLoad(obj, function(svgDoc) {
					svgLoader = SvgLoader.init(svgDoc, start);
				}); // end on svg load
			});
		} // end if svg
		else {
			DOM.addEventListener(loaderLink, 'click', onLoaderLinkClick , true);
		}

	}

};

var SvgLoader = {

	init: function(svgDocument, onClick) {

		var reset = function() {
			clearInterval(animationIntervalID);
			topCircle.style.display = 'inline';
			topCircle.removeAttribute('opacity');
			playButton.removeAttribute('opacity');
			isAnimationRunning = false;
		}

		var fadeOutTopCircleAndPlay = function() {
			if (topOpacity >= 0) {
				topOpacity -= 0.05;
				topCircle.setAttribute('opacity', topOpacity);
				playButton.setAttribute('opacity', topOpacity);
			}
			else {
				topCircle.style.display = 'none';
			}
		};

		var rotateCutCircle = function() {
			var cutAngle = 0;
			var transform = cutCircle.getAttribute('transform');
			if (typeof(transform) !== 'string') {
				transform = 'rotate(1, 167, 850)';
			}
			else if (transform.indexOf('rotate') === -1) {
				transform += ' rotate(1, 167, 885)';
			}
			else {
				cutAngle = parseInt(transform.replace(/.*rotate\(([0-9]*),?.*/,'$1'), 10);
				transform = transform.replace(/rotate\(([0-9]*)/, 'rotate(' + (cutAngle + 3));
			}
			cutCircle.setAttribute('transform', transform);
		};

		var element = svgDocument.documentElement;
		//var wasElementClicked = false;
		var animationIntervalID;
		var isAnimationRunning = false;
		var topCircle = svgDocument.getElementById('layer1');
		var playButton = svgDocument.getElementById('layer3');
		var cutCircle = svgDocument.getElementById('layer4');
		var topOpacity = 1;

		element.addEventListener('click', function() {
			if (!isAnimationRunning) {
				isAnimationRunning = true;
				animationIntervalID = setInterval(function() {
					fadeOutTopCircleAndPlay();
					rotateCutCircle();
				}, 16);
				if (typeof(onClick) === 'function') {
					onClick();
				}
			}
		});

		return {
			reset: reset
		};
	}

};