var DavEffect = new Object();
DavEffect.slide = Class.create();
Object.extend(DavEffect.slide.prototype, {
	/**
	 * Init function
	 * 
	 * @param: Array imageElements (Picture a collection of nodes)
	 * @param: HTMLElement enlargeElement (A magnifying glass is a picture of the node)
	 */
	initialize: function(smallImageElements, bigImageElements, enlargeElement, defaultIndex){
		this.smallImageElements = $A(smallImageElements);
		this.bigImageElements   = $A(bigImageElements);
		this.defaultIndex		= defaultIndex || 0;
		this.currentElement		= this.bigImageElements[this.defaultIndex];
		this.isFirstOver		= true;
		this.enlargeElement		= enlargeElement;
		this.timeout			= true;
		this.bindEventInSmallImage();
		this.bigImageElements[this.defaultIndex].className = "show";
	},
	
	/**
	 * Hide all of the big picture
	 */
	/*hiddenAllBigImages: function(){
		this.bigImageElements.each(function(value){
			$(value).className = "hidden";
		});
		return this;
	},*/
	
	/**
	 * To the picture collection of every element binding events
	 */
	bindEventInSmallImage: function(){
		//var _this = this;
		/*this.smallImageElements.each(function(value){
			Event.observe(value, "mouseover", _this.mouseover.bind(_this), false);
			Event.observe(value, "mouseout", _this.mouseout.bind(_this), false);
		});*/
		Event.observe(this.enlargeElement, "click", this.clickInEnlarge.bind(this), false);
		return this;
	},
	
	/**
	 * Rewrite of small events click on the picture above
	 */
	reloadClickEventInSmallImages: function(){
		this.smallImageElements.each(function(value){
			var element = value.parentNode;	//Get tag of link
			var func = element.onclick;
			element.onclick = function(event){
				if(event === true){
					func.bind(this)();
				}else{
					return false;
				}
			}
		});
		return this;
	},
	
	/**
	 * Collection of picture elements in each of the events onmouseover
	 * 
	 * @param {Object} event
	 */
	/*mouseover: function(event){
		var element = Event.element(event);
		if(element === this.currentElement) return;
		this.timeout = window.setTimeout(this.mouseoverTimeout.bind(this, element), 200);
	},*/
	
	/**
	 * Event of onmouseover
	 * 
	 * @param {HTMLElement} srcElement
	 */
	/*mouseoverTimeout: function(srcElement){
		if(this.isFirstOver){
			this.reloadClickEventInSmallImages();
			this.isFirstOver = false;
		}
		//The last show that the hidden picture
		this.bigImageElements[this.smallImageElements.indexOf(this.currentElement)].className = "hidden";
		this.currentElement = srcElement;
		this.bigImageElements[this.smallImageElements.indexOf(this.currentElement)].className = "show";
	},*/
	
	/**
	 * Collection of picture elements in each of the events onmouseout
	 * 
	 * @param {Object} event
	 */
	/*mouseout: function(event){
		if(this.timeout !== true)
			window.clearTimeout(this.timeout)
		this.timeout = true;
	},*/
	
	/**
	 * Click on the magnifying glass picture of event
	 * 
	 * @param {Object} event
	 */
	clickInEnlarge: function(event){
		if(this.currentElement !== null) this.currentElement.parentNode.onclick(true);
		Event.stop(event);
	}
	
});


