// start scripts when DOM is ready
$(function(){
	
	var color			=	$("#color");			// color container
	var pattern			=	$("#menu .logo .pattern");			// pattern container
	var startstop		=	$("#startstop");		// animation start/stop button
	var showhide		=	$("#showhide");			// show/hide button
	var randomcolors	=	$("#randomcolors");		// random-color button
	var speed			=	5;						// default animation speed (5ms to 100ms)
	var curPos			=	0;						// starting position of the pattern
	var resetPos		=	-(3000-117);			// reset-position

	
	// setting up the jQuery UI sliders
	$("#red, #green, #blue").slider({ animate:true, range:"min", max:255, slide:colorChanger, change:colorChanger });
	$("#red").slider("value", 52);
	$("#green").slider("value", 174);
	$("#blue").slider("value", 203);
	$("#alpha1").slider({ animate:true, range:"min", max:100, value:100, slide:alphaChanger1, change:alphaChanger1 });
	$("#alpha2").slider({ animate:true, range:"min", max:100, value:100, slide:alphaChanger2, change:alphaChanger2 });
	$("#speed").slider({ animate:true, range:"min", min: 5, max:100, value:50, slide:speedChange, change:speedChange });

	
	
	// RGB to HEX converter (with 3 arguments)
	function rgbToHex(r,g,b){
		var hex = [
			r.toString(16),						// converting string to hex (16)
			g.toString(16),
			b.toString(16)
		];
		$.each(hex, function(nr, val){			// get all 3 values of the array
			if (val.length == 1){				// make sure they are not empty
				hex[nr] = "0" + val;			// add leading zero
			}
		});
		return hex.join("").toUpperCase();		// returns a valid hexadecimal number 
	}
	
	// changing the colors
	function colorChanger(){
		var red		=	$("#red").slider("value");		// value of the "red"-slider
		var green	=	$("#green").slider("value");	// value of the "green"-slider
		var blue	=	$("#blue").slider("value");		// value of the "blue"-slider
		var hex		=	rgbToHex(red,green,blue);		// converting values to hex
		color.css("background-color", "#" + hex);		// changing the background-color of the wrapper
	}

	// change the opacity of the color-wrapper
	function alphaChanger1(){
		var opacity		=	$("#alpha1").slider("value") / 100;
		color.css("opacity", opacity );
	}
	
	// change the opacity of the pattern-wrapper
	function alphaChanger2(){
		var opacity		=	$("#alpha2").slider("value") / 100;
		pattern.css("opacity", opacity );
	}
	
	// pattern animation
	function patternScroller(){
		curPos--;								// substracting 1 with every call
		if (curPos == resetPos){ curPos	= 0; }	// if it hits our reset-position, back to 0
		pattern.css("background-position", "0 " + curPos + "px");	
	}
	
	// animation speed changer
	function speedChange(){
		speed		=	$("#speed").slider("value");		// get the current value of the speed-slider
		clearInterval(initScroll);							// clear interval, if there is any
		initScroll = setInterval(patternScroller, speed);	// set a new interval with the current speed
	}

	// random color function
	function randomColors(){
		$("#red").slider("value", Math.floor(Math.random()*256), true);
		$("#green").slider("value", Math.floor(Math.random()*256), true);
		$("#blue").slider("value", Math.floor(Math.random()*256), true);
		$("#alpha1").slider("value", Math.floor(Math.random()*101), true);
	}
	
	// random colors button
	/*randomcolors.click(function(){
		if (!$(this).hasClass("random")){					// if button has no "random" class
			$(this).addClass("random");							// add it
			$(this).text("random-colors & alpha: ON");			// change the button text
			randomColors();										// call the random function once
			randomizer = setInterval(randomColors, 2000);		// set a intervall with the random function
		} else {											// else
			$(this).removeClass("random");						// remove the class
			$(this).text("random-colors & alpha: OFF");			// change the button text
			clearInterval(randomizer);							// clear the interval
		}
		return false;										// change the default link-behavior
	});*/
	//randomColors();										// call the random function once
	//randomizer = setInterval(randomColors, 2000);		// set a intervall with the random function
	
	// show and hide the pattern
	/*showhide.click(function(){
		if (!pattern.hasClass("visible")){				// if button has no "visible" class
			pattern.addClass("visible");					// add it
			$(this).text("hide pattern");					// change the text
			pattern.stop().fadeTo(1000, 1);					// fade in the pattern-container
			$(".forpattern").stop().fadeTo(800, 1);			// fade in all elements with the class "forpattern"
		} else {										// else
			pattern.removeClass("visible");					// remove the class
			$(this).text("show pattern");					// change the button text
			pattern.stop().fadeTo(800, 0);					// fade out the pattern-container
			$(".forpattern").stop().fadeTo(800, 0);			// fade out all elements with the class "forpattern"
		}
		return false;									// change the default link-behavior
	});*/
	pattern.stop().fadeTo(1000, 1);					// fade in the pattern-container
	$(".forpattern").stop().fadeTo(800, 1);			// fade in all elements with the class "forpattern"
	
	// start and stop the animation
	/*startstop.click(function(){
		if (!pattern.hasClass("scrolling")){					// if button has no "scrolling" class
			pattern.addClass("scrolling");							// add it
			$(this).text("stop animation");							// change the text
			initScroll = setInterval(patternScroller, speed);		// start a new intervall with current speed-slider value
			$(".foranimation").stop().fadeTo(800, 1);				// fade in all elements with the "foranimation" class
		} else {												// else
			pattern.removeClass("scrolling");						// remove the class
			$(this).text("start animation");						// change the button text
			clearInterval(initScroll);								// clear the interval again
			$(".foranimation").stop().fadeTo(800, 0);				// fade out all elements with the "foranimation" class
		}
		return false;											// change the default link-behavior
	});*/
	initScroll = setInterval(patternScroller, speed);		// start a new intervall with current speed-slider value
	$(".foranimation").stop().fadeTo(800, 1);				// fade in all elements with the "foranimation" class
	
	
	
});