Event.observe(window, 'load', function() {
	var hpg = new topthemenSlider();
});

var topthemenSlider = Class.create();
topthemenSlider.prototype = {
	
	objName:			     'topthemen_slider',
	objContentName:		 'topthemen_slider_content',
	objItemsName:		   'topthemen_slider_items',
	
	oneItemClass:		   'item',
	oneItemBlackClass: 'black',
	
	menuName:			     'topthemen_menu',
	handleName:			   'topthemen_handle',
	whiteBgName:		   'topthemen_menu_white',
	blackBgName:		   'topthemen_menu_black',
	listName:			     'topthemen_list',
	
	selectedClass:		 'sel',
	blackMenuClass:		 'blackmenu',
	
	autoPlay:			     true,
	autoPlaySeconds:	 5,
	autoPlayIv:			   null,
	autoCurrent:		   0,
	linkArray:			   [],
	
	animationSpeed:		 1,
	itemWidth:			   750,
	itemHeight:			   300,
	handleBarWidth:	   0,
	handleBarLeft:	   0,
	scrollDirection:	 'horizontal',
	currMenu:			     'white',
	
	numItems:			     0,
	elements:			     [],
	animating:			   false,
	
	initialize: function() {
		if($(this.objName)) {
			
			// create ul-menu
				var html = '<div id="'+this.menuName+'">';
				html += '<div id="'+this.handleName+'"></div>';
				html += '<div id="'+this.whiteBgName+'"></div>';
				html += '<div id="'+this.blackBgName+'" style="display:none;"></div>';
				html += '<ul id="'+this.listName+'">';
				var firstTime = true;
				var firstBlack = false;
			
			// loop items
				$$('#'+this.objItemsName+' .'+this.oneItemClass).each(function(e) {
					
					// start list
						html += (firstTime) ? '<li class="first">' : '<li>';
					
					// set class (first + black)
						var className = (firstTime) ? this.selectedClass : '';
						if (e.hasClassName(this.oneItemBlackClass)) {
							className += ' ' + this.oneItemBlackClass;
							if(firstTime) firstBlack = true;
						}
					
					// create link
						html += '<a href="#slider'+(this.numItems+1)+'" class="'+className+'" rel="'+this.numItems+'">'+e.title+'</a></li>';
						this.elements[this.numItems] = e.id;
						e.title = ''; // remove title
					
					// add numItems
						this.numItems++;
						firstTime = false;
					
				}.bind(this));
			
			// close ul-menu
				html += '</ul></div>';
			
			// insert html and set styles
				if (this.numItems > 1) Element.insert($(this.objContentName), { top: html });
				if(this.scrollDirection == 'horizontal') $(this.objItemsName).style.width = (this.itemWidth * this.numItems) + 'px';
				if (firstBlack) {
					$(this.listName).addClassName(this.blackMenuClass);
					$(this.blackBgName).show();
					$(this.whiteBgName).hide();
				}
			
			// fetch url hash
				var hash = this.fetchUrlHash();
				var startWith = false;
			
			// loop links
				$$('#'+this.objContentName+' li a').each(function(e) {
					
					// add to link array
						this.linkArray[e.rel] = e;
					
					// add event listener
						Event.observe(e, 'click', function(ev){
							if(!this.animating) this.showElement(e, e.rel);
							ev.stop();
							clearInterval(this.autoPlayIv);
						}.bind(this));
						
					// check hash
						if(hash && hash == e.href.split('#')[1]) startWith = e;
					
				}.bind(this));
				
			// start with given url hash
				this.showElement(startWith, startWith.rel);
				if(this.autoPlay) {
					this.autoPlayIv = setInterval(function() { this.nextElement(); }.bind(this), (this.autoPlaySeconds*1000));
					if(startWith) this.autoCurrent = startWith.rel;
				}
			
		}
	},
	
	nextElement: function() {
		this.autoCurrent++;
		if(this.autoCurrent >= this.linkArray.length) this.autoCurrent = 0;
		var e = $$('#'+this.objContentName+' li a')[this.autoCurrent];
		if(e && !this.animating) this.showElement(e, e.rel);
	},
	
	showElement: function(aLink, num){
		if(num <= this.elements.length) {
			
			// switch to black
				if(aLink.hasClassName(this.oneItemBlackClass)) this.showBlackBg();
				else this.showWhiteBg();
			
			// set new style
				if(this.scrollDirection == 'horizontal') var newStyle = 'margin-left: -' + Math.round(this.itemWidth * num) + 'px';
				else var newStyle = 'margin-top: -' + Math.round(this.itemHeight * num) + 'px';
			
			// morph main images
				new Effect.Morph($(this.objItemsName), {
					duration: this.animationSpeed,
					beforeStart: function(){ this.animating = true; }.bind(this),
					afterFinish: function(){ this.animating = false; }.bind(this),
					style: newStyle
				});
			
			// morph sidebar handle
				var newLeft = Math.round(this.handleBarLeft + (this.handleBarWidth * num));
				var newWidth = (num == 3) ? this.handleBarWidth : this.handleBarWidth;
				new Effect.Morph($(this.handleName), {
					duration: this.animationSpeed,
					style: 'left: ' + newLeft + 'px; width: ' + newWidth + 'px;'
				});
			
			// set handles active-inactive state
				$$('#'+this.menuName+' li a').each(function(e) { e.removeClassName(this.selectedClass); }.bind(this));
				aLink.addClassName(this.selectedClass);
			
		}
	},
	
	showBlackBg: function() {
		if(this.currMenu != 'black') {
			
			// set black links
				$(this.listName).addClassName(this.blackMenuClass);
				
			// switch bgs
				new Effect.Appear(this.blackBgName);
				new Effect.Fade(this.whiteBgName);
			
			// set currMenu
				this.currMenu = 'black';
			
		}
	},
	
	showWhiteBg: function() {
		if(this.currMenu != 'white') {
			
			// switch bgs
				new Effect.Appear(this.whiteBgName, {
					afterFinish: function() { $(this.listName).removeClassName(this.blackMenuClass); }.bind(this)
				});
				new Effect.Fade(this.blackBgName);
			
			// set currMenu
				this.currMenu = 'white';
			
		}
	},
	
	fetchUrlHash: function() {
		var h = self.document.location.hash.substring(1);
		return (h) ? h : false;
	}
	
}

function fontSmall () {
  for (var i = 0; i < document.getElementsByTagName("body").length; i++) {
    document.getElementsByTagName("body")[i].style.fontSize = "10px";
  }
  for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
    document.getElementsByTagName("td")[i].style.fontSize = "10px";
  }
}

function fontMedium () {
  for (var i = 0; i < document.getElementsByTagName("body").length; i++) {
    document.getElementsByTagName("body")[i].style.fontSize = "11px";
  }
  for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
    document.getElementsByTagName("td")[i].style.fontSize = "11px";
  }
}

function fontLarge () {
  for (var i = 0; i < document.getElementsByTagName("body").length; i++) {
    document.getElementsByTagName("body")[i].style.fontSize = "12px";
  }
  for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
    document.getElementsByTagName("td")[i].style.fontSize = "12px";
  }
}