DavEffect.marquee = Class.create();
DavEffect.marquee.prototype = {
	initialize: function(options){
		this.options = {
			topBlock:null, upButton:null, downButton:null, 
			leftButton:null, rightButton:null, rollDistance:0,
			stepTimer: 10, step: 6, axis:"x", maxCounter:0
		};
		this.counter = 0;
		this.bigCounter = 0; //Can be used to determine whether the roll 
		this.timer = null;
		if(typeof options == "object") Object.extend(this.options, options);
		this.options.topBlock = $(this.options.topBlock);
		this.options.topBlock.style.overflow = "hidden"; 
		this.bindEvents();
		this.setDefaultDistance(false, this.options.rollDistance);
	},
	
	/**
	 * Rolling start
	 *
	 * @param {Object} direction
	 * @param {Object} rollDistance
	 */
	startRoll: function(direction, rollDistance){
		if(this.timer === null){
			this.direction = direction;	//Set direction in property of direction
			this.timer = window.setInterval(this.roll.bind(this), this.options.stepTimer);
		}
	},
	
	roll: function(){
		if(this.direction){
			if(this.checkRoll() === false) return false;
			this.callbackByDirection(
				function(){this.options.topBlock.scrollLeft -= this.options.step;},
				function(){this.options.topBlock.scrollLeft += this.options.step;},
				function(){this.options.topBlock.scrollTop -= this.options.step;},
				function(){this.options.topBlock.scrollTop += this.options.step;}
			);
			this.counter += this.options.step;
		}else{
			alert("Rollrichtung wird nicht eingestellt");
		}
	},
	
	/**
	 * Verify whether or not to continue rolling
	 * 
	 * @return Boolean (When the time really to continue, otherwise stop)
	 */
	checkRoll: function(){
		var factor = ((this.direction == "up" || this.direction == "left") && this.bigCounter == 0) ||
					 ((this.direction == "down" || this.direction == "right") && this.bigCounter == (this.options.maxCounter - 1));
		if(factor){
			this.clearTimer();
			return false;
		}
		if(this.counter >= this.options.rollDistance){
			this.callbackByDirection(
				function(){this.bigCounter--},
				function(){this.bigCounter++},
				function(){this.bigCounter--},
				function(){this.bigCounter++}
			)
			this.clearTimer();
			return false;
		}else{
			return true;
		}
	},
	
	/**
	 * Stop rolling
	 */
	clearTimer: function(){
		if(this.timer !== null){
			window.clearInterval(this.timer);
			this.timer = null;
		}
		this.toCorrect(); //To correct the error of rolling distance
		this.counter = 0;	//Clear counter
	},
	
	/**
	 * According to set the direction of implementation of the different functions
	 * 
	 * @param {Function} callbackLeft
	 * @param {Function} callbackRight
	 * @param {Function} callbackUp
	 * @param {Function} callbackDown
	 */
	callbackByDirection: function(callbackLeft, callbackRight, callbackUp, callbackDown){
		switch(this.direction){
			case "left":
				if(typeof callbackLeft == "function") callbackLeft.bind(this)();
			break;
			case "right":
				if(typeof callbackRight == "function") callbackRight.bind(this)();
			break;
			case "up":
				if(typeof callbackUp == "function") callbackUp.bind(this)();
			break;
			case "down":
				if(typeof callbackDown == "function") callbackDown.bind(this)();
			break;
		}
	},
	
	/**
	 * To correct the error of rolling distance
	 */
	toCorrect: function(){
		if(this.counter == 0) return;
		this.callbackByDirection(
			function(){
				if(this.bigCounter != 0)
					this.options.topBlock.scrollLeft += this.counter - this.options.rollDistance;	
			},
			function(){
				if(this.bigCounter != (this.options.maxCounter - 1))
					this.options.topBlock.scrollLeft -= this.counter - this.options.rollDistance;
			},
			function(){
				if(this.bigCounter != "0")
					this.options.topBlock.scrollTop += this.counter - this.options.rollDistance;
			},
			function(){
				if(this.bigCounter != (this.options.maxCounter - 1))
					this.options.topBlock.scrollTop -= this.counter - this.options.rollDistance;
			}
		);
	}, 

	/**
	 * Set rolling distance
	 * 
	 * @param {String} direction
	 * @param {Int} rollDistance
	 */
	setDefaultDistance: function(direction, rollDistance){
		if(this.options.rollDistance === 0 && !rollDistance){
			switch(direction){
				case "up":
				case "down":
					this.options.rollDistance = $(this.options.topBlock).offsetHeight;
				break;
				
				case "left":
				case "right":
				default:
					this.options.rollDistance = $(this.options.topBlock).offsetWidth;
				break;
			}
		}else if(!isNaN(rollDistance) && rollDistance > 0){
			this.options.rollDistance = rollDistance;
		}
		if(this.options.axis.toLowerCase() == "x") 
			this.options.topBlock.style.width = this.options.rollDistance+"px";
		else
			this.options.topBlock.style.height = this.options.rollDistance+"px";
	},
	
	/**
	 * Set the width of the container
	 */
	setWidthInTopBlock: function(){
		this.options.topBlock.setStyle({width:this.options.rollDistance+"px"});
	},
	
	/**
	 * Set the height of the container
	 */
	setHeightInTopBlock: function(){
		this.options.topBlock.setStyle({height:this.options.rollDistance+"px"});
	},
	
	/**
	 * Binding to the events button
	 */
	bindEvents: function(){
		if(this.options.leftButton)
			Event.observe($(this.options.leftButton), "click", this.startRoll.bind(this, "left"), false);
		if(this.options.rightButton)
			Event.observe($(this.options.rightButton), "click", this.startRoll.bind(this, "right"), false);
		if(this.options.upButton)
			Event.observe($(this.options.upButton), "click", this.startRoll.bind(this, "up"), false);
		if(this.options.downButton)
			Event.observe($(this.options.downButton), "click", this.startRoll.bind(this, "down"), false);
	}
}

