if(typeof piApp=='undefined'){piApp={}};if(typeof piApp.helper=='undefined'){piApp.helper={}}

/* ******************************************************************
 * Tja, baut eine Art Showreel aus mehreren DIVs. Das ganze kann dynamisch
 * angepasst werden. Es müssen CSS für inaktive und aktive Elemente mit
 * übergeben werden, damit die Zustände ineinander überfaden können. 
 * Überblendungen von Klassen hat nicht wirklich 100% funktioniert.
 * Eine INIT kann so aussehen:
 *
 * // Moving Boxes laden
 * var mb = new piApp.helper.MovingBoxes()
 * // CSS für inaktive Elemente
 * mb.inactiveItemCss = { width: 133, height: 150, 'subcss': { 'img': { width:136, height:93 }, 'p': { 'font-size':10 } } }
 * // Moving Boxes CSS für Items definieren
 * mb.activeItemCss = { width: 160, height:150, 'subcss': { 'img': { width:160, height:110 }, 'p': { 'font-size':12 } } }
 * mb.animationSpeed = 500 // Wie schnell soll alles laufen?
 * mb.init()// Moving Boxes initialisieren
 *
 * @author Robert Agthe (http://robert-agthe.de)
  *******************************************************************/
piApp.helper.MovingBoxes = function() {
	var self = this
	this.selektor = ''
	this.selektor_wrapper = ''
	this.selektor_items = ''
	this.selektor_items_all = ''
	this.selektor_next = ''
	this.selektor_prev = ''
	this.itemCount = 0
	this.offset = 20
	this.activeItemObject = {}
	this.activeItem = 3
	this.activeItemCss = {}
	this.inactiveItemCss = {}
	this.moveTo = false
	this.animationSpeed = 500
	this.animationRuns = false
	this.dia = false
	this.diaspeed = 5000
	this.wrapper_width = 0

	this.init = function() {
		self.itemCount = $(this.selektor_items).length
		self.activeItemObject = $(self.selektor_items).eq(self.activeItem)
		self.endlessScroll()
		self.events()
		self.wrapLinks()
		self.setStartCss()
		// Warten bis alle Bilder geladen sind
		$(window).load(function() {
			self.move()
		})
	}
	this.events = function(){
		$(self.selektor_next).click(self.moveNext)
		$(self.selektor_prev).click(self.movePrev)
	}
	this.diashow = function() {
		this.dia = setInterval(this.moveNext,this.diaspeed)
	}
	this.diashowStop = function() {
		clearTimeout(this.dia)
	}
	// Kopien anfertigen von den ersten un letzten Panels
	// um Endlosscrolling zu simulieren
	this.endlessScroll = function() {
		var elem = $(self.selektor_items)
		var first_element = elem
								.first()
								.clone()
								.removeAttr('id')
								.addClass('copy_of_first copy')
								.removeClass('item')

		var first_element_next = elem
								.eq(1)
								.clone()
								.removeAttr('id')
								.addClass('copy_of_first_next copy')
								.removeClass('item')

		var last_element = elem
								.last()
								.clone()
								.removeAttr('id')
								.addClass('copy_of_last copy')
								.removeClass('item')

		var last_element_pre = elem
								.eq(elem.length-2)
								.clone()
								.removeAttr('id')
								.addClass('copy_of_last_pre copy')
								.removeClass('item')

		$(self.selektor_wrapper).prepend(last_element)
		$(self.selektor_wrapper).prepend(last_element_pre)
		$(self.selektor_wrapper).append(first_element)
		$(self.selektor_wrapper).append(first_element_next)

		// Alle Elemente durchgehen und äussere Breite merken
		$(self.selektor_wrapper).children().each(function(i, elem){
			self.wrapper_width = self.wrapper_width + $(this).outerWidth()
		})
		// Wrapper auf breite aller Elemente setzen
		$(self.selektor_wrapper).css({width: self.wrapper_width})
	}
	this.getPositions = function() {
		// aktives item
		self.activeItemObject = $(self.selektor_items).eq(self.activeItem)
		var wrapper_position = $(self.selektor_wrapper).position().left
		var box_mid = $(self.selektor).offset().left+($(self.selektor).outerWidth()/2)
		var activeItemOffset = self.itemOffset(self.activeItemObject)
		var firstItemOffset = self.itemOffset($(self.selektor_wrapper).find('.copy_of_last'))
		var lastItemOffset = self.itemOffset($(self.selektor_wrapper).find('.copy_of_first'))
		self.moveToFirst = wrapper_position + (box_mid - firstItemOffset)
		self.moveToLast = wrapper_position + (box_mid - lastItemOffset)
		self.moveTo = wrapper_position + (box_mid - activeItemOffset)
	}
	this.itemOffset = function(elem) {
		var left = elem.offset().left
		var offset = left+(self.activeItemObject.width()/2)
		return offset
	}
	this.setStartCss = function() {
		var newElem = $(self.selektor_items).eq(self.activeItem)
		$(self.selektor_items_all).css(self.inactiveItemCss)
		if(typeof self.inactiveItemCss.subcss == 'object') {
			self.setCss($(self.selektor_items_all),self.inactiveItemCss)
		}
		if(typeof self.activeItemCss.subcss == 'object') {
			self.setCss(newElem,self.activeItemCss)
		}
		$(self.selektor_wrapper).css({left: self.moveTo})
		$(self.selektor_items_all).removeClass('active')
		newElem.addClass('active')
		self.activeItemObject = newElem
		self.showRelatedContent()
	}
	this.updateView = function() {
		self.animationRuns = true
		var newElem = $(self.selektor_items).eq(self.activeItem)
		$(self.selektor_items_all).animate(self.inactiveItemCss, {queue: false, duration: self.animationSpeed})
		if(typeof self.inactiveItemCss.subcss == 'object') {
			self.animateCss($(self.selektor_items_all),self.inactiveItemCss)
		}
		if(typeof self.activeItemCss.subcss == 'object') {
			self.animateCss(newElem,self.activeItemCss)
		}
		$(self.selektor_wrapper).animate({left: self.moveTo},self.animationSpeed,function(){
			self.animationRuns = false
			$(self.selektor_items_all).removeClass('active')
			newElem.addClass('active')
			self.activeItemObject = newElem
		})
		self.showRelatedContent()
	}
	this.animateCss = function(elem, css) {
		elem.animate(css,{queue: false, duration: self.animationSpeed})
		for(var key in css.subcss) if(css.subcss.hasOwnProperty(key)) {
			elem.find(key).animate(css.subcss[key],{queue: false, duration: self.animationSpeed},
				function(){
					$(self.selektor_items).removeClass('active')
					$(self.selektor_items).eq(self.activeItem).addClass('active')
					self.animationRuns = false
				}
			)
			
		}
	}
	this.setCss = function(elem, css) {
		elem.css(css)
		if(typeof css.subcss == 'object'){
			for(var key in css.subcss) if(css.subcss.hasOwnProperty(key)) {
				elem.find(key).css(css.subcss[key])
			}
		}
	}
	this.showRelatedContent = function(){
		var content_box = self.activeItemObject.attr('rel')
		$('.scrollContent').hide()
		$('#'+content_box).fadeIn('slow')
	}
	this.moveNext = function() {
		if(self.animationRuns === false) {
			self.activeItem = self.activeItem + 1
			if((self.itemCount-1) < self.activeItem){
				self.activeItem = 0
				self.jumpFirst()
			}
			self.move()
		}
	}
	this.movePrev = function() {
		if(self.animationRuns === false){
			self.activeItem = self.activeItem - 1
			if(self.activeItem < 0){
				self.activeItem = (self.itemCount-1)
				self.jumpLast()
			}
			self.move()
		}
	}
	this.move = function() {
		self.getPositions()
		self.updateView()
	}
	this.jumpFirst = function(){
		var first = $(self.selektor_wrapper).find('.copy_of_last')
		self.setCss(first,self.activeItemCss)
		$(self.selektor_wrapper).css({left: self.moveToFirst-0})
	}
	this.jumpLast = function(){
		var last = $(self.selektor_wrapper).find('.copy_of_first')
		self.setCss(last,self.activeItemCss)
		$(self.selektor_wrapper).css({left: self.moveToLast})
	}
	this.wrapLinks = function() {
		$('.BoxContent').each(function(i,val){
			var id = $(this).attr('id')
			var url = $(this).find('ul.LinkList a').attr('href')
			$('div.panel[rel='+id+'] img').wrap('<a href="'+url+'" />')
		})
	}
}