/***************************************************************
*  Copyright notice
*
*  (c) 2010 M. Briefs <marcel.briefs@lbrmedia.de>
*  All rights reserved
*
*  This script is part of the TYPO3 project. The TYPO3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/

/**
 * Method "xpctypeslidebox" extends "jQuery" for the "xp_ctype_slidebox" extension.
 *
 * @author	M.Briefs <m.briefs@headsvision.net>
 * @package	TYPO3
 * @subpackage	xp_ctype_slidebox
 * @version 0.0.0
 * @date: 2010-05-18
 * 
 */
 
(function($) {
	$.fn.extend({
			
		xpctypeslideboxMode4: function(options) {
			var defaults = {
				'allH': 200,
				'allW': 800,
				'boxH': 200,
				'boxW': 300,
				'aniTime': 500,
				'opacityLeftRight': .4,
				'opacityCenter': 1,
				'opacityLeftRightHidden': 0,
				'sizeLeftRight': .9,
				'sizeLeftRightHidden': .4,
				'zIndexOffset': 2,
				'noOverlay': true,
				'offsetLeft': 7,
				'offsetRight': 4,
				'useArrows': true,
				'arrowLeft': 'typo3conf/ext/xp_ctype_slidebox/res/arrowLeft2.png',
				'arrowRight': 'typo3conf/ext/xp_ctype_slidebox/res/arrowRight2.png',
				'opacityArrows': .3,
				'opacityArrowsOver': .6
			};
			
			var options =  $.extend(defaults, options);
			var obj, c, btnLeftObj, btnRightObj;
			var iArr = new Array();
			var iSizes = new Array();
			var cssLeftHidden, cssLeft, cssCenter, cssRight, cssRightHidden;
			var posLeftHidden, posLeft, posCenter, posRight, posRightHidden;
			
			
			var fn = {
				calculateImageSize: function (sizeOrg) {
					if (c.boxW/c.boxH > sizeOrg.width > sizeOrg.height){
						return {
							'width': c.boxW,
							'height': Math.ceil(sizeOrg.height/sizeOrg.width*c.boxW)
						}
					} else {
						return {
							'width': Math.ceil(sizeOrg.width/sizeOrg.height*c.boxH),
							'height': c.boxH
						}
					}
				},
				getCSSLeft: function (k){
					var h = iSizes[k].h;
					var w = iSizes[k].w;
					return {
						'left': (c.noOverlay) ? Math.ceil(c.allW/2-iSizes[posCenter].w/2-c.offsetLeft-w*c.sizeLeftRight) : '0',
						'margin-top': Math.ceil(h/-2+h*((1-c.sizeLeftRight)/2)),
						'margin-left': 0,
						'opacity': c.opacityLeftRight,
						'width': Math.ceil(w*c.sizeLeftRight),
						'height': Math.ceil(h*c.sizeLeftRight)
					}
				},
				getCSSLeftHidden: function (k){
					var h = iSizes[k].h;
					var w = iSizes[k].w;
					return {
						'left': w*-1,
						'margin-top': Math.ceil(h/-2+h*((1-c.sizeLeftRightHidden)/2)),
						'margin-left': 0,
						'opacity': c.opacityLeftRightHidden,
						'width': Math.ceil(w*c.sizeLeftRightHidden),
						'height': Math.ceil(h*c.sizeLeftRightHidden)
					}
				},
				getCSSRight: function (k){
					var h = iSizes[k].h;
					var w = iSizes[k].w;
					return {
						'left': (c.noOverlay) ? Math.ceil(c.allW/2+iSizes[posCenter].w/2+c.offsetRight) : Math.ceil(c.allW-w*.8),
						'margin-top': Math.ceil(h/-2+h*((1-c.sizeLeftRight)/2)),
						'margin-left': 0,
						'opacity': c.opacityLeftRight,
						'width': Math.ceil(w*c.sizeLeftRight),
						'height': Math.ceil(h*c.sizeLeftRight)
					}
				},
				getCSSRightHidden: function (k){
					var h = iSizes[k].h;
					var w = iSizes[k].w;
					return {
						'left': (c.noOverlay) ? Math.ceil(c.allW) : Math.ceil(c.allW-w*c.sizeLeftRightHidden),
						'margin-top': Math.ceil(h/-2+h*((1-c.sizeLeftRightHidden)/2)),
						'margin-left': 0,
						'opacity': c.opacityLeftRightHidden,
						'width': Math.ceil(w*c.sizeLeftRightHidden),
						'height': Math.ceil(h*c.sizeLeftRightHidden)
					}
				},
				getCSSCenter: function (k){
					var h = iSizes[k].h;
					var w = iSizes[k].w;
					return {
						'left': '50%',
						'margin-left': Math.ceil(w/-2),
						'margin-top': Math.ceil(h/-2),
						'width': w,
						'height': h,
						'opacity': c.opacityCenter
					}
				},
				initPositions: function(){
					var count = iArr.length;
					posLeftHidden = (count>0) ? count-1 : 0;
					posLeft = 0;
					posCenter = (count>0) ? 1 : 0;
					posRight = (count>1) ? 2 : count-1;
					posRightHidden = (count>2) ? 3 : count-1;
					
					// CSS fuer die Felder definieren
					cssLeftHidden = fn.getCSSLeftHidden(posLeftHidden);
					cssLeft = fn.getCSSLeft(posLeft);
					cssCenter = fn.getCSSCenter(posCenter);
					cssRight = fn.getCSSRight(posRight);
					cssRightHidden = fn.getCSSRightHidden(posRightHidden);
					
					// Bilder positionieren
					fn.setImages();
				},
				rotatePositionsLeft: function(){
					var count = iArr.length;
					posLeftHidden = posLeft;
					posLeft = posCenter;
					posCenter = posRight;
					posRight = posRightHidden;
					if (posRightHidden+1<count) posRightHidden = posRightHidden+1;
					else posRightHidden = 0;
					fn.setImages();
				},
				rotatePositionsRight: function(){
					var count = iArr.length;
					posRightHidden = posRight;
					posRight = posCenter;
					posCenter = posLeft;
					posLeft = posLeftHidden;
					if (posLeftHidden==0) posLeftHidden = count-1;
					else posLeftHidden = posLeftHidden-1;
					fn.setImages();
				},
				setImages: function () {
					obj.find("img").hide();
					iArr[posLeftHidden].show();
					iArr[posLeftHidden].css(cssLeftHidden);
					iArr[posLeft].show();
					iArr[posLeft].css(cssLeft);
					iArr[posCenter].show();
					iArr[posCenter].css(cssCenter);
					iArr[posRight].show();
					iArr[posRight].css(cssRight);
					iArr[posRightHidden].show();
					iArr[posRightHidden].css(cssRightHidden);
					iArr[posLeft].css({ 'z-index': c.zIndexOffset+1 });
					iArr[posCenter].css({ 'z-index': c.zIndexOffset+2 });
					iArr[posRight].css({ 'z-index': c.zIndexOffset+1 });
					//console.log(posLeftHidden+" "+posLeft+" "+posCenter+" "+posRight+" "+posRightHidden);
				},
				handleBtnRight: function () {
					btnRightObj.click(function () {
							btnRightObj.unbind("click");
							fn.rotateLeft(function () { fn.handleBtnRight(); });
					});
				},
				handleBtnLeft: function () {
					btnLeftObj.click(function () {
							btnLeftObj.unbind("click");
							fn.rotateRight(function () { fn.handleBtnLeft(); });
					});
				},
				rotateLeft: function (f) {
					iArr[posRightHidden].animate(fn.getCSSRight(posRightHidden), c.aniTime);
					iArr[posRight].animate(fn.getCSSCenter(posRight), c.aniTime);
					iArr[posCenter].animate(fn.getCSSLeft(posCenter), c.aniTime);
					iArr[posLeft].animate(fn.getCSSLeftHidden(posLeft), c.aniTime, function () {
						fn.rotatePositionsLeft();
						if (f && typeof f == "function") f();
					});
					
				},
				rotateRight: function (f) {
					iArr[posLeftHidden].animate(fn.getCSSLeft(posLeftHidden), c.aniTime);
					iArr[posLeft].animate(fn.getCSSCenter(posLeft), c.aniTime);
					iArr[posCenter].animate(fn.getCSSRight(posCenter), c.aniTime);
					iArr[posRight].animate(fn.getCSSRightHidden(posRight), c.aniTime, function () {
						fn.rotatePositionsRight();
						if (f && typeof f == "function") f();
					});
				},
				handleMousewheel: function () {
					obj.bind('mousewheel', function(event, delta) {
							obj.unbind("mousewheel");
							if (delta<0){
								fn.rotateLeft(function () { fn.handleMousewheel(); });
							} else {
								fn.rotateRight(function () { fn.handleMousewheel(); });
							}
							return false;
					});
				}
				
			}; // fn -->
			
			
			return this.each(function() {
				c = options;
				obj = $(this);
				var countImages = obj.find("img").size();
				// Gibt es uberhaupt Bilder?
				if (countImages == 0) return;
				
				// Sind genug Bilder da?
				if (countImages < 5){ // nein?
					for (var i = countImages; i <=5; i++){ // clone-first-one
						obj.find("img:first").clone().appendTo(obj);
					}
				}
				
				// Bilder holen und Groessen berechnen
				obj.find("img").each(function () {
						var sizeNew = fn.calculateImageSize({ 'width': $(this).width(), 'height': $(this).height() }); // neue Bildgroesse berechnen 
						$(this).css({ 'position': 'absolute', 'top': '50%' }); // unveraenderliche Styles
						iArr.push($(this)); // Bilder ab ins Array
						iSizes.push({ 'w': sizeNew.width, 'h': sizeNew.height }); // neue Bildgroesse speichern als Berechnungswert fuer spaeter
				});
				
				
				// Wrap erstellen (Container fuer alles)
				obj.css({ 'position': 'relative', 'width': c.allW, 'height': c.allH, 'overflow': 'hidden' });
				
				// Bildpositionen definieren und Bilder initialisieren
				fn.initPositions();
				
				// Buttons
				obj.append('<div class="btnRight"></div>');
				btnRightObj = obj.find("div.btnRight");
				btnRightObj.css({ 'position': 'absolute', 'width': Math.ceil(c.boxW*c.sizeLeftRight), 'height': c.allH, 'right': 0, 'background': 'red', 'opacity': 0, 'cursor': 'pointer', 'z-index': c.zIndexOffset+3 });
				if (c.useArrows){
					btnRightObj.css({
							'background': 'url('+c.arrowRight+') 100% 50% no-repeat',
							'opacity': c.opacityArrows
					});
					btnRightObj.hover(
						function () { $(this).css({ 'opacity': c.opacityArrowsOver }); },
						function () { $(this).css({ 'opacity': c.opacityArrows }); }
					);
				}
				fn.handleBtnRight();
				
				obj.append('<div class="btnLeft"></div>');
				btnLeftObj = obj.find("div.btnLeft");
				btnLeftObj.css({ 'position': 'absolute', 'width': Math.ceil(c.boxW*c.sizeLeftRight), 'height': c.allH, 'left': 0, 'background': 'red', 'opacity': 0, 'cursor': 'pointer', 'z-index': c.zIndexOffset+3 });
				if (c.useArrows){
					btnLeftObj.css({
							'background': 'url('+c.arrowLeft+') 0 50% no-repeat',
							'opacity': c.opacityArrows
					});
					btnLeftObj.hover(
						function () { $(this).css({ 'opacity': c.opacityArrowsOver }); },
						function () { $(this).css({ 'opacity': c.opacityArrows }); }
					);
				}
				fn.handleBtnLeft();
				
				// Mousewheel
				fn.handleMousewheel();
			});
		}, // xpctypeslideboxMode4
			
		xpctypeslideboxMode3: function(options) {
			/**
			Default-Werte
			*/
			var defaults = {
				'boxH': 75,
				'boxW': 75,
				'aniTime': 500,
				'rotationTime': 3000
			};
			
			var c;
			var obj, containerObj, container2Obj;
			var options =  $.extend(defaults, options);
			var pointer = 0; // Bild-Position
			var images = new Array();
			
			
			/**
			Funktionsbibliothek
			*/
			var fn = {
				rotate: function () {
					pointer++;
					if (pointer >= images.length) pointer = 0;
					// Bild geladen?
					//var img = obj.find(".tx-xpctypeslidebox-mode3-images li:eq("+pointer+") img")[0];
					//img.onload = function () {
						
						setTimeout(	function() {
							containerObj.html(container2Obj.html());
							containerObj.show();
							container2Obj.html(images[pointer]);
							containerObj.fadeOut(c.aniTime, function () { fn.rotate(); });
						}, c.rotationTime);
					//}
				}
			}; // fn -->
			
			
			/**
			Schleife fuer jedes gefundene Element
			*/
			return this.each(function() { 
				c = options;
				obj = $(this);
				containerObj = obj.find(".tx-xpctypeslidebox-mode3-container");
				container2Obj = obj.find(".tx-xpctypeslidebox-mode3-container2");
				// Box-CSS setzen
				obj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden'
				});
				containerObj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden',
						'position': 'absolute',
						'top': 0,
						'left': 0,
						'z-index': 2
				});
				container2Obj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden',
						'position': 'absolute',
						'top': 0,
						'left': 0,
						'z-index': 1
				});
				
				// Bilder holen
				obj.find(".tx-xpctypeslidebox-mode3-images li").each(function () {
						images.push($(this).html());
				});
				
				// Abbruch, wenn wir keine Bilder haben
				if (!images.length) return;
				
				// Bilder ausblenden
				obj.find(".tx-xpctypeslidebox-mode3-images").hide();
				
				// 1. Bild laden
				container2Obj.html(images[0]);
				
				// Rotieren
				fn.rotate();
			
			}); // Hauptprogramm -->
		},
			
			
		xpctypeslideboxMode2: function(options) {
			/**
			Default-Werte
			*/
			var defaults = {
				'boxH': 75,
				'boxW': 75,
				'aniTime': 500
			};
			
			var c;
			var obj, containerObj, container2Obj, btnLeftObj, btnRightObj;
			var options =  $.extend(defaults, options);
			var pointer = 0; // Bild-Position
			var images = new Array();
			
			
			/**
			Funktionsbibliothek
			*/
			var fn = {
				animate: function () {
					containerObj.html(container2Obj.html());
					containerObj.show();
					container2Obj.html(images[pointer]);
					containerObj.fadeOut(c.aniTime);
				}
			}; // fn -->
			
			
			/**
			Schleife fuer jedes gefundene Element
			*/
			return this.each(function() { 
				c = options;
				obj = $(this);
				containerObj = obj.find(".tx-xpctypeslidebox-mode2-container");
				container2Obj = obj.find(".tx-xpctypeslidebox-mode2-container2");
				btnLeftObj = obj.find(".tx-xpctypeslidebox-mode2-arrowLeft");
				btnRightObj = obj.find(".tx-xpctypeslidebox-mode2-arrowRight");
				// Box-CSS setzen
				obj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden'
				});
				containerObj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden',
						'position': 'absolute',
						'top': 0,
						'left': 0,
						'z-index': 2
				});
				container2Obj.css({
						'width': c.boxW+"px",
						'height': c.boxH+"px",
						'overflow': 'hidden',
						'position': 'absolute',
						'top': 0,
						'left': 0,
						'z-index': 1
				});
				
				// Bilder holen
				obj.find(".tx-xpctypeslidebox-mode2-images li").each(function () {
						images.push($(this).html());
				});
				
				// Abbruch, wenn wir keine Bilder haben
				if (!images.length) return;
				
				// Bilder ausblenden
				obj.find(".tx-xpctypeslidebox-mode2-images").hide();
				
				// 1. Bilder laden
				container2Obj.html(images[0]);
				
				// Navigation ab 2 Elementen
				if (images.length > 1){
					btnLeftObj.show();
					btnLeftObj.click(function () {
							pointer--;
							if (pointer<0) pointer = images.length-1;
							fn.animate();
					});
					btnRightObj.show();
					btnRightObj.click(function () {
							pointer++;
							if (pointer>=images.length) pointer = 0;
							fn.animate();
					});
				}
			
			}); // Hauptprogramm -->
		},
		
		
		
		xpctypeslidebox: function(options) {
			/**
			Default-Werte
			*/
			var defaults = {
				'allH': 75,
				'boxH': 75,
				'boxW': 75,
				'boxOffset': 5,
				'aniTime': 500
			};
			
			var options =  $.extend(defaults, options);
			
			
			/**
			Funktionsbibliothek
			*/
			var fn = {
				displayArrows: function(obj, slider, arrowLeft, arrowRight){
					if (slider.position().left<0){
						arrowLeft.show();
					} else {
						arrowLeft.hide();
					}
					if (slider.position().left+slider.width()>=obj.width()){
						arrowRight.show();
					} else {
						arrowRight.hide();
					}
				}
			}; // fn -->
			
			
			/**
			Schleife fuer jedes gefundene Element
			*/
			return this.each(function() { 
				var c = options;
				var obj = $(this);
				
				/**
				Die Pfeile erzeugen
				*/
				var arrowLeft = obj.find(".tx-xpctypeslidebox-pi1-container-arrowLeft");
				arrowLeft.css({
					'position': 'absolute',
					'display': 'block',
					'width': 7,
					'height': c.allH,
					'left': -20,
					'z-index': 10,
					'top': 0,
					'background': 'transparent url(typo3conf/ext/xp_ctype_slidebox/res/arrowLeft.gif) 0 50% no-repeat',
					'cursor': 'pointer'
				});
				arrowLeft.hover(
					function () {
						$(this).css({'background-position': '-10px 50%'});
					},
					function () {
						$(this).css({'background-position': '0 50%'});
					}
				);
				
				var arrowRight = obj.find(".tx-xpctypeslidebox-pi1-container-arrowRight");
				arrowRight.css({
					'position': 'absolute',
					'display': 'block',
					'width': 7,
					'height': c.allH,
					'right': -20,
					'z-index': 10,
					'top': 0,
					'background': 'transparent url(typo3conf/ext/xp_ctype_slidebox/res/arrowRight.gif) 0 50% no-repeat',
					'cursor': 'pointer'
				});
				arrowRight.hover(
					function () {
						$(this).css({'background-position': '-10px 50%'});
					},
					function () {
						$(this).css({'background-position': '0 50%'});
					}
				);
				
				
				/**
				Container
				*/
				var wrap = obj.find(".tx-xpctypeslidebox-pi1-container-wrap");
				wrap.css({
					'width': obj.width(),
					'height': c.allH,
					'overflow': 'hidden'
				});
				
				/**
				Die Bilder setzen
				*/
				var counter = -1;
				obj.find('.tx-xpctypeslidebox-pi1-container-image').each(function () {
						counter++;
						var imageObj = $(this);
						imageObj.css({
							'position': 'absolute',
							'top': 0,
							'left': counter * (c.boxW + c.boxOffset),
							'width': c.boxW,
							'height': c.boxH,
							'overflow': 'hidden'
						});
						
				});
				
				var slider = obj.find(".tx-xpctypeslidebox-pi1-container-slider");
				slider.css({
					'position': 'absolute',
					'left': 0,
					'top': 0,
					'width': counter * (c.boxW + c.boxOffset) + c.boxW
				});
				
				fn.displayArrows(obj, slider, arrowLeft, arrowRight);
				
				
				arrowLeft.click(function(){
					arrowLeft.hide();
					arrowRight.hide();
					slider.animate(
						{ 'left': '+='+Math.ceil(c.boxW+c.boxOffset) },
						c.aniTime,
						function () { fn.displayArrows(obj, slider, arrowLeft, arrowRight); }
					);
				});
				
				arrowRight.click(function(){
					arrowLeft.hide();
					arrowRight.hide();
					slider.animate(
						{ 'left': '-='+Math.ceil(c.boxW+c.boxOffset) },
						c.aniTime,
						function () { fn.displayArrows(obj, slider, arrowLeft, arrowRight); }
					);
				});
				
			
			}); // Hauptprogramm -->
		}
	});

})(jQuery);