if(!global){
	var global = new Object();
}

/**
 * Create a new slide example
 */
global.slide = function(){
	try{
		var objectSlide = new DavEffect.slide(
							$('smallPic').getElementsByTagName('img'),
							$('bigPic').getElementsByTagName('img'), 
							$('zoom')
						  );
	}catch(e){}
}

global.marquee = function(){
	var maxCounter = Math.ceil($A($("topUL").getElementsByTagName("li")).select(function(value){
					 return value.parentNode == $("topUL")}).length/5);
	var options = {
			topBlock: "topUL",
			upButton: "upButton1",
			downButton: "downButton1",
			rollDistance: 350,
			axis:"y",
			maxCounter:maxCounter
	}
	new DavEffect.marquee(options);
	
	maxCounter = Math.ceil($A($("hotUL").getElementsByTagName("li")).select(function(value){
					 return value.parentNode == $("hotUL")}).length/5);
	var options = {
			topBlock: "hotUL",
			upButton: "upButton2",
			downButton: "downButton2",
			rollDistance: 350,
			axis:"y",
			maxCounter:maxCounter
	}
	new DavEffect.marquee(options);
}

/*=======================The scrolling effect on the bottom of the page=============================*/
var step = 2;
var maxScrollWith = 0;
var stopSlide = true;
function scrollImg(arrowLeft,scrollBox,arrowRight){
	arrowLeft.onclick = slideToLeft.bind(window, scrollBox);
	arrowRight.onclick = slideToRight.bind(window, scrollBox);
}

function slideToLeft(scrollBox){
	if(!stopSlide) return;
	stopSlide = false;
	slideToLeft1(scrollBox);
}

function slideToLeft1(scrollBox){
	maxScrollWith += step;
	if(maxScrollWith <= 268){
		scrollBox.scrollLeft += step;
		setTimeout(arguments.callee.bind(null, scrollBox),10)
	}else{
		maxScrollWith = 0; 
		stopSlide = true;
		return;
	}
}

function slideToRight(scrollBox){
	if(!stopSlide) return;
	stopSlide = false;
	slideToRight1(scrollBox);
}

function slideToRight1(scrollBox){
	maxScrollWith += step;
	if(maxScrollWith <= 268){
		scrollBox.scrollLeft -= step;
		setTimeout(arguments.callee.bind(null, scrollBox),10)
	}else{
		maxScrollWith = 0; 
		stopSlide = true;
		return;
	}
}

function slideLeft(){
	var arrowLeft1 = $('arrowLeft1');
	var arrowRight1 = $('arrowRight1');
	var imgBox1 = $('imgBox1');
	var ul1 = imgBox1.getElementsByTagName('ul')[0];
	var lis = ul1.getElementsByTagName('li');
	ul1.style.width = lis.length * 268 + 'px';
	scrollImg(arrowLeft1,imgBox1,arrowRight1);
}


function slideRight(){
	var arrowLeft2 = $('arrowLeft2');
	var arrowRight2 = $('arrowRight2');
	var imgBox2 = $('imgBox2');
	var ul2 = imgBox2.getElementsByTagName('ul')[0];
	var lis = ul2.getElementsByTagName('li');
	ul2.style.width = lis.length * 268 + 'px';
	scrollImg(arrowLeft2,imgBox2,arrowRight2);
}
Event.observe(window, "load", global.slide, false);
//Event.observe(window, "load", global.marquee, false);