// sorry for the mess down there - will tidy up asap!


$(function(){
	
	var color		=	$("#color");
	var pattern		=	$("#pattern");
	
	var startstop	=	$("#startstop");
	var showhide	=	$("#showhide");
	
	var speed		=	50;
	var curPos		=	0;
	var resetPos	=	-(3000-117);


	function patternScroller(){
		curPos--;
		if (curPos == resetPos){ curPos	= 0; }
		pattern.css("background-position", "0 " + curPos + "px");	
	}
	
	showhide.click(function(){
		if (!pattern.hasClass("visible")){
			pattern.addClass("visible");
			$(this).text("hide pattern");
			pattern.stop().fadeTo(1000, 1);
			$(".forpattern").stop().fadeTo(800, 1);
		} else {
			pattern.removeClass("visible");
			$(this).text("show pattern");
			pattern.stop().fadeTo(800, 0);
			$(".forpattern").stop().fadeTo(800, 0);
		}
		return false;
	});
	
	startstop.click(function(){
		if (!pattern.hasClass("scrolling")){
			pattern.addClass("scrolling");
			$(this).text("stop animation");
			initScroll = setInterval(patternScroller, speed);
			$(".foranimation").stop().fadeTo(800, 1);
		} else {
			pattern.removeClass("scrolling");
			$(this).text("start animation");
			clearInterval(initScroll);
			$(".foranimation").stop().fadeTo(800, 0);
		}
		return false;
	});
	


	$("#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 });

	
	function rgbToHex(r,g,b){
		var hex = [
			r.toString(16),
			g.toString(16),
			b.toString(16)
		];
		$.each(hex, function(nr, val){
			if (val.length == 1){
				hex[nr] = "0" + val;
			}
		});
		return hex.join("").toUpperCase();
	}
	
	function colorChanger(){
		var red		=	$("#red").slider("value");
		var green	=	$("#green").slider("value");
		var blue	=	$("#blue").slider("value");
		var hex		=	rgbToHex( red, green, blue );
		color.css("background-color", "#" + hex);
	}

	function alphaChanger1(){
		var opacity		=	$("#alpha1").slider("value") / 100;
		color.css("opacity", opacity );
	}
	
	function alphaChanger2(){
		var opacity		=	$("#alpha2").slider("value") / 100;
		pattern.css("opacity", opacity );
	}
	
	function speedChange(){
		speed		=	$("#speed").slider("value");
		clearInterval(initScroll);
		initScroll = setInterval(patternScroller, speed);
	}


	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);
	}
	$("#randomcolors").click(function(){
		if (!$(this).hasClass("random")){
			$(this).addClass("random");
			$(this).text("random-colors & alpha: ON");
			randomColors();
			randomizer = setInterval(randomColors, 2000);
		} else {
			$(this).removeClass("random");
			$(this).text("random-colors & alpha: OFF");
			clearInterval(randomizer);
		}
		return false;
	});
	
	
	
	$("#bananas").hover(function(){ $("#bananasbubble").stop().fadeTo(500,1); },function(){ $("#bananasbubble").stop().fadeTo(200,0); });
	$("#followme").hover(function(){ $("#followmebubble").stop().fadeTo(500,1); },function(){ $("#followmebubble").stop().fadeTo(200,0); });
	
});