/* ******************************************************************
 * Überblendet Bilder oder DIV Elemente auf einer HTML Seite. Damit
 * das Konstrukt funktioniert, sollte folgende HTML Konstruktion 
 * vorliegen:
 *
 * @author Robert Agthe (http://robert-agthe.de)
  *******************************************************************/
if(typeof SH == 'undefined'){var SH = {};if(typeof SH.helper == 'undefined'){SH.helper={}}}
SH.helper.stageFlow = function() {
	var self = this

	self.status_play = 'play'
	self.timer = 0
	self.slides = 0 // How many Slides?
	self.active_slide = 1 // Which Slide is active (int)
	self.animation_speed = 1000
	self.animation = false // animation in progress?
	self.diashow_speed = 10000

	self.views = {
		getIndexes: function() {
			self.slides = $('#slides div.slide-content').length
		},
		makeActive: function() {
			self.animation = true
			$('#slides div.slide-content').removeClass('old_active')
			$('#slides div.slide-content.active')
				.removeClass('active')
				.addClass('old_active')
				.css({'z-index': (self.slides-1)})
				.fadeOut(self.animation_speed)
			$('#slides div.slide-content')
				.eq((self.active_slide-1))
				.addClass('active')
				.css({'z-index': self.slides})
				.fadeIn(self.animation_speed,
					function(){
						self.animation = false
					})
		},
		setStatusPlay: function() {
			var playButton = $("#prevNext div.Pause")
			if(self.status_play == 'stop') {
				playButton.removeClass('Stop')
				playButton.addClass('Play')
			} else {
				playButton.removeClass('Play')
				playButton.addClass('Stop')
			}
		},
		makeSlides: function() {
			var html = ''
			for(i=0;i<stage_slides.length;i++){
				html = html+'<div class="slide-content">\
				<div class="Title">\
					<a href="'+stage_slides[i].href+'">\
						<span>'+stage_slides[i].title+'</span>\
					</a>	\
					</div>\
						<img src="'+stage_slides[i].url+'" alt="'+stage_slides[i].alt+'" />\
					</div>'
			}
			// html ins DOM einfügen
			$('#slides').append(html)
			$('#slides div.slide-content')
				.css({"z-index":0,'display':"none"})

			// Wenn es Javascript gibt, dann Playertasten anzeigen
			$("#prevNext").show();
		}
	}

	self.controller = {
		stop: function() {
			self.status_play = 'stop'
			clearTimeout(self.timer)
			self.views.setStatusPlay()
		},
		play: function(){
			self.status_play = 'play'
			self.timer = setInterval(self.controller.next,self.diashow_speed)
			self.views.setStatusPlay()
		},
		next: function(e) {
			if(!self.animation) {
				if((self.active_slide + 1)> self.slides) {
					self.active_slide = 1
				} else {
					self.active_slide  = self.active_slide + 1
				}
				self.views.makeActive()
			}
		},
		prev: function(e) {
			if(!self.animation) {
				if((self.active_slide - 1)< 1) {
					self.active_slide = self.slides
				} else {
					self.active_slide  = self.active_slide - 1
				}
				self.views.makeActive()
			}
		}
	}


	self.events = function() {
		$("#prevNext div.Pause.Play").live('click',function(){self.controller.play()})
		$("#prevNext div.Pause.Stop").live('click',function(){self.controller.stop()})
		$("#prevNext div.Prev").bind('click', self.controller.prev)
		$("#prevNext div.Next").bind('click', self.controller.next)
	}

	// INIT
	self.views.makeSlides()
	self.views.getIndexes()
	self.views.setStatusPlay()
	self.views.makeActive()
	self.controller.play()
	self.events()
}

$(document).ready(
  function() {
    ///////////////////////////////////////////////////
    // Slides ausrollen und html erstellen
		try {
			var stage = new SH.helper.stageFlow()
		} catch(e) {}
  }
);