$(document).ready(function(){
//Menu & blog vars
		//used for the expanding blog
		var expanded = false;
		//used to determine which tab should be shown and which should be hidden
		var activemenu = "media";
		var prevmenu = "media";
		//sets to true when twitter tab is clicked and remains set to true.
		var twitterOn = false;
		//used to prevent button action while animation is in progress
		var animating = false;
		//initial dragging var
		var drag = false;
		//used for expanding about page
		var aboutPage = false;
	//digital download links
	//used in switching from Blog to About
	function showArrow() {
		$("#blogbox").css({"display":"block"});
		$("#blogShow").text("Info");
		$("#blogArrow").css({"display":"block"});
	}
	//Menu tab function
	function changeCell() {
		$("#blogbox").css({"display":"none"});
		if(expanded==true){
			animating = true;
			collapseBlog();
			$("#"+prevmenu+"Cell").delay(600).animate({"height":"toggle"},200);
			$("#"+activemenu+"Cell").delay(800).animate({"height":"toggle"},200, function(){
				if(activemenu=="shop"){
					$(".shop").css("margin-top", "32px");
					$(".shop").animate({"height":"588px"},400, function(){
						animating=false;
					});
				} else if(activemenu=="media"){
					showArrow();
					animating=false;
					$("#mediaHolder").removeClass("hideYoutube");
				} else {
					animating=false;
				}
			});
		} else if (expanded==false){
			animating = true;
			$("#blogArrow").css({"display":"none"});
			if(prevmenu=="shop") {
				$(".shop").animate({"height":"0px"},500, function(){
					$(".shop").css("margin-top", "700px");
				});
				$("#"+prevmenu+"Cell").delay(500).animate({"height":"toggle"},200);
				$("#"+activemenu+"Cell").delay(700).animate({"height":"toggle"},200, function(){
					if(activemenu=="media"){
						showArrow();
						$("#mediaHolder").removeClass("hideYoutube");
					}
					animating=false;
				});				
			} else {
				if(activemenu=="media"){
					if(prevmenu=="blog"){
						showArrow();
						setTimeout('$("#mediaHolder").removeClass("hideYoutube")',400);
					} else {
						setTimeout(showArrow,400);
						setTimeout('$("#mediaHolder").removeClass("hideYoutube")',400);
					}
				}
				if(aboutPage==false){
					$("#mediaHolder").addClass("hideYoutube");
					$("#"+prevmenu+"Cell").animate({"height":"toggle"},200);
					$("#"+activemenu+"Cell").delay(200).animate({"height":"toggle"},200, function(){
						if(activemenu=="shop"){
							$(".shop").css("margin-top", "32px");
							$(".shop").animate({"height":"588px"},400, function(){
								animating=false;
							});
						} else {
							animating=false;
						}
					});
				} else {
					$(".about").animate({"height":"toggle"},400, function(){
						aboutPage = false;
						$("#mediaHolder").removeClass("hideYoutube");
					});
					$("#"+prevmenu+"Cell").delay(400).animate({"height":"toggle"},200);
					$("#"+activemenu+"Cell").delay(600).animate({"height":"toggle"},200, function(){
						if(activemenu=="shop"){
							$(".shop").css("margin-top", "32px");
							$(".shop").animate({"height":"588px"},400, function(){
								animating=false;
							});
						} else {
							animating=false;
						}
					});
				}
			}
		} else {
		}
	}
	//assign functions to menu buttons
	$("#twitterT").click(function(){
		if(animating==false) {
			activemenu = "twitter";
			changeCell();
			if(prevmenu!="twitter"&&twitterOn==false){
				twitterOn=true;
				$("#twitterHolder").getTwitter({
					userName: "richsolarstone",
					numTweets: 3,
					loaderText: "",
					slideIn: false,
					showHeading: false,
					headingText: "SOLARSTONE",
					showProfileLink: true
				});
				setInterval(function(){
					$("#twitterHolder").html("");
					$("#twitterHolder").getTwitter({
						userName: "richsolarstone",
						numTweets: 3,
						loaderText: "",
						slideIn: false,
						showHeading: false,
						headingText: "SOLARSTONE",
						showProfileLink: true
					});
				},15000);
			}
			prevmenu = "twitter";
		} else	{
		}
	});
	$("#networkT").click(function(){
		if(animating==false) {
			activemenu = "network";
			changeCell();
			prevmenu = "network";
		} else {
		}
	});
	$("#tourdatesT").click(function(){
		if(animating==false) {
			activemenu = "tourdates";
			changeCell();
			prevmenu = "tourdates";
		} else {
		}
	});
	
	var appended=false;
	$("#shopT").click(function(){
		if(animating==false && activemenu!="shop") {
			activemenu = "shop";
			$(".hardcopy:first").addClass("limited");
			$(".hardcopy:eq(1)").addClass("ea2ae");
			$(".hardcopy:eq(2)").addClass("bundle");
			$(".hardcopy:last").addClass("bundleAll");
			if(appended==false) {
				for (p=1;p<17;p++) {
					if(p<16){
						$("#posterList").append('<li class="posterNo" id="poster'+p+'"><a class="aPoster">'+p+'</a></li><li class="itemSpacer"></li>');
						$("#tshirtList").append('<li class="shirtNo" id="shirt'+p+'"><a class="aShirt">'+p+'</a></li><li class="itemSpacer"></li>');
						$("#tshirtList a, #black5 a").attr({"target":"_blank", "href":"http://solarstone.spreadshirt.co.uk/"});
						$("#posterList a, #black4 a").attr({"target":"_blank", "href":"http://shop.solarstone.co.uk/product_details.php?cat_id=3&product_id=429&page=1&max_results=200"});
					} else {
						$("#tshirtList").append('<li class="shirtNo" id="shirt'+p+'"><a class="aShirt">'+p+'</a></li><li class="itemSpacer"></li>');
						$("#tshirtList a, #black5 a").attr({"target":"_blank", "href":"http://solarstone.spreadshirt.co.uk/"});
					}
					appended=true;
				}
			}
			changeCell();
			prevmenu = "shop";
		} else {
		}
	});
	$("#mediaT").click(function(){
		if(animating==false && activemenu!="media") {
			activemenu = "media";
			changeCell();
			prevmenu = "media";
		}
	});
	//Expand & collapse blog functions
	function expandBlog() {
		expanded = "null";
		animating = true;
		$("#blogbox").css("display", "none");
		$("div#blogFrames").animate({"margin-left": "0px"}, 300, function() {
			$("#blogArrow").animate({"width":"toggle"}, 100);
			$("#blogArrow").css({"background": "url('images/bkg-blogArrow2.png') no-repeat", "opacity":"0.7", "filter":"alpha(opacity=70)"});
			$("#blogArrow").animate({"width":"toggle"}, 200);
			$("div#blogControls").delay(300).animate({"height":"toggle"},200, function(){
				expanded = true;
				$("#guestmix").removeClass("hideYoutube");
				animating = false;
			});
		});
		$("#interact").animate({"height":"toggle"}, 200);
	}
	function collapseBlog() {
			expanded = "null";
			animating = true;
			$("#guestmix").addClass("hideYoutube");
			$("div#blogControls").animate({"height":"toggle"},200);
			$("div#blogFrames").delay(200).animate({"margin-left": "622px"}, 300, function(){
				$("#blogArrow").animate({"width":"toggle"}, 100);
				$("#blogArrow").css({"background": "url('images/bkg-blogArrow.png') center center no-repeat", "opacity":"1", "filter":"none"});
				$("#blogArrow").animate({"width":"toggle"}, 100, function(){
					$("#blogbox").css({"display":"block"});
					animating = false;
					if(activemenu!="blog"){
						$("#blogArrow").css({"display":"none"});
						$("#blogbox").css("display", "none");
					}
				});
			});
			$("#interact").delay(600).animate({"height":"toggle"}, 200, function(){
				expanded = false;
			});
	}
	//Concatenated function to be used with the Blog button
	function clickBlog() {
		$("#blogCell").css({"margin-top":"0"});
		if(animating==false) {
			activemenu = "blog"
			if(expanded==true){
				collapseBlog();
				$("#blogArrow").css({"display":"block"});
			} else if(expanded==false && prevmenu =="blog"){
				expandBlog();
				$("#blogArrow").css({"display":"block"});
			} else {
				animating = true;
				if(prevmenu=="shop"){
					$(".shop").animate({"height":"0px"},500, function(){
						$(".shop").css("margin-top", "700px");
					});
					$("#"+prevmenu+"Cell").delay(500).animate({"height":"toggle"},200);
					$("#"+activemenu+"Cell").css("display","none").delay(700).animate({"height":"toggle"},200, function(){
						$("#blogbox").css({"display":"block"});
						$("#blogShow").text("More");
						$("#blogArrow").css({"display":"block"});
						animating = false;
					});
				} else {
					$("#blogShow").text("More");
					if(aboutPage==true){
						$(".about").animate({"height":"toggle"},400, function(){
							aboutPage = false;
							$("#mediaHolder").addClass("hideYoutube");
						});
						setTimeout('$("#blogbox").css({"display":"block"})',800);
						$("#"+prevmenu+"Cell").delay(400).animate({"height":"toggle"},200, function(){
							setTimeout('$("#blogArrow").css({"display":"block"})',200)
						});
						$("#"+activemenu+"Cell").css({"display":"none"}).delay(600).animate({"height":"toggle"},200, function(){
							animating = false;
						});
					} else {
						$("#mediaHolder").addClass("hideYoutube");
						setTimeout('$("#blogbox").css({"display":"block"})',400);
						$("#"+prevmenu+"Cell").animate({"height":"toggle"},200, function(){
							setTimeout('$("#blogArrow").css({"display":"block"})',200)
						});
						$("#"+activemenu+"Cell").css({"display":"none"}).delay(200).animate({"height":"toggle"},200, function(){
							if(aboutPage==false){
								animating = false;
							}
						});
					}
				}
			}
			prevmenu = "blog";
		} else {
		}
	}
	//assign function to blog button and <(expand blog) arrow
	$("div#closeShop").click(clickBlog);
	
	$("div#closeAbout").click(function(){
		if(animating == false) {
			animating = true;
			$(".about").animate({"height":"toggle"},400, function(){
				$("div#blogArrow, div#blogbox").css("display","block");
				animating = false;
				aboutPage = false;
			});
		}
	});
	
	$("div#blogArrow, div#blogbox").click(function(){
		if($("#blogShow").text()=="More"){
			clickBlog();
		} else {
			animating = true;
			aboutPage = true;
			$(".about").css({"margin-top":"32px","display":"none"}).animate({"height":"toggle"},400, function(){
				animating = false;
			});
			$("div#blogArrow, div#blogbox").css("display","none");
		}
	});
	$("li#blogT").click(clickBlog);
	
	
	//EXPANDED BLOG
	//checks for number of newsEntries
	var elementsN = $(".newsItem2").length;
	//used to show the blog current page #
	var currentN = elementsN;
	$("#stateN").html(currentN+"/"+elementsN);
	
	//blog PREV/NEXT functions
	function blogScrollPrev() {
		var bMargin = parseInt($("#entriesCont").css("margin-right"));
		if(Math.abs(bMargin)!=(elementsN-2)*311 && Math.abs(bMargin)%311==0){
			$("#entriesCont").animate({"margin-right":bMargin-311}, 300);
			currentN--;
			$("#stateN").html(currentN+"/"+elementsN);
		} 
	}
	function blogScrollNext() {
		var bMargin = parseInt($("#entriesCont").css("margin-right"));
		if(bMargin!=0 && Math.abs(bMargin)%311==0){
			$("#entriesCont").animate({"margin-right":bMargin+311}, 300);
			currentN++;
			$("#stateN").html(currentN+"/"+elementsN);
		} 
	}
	//Assign next/prev functions
	$("#prevN").click(blogScrollPrev);
	$("#nextN").click(blogScrollNext);

	//button hovers
	$("#prevN").hover(
	function(){
		$(this).css("background", "url('images/bkg-blogControls.gif') 0 -20px no-repeat");
	},
	function(){
		$(this).css("background", "url('images/bkg-blogControls.gif') 0 0 no-repeat");
	});
	$("#nextN").hover(
	function(){
		$(this).css("background", "url('images/bkg-blogControls.gif') -20px -20px no-repeat");
	},
	function(){
		$(this).css("background", "url('images/bkg-blogControls.gif') -20px 0 no-repeat");
	});
	
	//Global settings for link tags
	$("#blog a, #blogCell a, #networkCell a").attr({target:"_blank"});
	
	
	//MAIN MENU BUTTONS
	$("li#blogT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 0 repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 0 repeat-x");
	});
	$("li#twitterT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 -20px repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 -20px repeat-x");
	});
	$("li#tourdatesT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 -60px repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 -60px repeat-x");
	});
	$("li#shopT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 -40px repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 -40px repeat-x");
	});
	$("li#networkT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 -80px repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 -80px repeat-x");
	});
	$("li#mediaT").hover(
		function(){
			$(this).css("background", "url('images/bkg-menus2.png') 0 -100px repeat-x");
		},
		function(){
			$(this).css("background", "url('images/bkg-menus.png') 0 -100px repeat-x");
	});
	$("li#ea1T").hover(
		function(){
			$(this).css("background", "#e6e6e6");
		},
		function(){
			$(this).css("background", "#cdcdcd");
	});
	
//VARS
	//25-degree tangent.used to determine diagonal movement
	var yTan=0.47;
	//used to determine whether any graphic element is selected
	var selected=null;
	//used to enable element selection
	var editMode = "off";
	//associates the dom object with var for easy access
	var divA = $("div#container");
	
	//stores info about each element. the 'dom' is not used, just mentioned here for easy element identification
	var elements = [
	{dom: "'div#el1'", posLeft: 554, posTop: 16, key:"Evolve"},
	{dom: "'div#el2'", posLeft: 569, posTop: 64, key:"Filter"},
	{dom: "'div#el3'", posLeft: 433, posTop: 262, key:"Invert"},
	{dom: "'div#el4'", posLeft: 381, posTop: 290, key:"Warp"},
	{dom: "'div#el5'", posLeft: 506, posTop: 180, key:"Mutate"},
	{dom: "'div#el6'", posLeft: 374, posTop: 119, key:"Enhance"},
	{dom: "'div#el7'", posLeft: 436, posTop: 64, key:"Atomize"},
	{dom: "'div#el8'", posLeft: 337, posTop: 188, key:"Delay"},
	{dom: "'div#el9'", posLeft: 325, posTop: 265, key:"Cut"},
	{dom: "'div#el10'", posLeft: 421, posTop: 260, key:"Reverse"},
	{dom: "'div#el11'", posLeft: 165, posTop: 245, key:"Externalize"},
	
	{dom: "'div#el12'", posLeft: 158, posTop: 264, key:"Insert"},
	{dom: "'div#el13'", posLeft: 141, posTop: 454, key:"Blend"},
	{dom: "'div#el14'", posLeft: 85, posTop: 213, key:"Glitch"},
	{dom: "'div#el15'", posLeft: 77, posTop: 217, key:"Feedback"},
	{dom: "'div#el16'", posLeft: 113, posTop: 400, key:"Distort"},
	{dom: "'div#el17'", posLeft: 68, posTop: 376, key:"Sweep"},
	{dom: "'div#el18'", posLeft: 62, posTop: 324, key:"Excite"},
	{dom: "'div#el19'", posLeft: 63, posTop: 304, key:"Phase"},
	{dom: "'div#el20'", posLeft: 69, posTop: 273, key:"Reverberate"},
	{dom: "'div#el21'", posLeft: 73, posTop: 343, key:"Expand"},
	
	{dom: "'div#el22'", posLeft: 159, posTop: 333, key:"Construct"},
	{dom: "'div#el23'", posLeft: 404, posTop: 318, key:"Segue"},
	{dom: "'div#el24'", posLeft: 376, posTop: 369, key:"Immerse"},
	{dom: "'div#el25'", posLeft: 186, posTop: 365, key:"Fuse"},
	{dom: "'div#el26'", posLeft: 367, posTop: 202, key:"Harmonize"},
	
	{dom: "'div#el27'", posLeft: 44, posTop: 27, key:"Merge"}
	];
	
	//used in the "reset" and "reset all" functions. stores elements' original background positions.
	var bkgs = [
	'url("images/PNG-right.png") 0 0 no-repeat',
	'url("images/PNG-right.png") -946px 0 no-repeat',
	'url("images/PNG-right.png") -1069px 0 no-repeat',
	'url("images/PNG-right.png") -86px 0 no-repeat',
	'url("images/PNG-right.png") -86px -113px no-repeat',
	'url("images/PNG-right.png") -263px 0 no-repeat',
	'url("images/PNG-right.png") -487px 0 no-repeat',
	'url("images/PNG-right.png") 0 -318px no-repeat',
	'url("images/PNG-right.png") -638px 0 no-repeat',
	'url("images/PNG-right.png") -156px -113px no-repeat',
	'url("images/PNG-right.png") -487px -270px no-repeat',
	'url("images/PNG-left.png") 0 0 no-repeat',
	'url("images/PNG-left.png") -54px 0 no-repeat',
	'url("images/PNG-left.png") -54px -149px no-repeat',
	'url("images/PNG-left.png") -178px 0 no-repeat',
	'url("images/PNG-left.png") -286px 0 no-repeat',
	'url("images/PNG-left.png") -321px 0 no-repeat',
	'url("images/PNG-left.png") 0 -244px no-repeat',
	'url("images/PNG-left.png") -178px -85px no-repeat',
	'url("images/PNG-left.png") -278px -233px no-repeat',
	'url("images/PNG-left.png") -401px 0 no-repeat',
	'url("images/PNG-center.png") 0 0 no-repeat',
	'url("images/PNG-center.png") -203px 0 no-repeat',
	'url("images/PNG-center.png") -358px 0 no-repeat',
	'url("images/PNG-center.png") 0 -245px no-repeat',
	'url("images/PNG-center.png") 0 -484px no-repeat',
	'url("images/PNG-center.png") 0 -692px no-repeat'
	];
	
	//Hover on interact/deconstruct/drag buttons
	$("#interact").hover(
	function(){
		$(this).css("background", "url('images/bkg-button.gif') no-repeat");
	}, 
	function(){
		$(this).css("background", "url('images/bkg-buttonD.gif') no-repeat");
	})
	$("#deconstruct").hover(
	function(){
		$(this).css("background", "url('images/bkg-button2.gif') no-repeat");
	}, 
	function(){
		$(this).css("background", "url('images/bkg-buttonD.gif') no-repeat");
	})
	$("#drag").hover(
	function(){
		$(this).css("background", "url('images/bkg-button3.gif') no-repeat");
	}, 
	function(){
		$(this).css("background", "url('images/bkg-buttonD.gif') no-repeat");
	})
	
	//INTERACTVITY FUNCTIONS
	//hides all art interaction elements. used within the "interact" function
	function hideSelection() {
		editMode = "off";
		$(".elel").css({"cursor":"default","border":"none"}).html("");
		selected=null;
		$(".itson > .elinfo").text($(".itson").index()+1).css("color", "#9d9d9d");
		$(".itson").css("width", "22px").removeClass("itson");
		$(".keyword").text("");
	}
	//INTERACT function
	$("#interact, .vArrow").click(function(){
		if($("#interact").text()=="INTERACT") {
			$("#interact").text("INITIALIZING...");
			
			if(activemenu=="blog"||activemenu=="media") {
				$("#blogbox").animate({"height":"toggle"}, 200);
				if(prevmenu=="media"){
					$("#mediaHolder").addClass("hideYoutube");
				}
			}
			if($("#deconstruct").text()!="KILL DRAGGING") {
				$("#infobox").delay(1000).animate({"height":"toggle"},200);
			}
			$(".artControls").delay(1000).animate({"height":"toggle"}, 200);
			$("#deconstruct").delay(1000).animate({"height":"toggle"}, 200);
			if(drag==true) {
				$( ".elel" ).draggable({ disabled: false });
				$("#destroy").delay(1000).animate({"height":"toggle"},200);
			}
			$("#drag").delay(1000).animate({"height":"toggle"}, 200);
			$("#cellHolder, #blog").animate({"height":"toggle"}, 300);
			$("#soundcloudPlayer").animate({"margin-top":"-320px"},300);
			$("#listen").delay(300).animate({"margin-top":"620px"}, 300).animate({"margin-left":"400px"}, 300);
			$("#tlisten").delay(300).animate({"margin-top":"620px"}, 300).animate({"margin-left":"405px"}, 300);
			$("#tmenuHead").delay(600).animate({"margin-left":"405px"}, 300, function(){
				$("#tmenuHead, #tlisten").css("margin-left","375px");
			});
			$("#menuHead").delay(600).animate({"margin-left":"400px"}, 300, function(){
				$("#menuHead, #listen").css("margin-left","370px");
			});
			$(".menuContainer").delay(800).animate({"margin-left":"1058px"}, 200, function(){
				$(".vArrow").animate({"width":"toggle"},200);
				$(this).css("margin-left","1058px");
				$("#interact").text("SET");
				editMode = "on";
				$(".elel").css("cursor", "pointer");
			});
		}//END IF 1
		if($("#interact").text()=="SET") {
			hideSelection();
			$("#interact").text("SETTING...");
			if($("#deconstruct").text()!="KILL DRAGGING") {
				$("#infobox").animate({"height":"toggle"},200);
			}
			$(".artControls").animate({"height":"toggle"}, 200);
			$("#deconstruct").animate({"height":"toggle"}, 200);
			if(drag==true) {
				$( ".elel" ).draggable({ disabled: true });
				$("#destroy").animate({"height":"toggle"},200);
			}
			$("#drag").animate({"height":"toggle"}, 200);
			$(".vArrow").animate({"width":"toggle"},200);
			$(".menuContainer").delay(200).animate({"margin-left":"730px"}, 200, function(){
				$(this).css("margin-left","730px");
			});
			$("#menuHead").delay(300).animate({"margin-left":"48px"}, 300);
			$("#tmenuHead").delay(300).animate({"margin-left":"48px"}, 300);
			$("#tlisten").delay(300).animate({"margin-left":"53px"}, 300).animate({"margin-top":"309px"}, 300, function(){
				$("#tmenuHead, #tlisten").css("margin-left","48px");
			});
			$("#listen").delay(300).animate({"margin-left":"48px"}, 300).animate({"margin-top":"309px"}, 300, function(){
				$("#menuHead, #listen").css("margin-left","48px");
			});
			$("#soundcloudPlayer").delay(800).animate({"margin-top":"0px"},300);
			$("#cellHolder, #blog").delay(800).animate({"height":"toggle"}, 300, function(){
				$(".menuContainer").css("margin-left","730px");
				$("#interact").text("INTERACT");
			});	
			if(activemenu=="blog"||activemenu=="media") {
				$("#blogbox").delay(800).animate({"height":"toggle"}, 200, function(){
					if(prevmenu=="media") {
						$("#mediaHolder").removeClass("hideYoutube");
				}
				});
			}
		}//END IF 2		
	});
	
	//ARTWORK CONTROLS
	//deselect elements functions
	$("#deselect").click(function(){
		$(".elel").css({"cursor":"default","border":"none"}).html("");
		selected=null;
		$(".itson > .elinfo").text($(".itson").index()+1).css("color", "#9d9d9d");
		$(".itson").css("width", "22px").removeClass("itson");
		$(".keyword").text("");
	});
	
	//color buttons
	$("#reset").hover(
		function(){
			$(this).css("background", "url('images/bkg-colors.png') -22px -88px no-repeat");
			$("#liSpacer2").text("reset all");
		}, 
		function(){
			$(this).css("background", "url('images/bkg-colors.png') 0 -88px no-repeat");
			$("#liSpacer2").text("");
	})
	$("#resetThis").hover(
		function(){
			$(this).css("background",'url("images/bkg-colors.png") -22px -44px no-repeat');
			$("#liSpacer2").text("reset");
		}, 
		function(){
			$(this).css("background",'url("images/bkg-colors.png") 0 -44px no-repeat');
			$("#liSpacer2").text("");
	})
	$("#deselect").hover(
		function(){
			$(this).css("background",'url("images/bkg-colors.png") -22px -66px no-repeat');
			$("#liSpacer2").text("deselect");
		}, 
		function(){
			$(this).css("background",'url("images/bkg-colors.png") 0 -66px no-repeat');
			$("#liSpacer2").text("");
	})
	$("#flipH").hover(
		function(){
			$(this).css("background",'url("images/bkg-colors.png") -22px -110px no-repeat');
			$("#liSpacer2").text("Flip X");
		}, 
		function(){
			$(this).css("background",'url("images/bkg-colors.png") 0 -110px no-repeat');
			$("#liSpacer2").text("");
	})
	$("#flipV").hover(
		function(){
			$(this).css("background",'url("images/bkg-colors.png") -22px -132px no-repeat');
			$("#liSpacer2").text("Flip Y");
		}, 
		function(){
			//$(this).css("background",'url("images/bkg-colors.png") 0 -132px no-repeat');
			$("#liSpacer2").text("");
	})
	$("#picker").hover(
		function(){
			//$(this).css("background",'url("images/bkg-colors.png") -22px -154px no-repeat');
			$("#liSpacer2").text("Bkg color");
		}, 
		function(){
			//$(this).css("background",'url("images/bkg-colors.png") 0 -154px no-repeat');
			$("#liSpacer2").text("");
	})
	$("#red").hover(
		function(){
			$(this).css("background-color", "#cf4042");
			$("#liSpacer2").text("red");
		}, 
		function(){
			$(this).css("background-color", "#db7071");
			$("#liSpacer2").text("");
	})
	$("#orange").hover(
		function(){
			$(this).css("background-color", "#e28e5b");
			$("#liSpacer2").text("orange");
		}, 
		function(){
			$(this).css("background-color", "#e9aa84");
			$("#liSpacer2").text("");
	})
	$("#yellow").hover(
		function(){
			$(this).css("background-color", "#e7c474");
			$("#liSpacer2").text("yellow");
		}, 
		function(){
			$(this).css("background-color", "#edd397");
			$("#liSpacer2").text("");
	})
	$("#green").hover(
		function(){
			$(this).css("background-color", "#95e775");
			$("#liSpacer2").text("green");
		}, 
		function(){
			$(this).css("background-color", "#b0ed98");
			$("#liSpacer2").text("");
	})
	$("#blue").hover(
		function(){
			$(this).css("background-color", "#317cac");
			$("#liSpacer2").text("blue");
		}, 
		function(){
			$(this).css("background-color", "#659dc1");
			$("#liSpacer2").text("");
	})
	$("#magenta").hover(
		function(){
			$(this).css("background-color", "#e775d3");
			$("#liSpacer2").text("magenta");
		}, 
		function(){
			$(this).css("background-color", "#ed98de");
			$("#liSpacer2").text("magenta");
		})
	$("#grey").hover(
		function(){
			$(this).css("background", "url('images/bkg-colors.png') 0 -22px no-repeat");
			$("#liSpacer2").text("grey");
		}, 
		function(){
			$(this).css("background", "url('images/bkg-colors.png') 0 0 no-repeat");
			$("#liSpacer2").text("");
	})
	$("#none").hover(
		function(){
			$(this).css("background", "url('images/bkg-colors.png') -22px -22px no-repeat");
			$("#liSpacer2").text("transparent");
		}, 
		function(){
			$(this).css("background", "url('images/bkg-colors.png') -22px 0 no-repeat");
			$("#liSpacer2").text("");
	})
	
	//select element
	function selectElement() {
		if(editMode=="on"){
			selected = $(this).index();
			//
			$(".itson > .elinfo").text($(".itson").index()+1).css("color", "#9d9d9d");
			$(".itson").css("width", "22px").removeClass("itson");
			//affects buttons
			$(".elno > .elinfo").eq(selected).css("color", "red");
			$(".elno").eq(selected).addClass("itson");
			//affects objects
			$(".elel").css("border", "none").html("");
			$(".elel").eq(selected).css("border", "1px dashed red").html("<span class='elinfo'>ELEMENT "+(selected+1)+"</span>");
		}
	}
	//assigns fn to click on artwork element
	$(".elel").click(selectElement);
	
	//elements hover fn
	$(".elel").hover(
		function(){
			if(editMode=="on"){
				$(this).css("border", "1px dashed black");
				$(".keyword").text(elements[$(this).index()].key);
			}
		}, 
		function(){
			if(editMode=="on"){
				$(this).css("border", "none");
				if(selected != null) {
					$("#el"+(selected+1)).css("border", "1px dashed red");
					$(".keyword").text(elements[selected].key);
				} else {
					$(".keyword").text("");
				}
			}
	})
	
	//Populates element # list
	for (i=1; i<28; i++) {
		$("ul.artElements").append('<li class="elno"><span class="elinfo">' + i + '</span></li>');
	}
	//Element list hover function
	$(".elno").hover(
		function(){
			if(editMode=="on"){
				if($(this).hasClass("itson")==false) {
					$(".elinfo", this).css("color", "#6b6b6b");
					$(".keyword").text(elements[$(this).index()].key);
				}
			}
		}, 
		function(){
			if(editMode=="on"){
				if($(this).hasClass("itson")==false) {
					$(".elinfo", this).css("color", "#9d9d9d");
					if(selected !=null){
						$(".keyword").text(elements[selected].key);
					}
				}
			}
	})
	//assigns select fn to list elements
	$(".elno").click(selectElement);
	
	//Flipping/Rotating/Color vars
	var flippedX = new Array(26);
	var flippedY = new Array(26)
	var flipStance = new Array(26);
	var colorS = new Array(26);
	var rot = new Array(26);
	
	//sets all elements' backgrounds to their default value
	function toDefaults() {
		for (f=0;f<27;f++) {
			$(".elel").eq(f).css({background: bkgs[f]});
			flipStance[f] = "XYZ";
			colorS[f] = "default";
			flippedX[f] = false;
			flippedY[f] = false;
			rot[f] = false;
		}
	}
	//executes toDefaults fn upon pageload
	toDefaults();
	
	//change color fn
	function changeColor(){
		if (selected != null) {
			$(".elel").eq(selected).css({background: "url('images/elel/"+flipStance[selected]+"/elel"+(selected+1)+"-"+colorS[selected]+"-"+flipStance[selected]+".png') no-repeat"});
		}
	}
	
	//Artwork controls (except deselect, flipX, flipY)
	$("#reset").click(function() {
		toDefaults();
	});
	$("#resetThis").click(function() {
		if(selected != null){
			$(".elel").eq(selected).css({background: bkgs[selected]});
			flipStance[selected] = "XYZ";
			flippedX[selected] = false;
			flippedY[selected] = false;
			rot[selected] = false;
			colorS[selected] = "default";
		}
	});
	$("#red").click(function() {
		colorS[selected] = "red";
		changeColor();
	});
	$("#orange").click(function() {
		colorS[selected] = "orange";
		changeColor();
	});
	$("#yellow").click(function() {
		colorS[selected] = "yellow";
		changeColor();
	});
	$("#green").click(function() {
		colorS[selected] = "green";
		changeColor();
	});
	$("#blue").click(function() {
		colorS[selected] = "blue";
		changeColor();
	});
	$("#magenta").click(function() {
		colorS[selected] = "magenta";
		changeColor();
	});
	$("#grey").click(function() {
		colorS[selected] = "grey";
		changeColor();
	});
	$("#none").click(function() {
		if(selected != null){
			colorS[selected] = "transparent";
			$(".elel").eq(selected).css({background: "transparent"});
		}
	});

	//Flip X/Y functions
	//X
	function flipX() {
		if(selected != null) {
			if(flippedY[selected]==true){
				$(".elel").eq(selected).css({background: "url('images/elel/XY/elel"+(selected+1)+"-"+colorS[selected]+"-XY.png') no-repeat"});
				flippedY[selected] = false;
				rot[selected] = true;
				flipStance[selected] = "XY";
			}
			else if(rot[selected]==true){
				flipStance[selected] = "Y";
				$(".elel").eq(selected).css({background: "url('images/elel/Y/elel"+(selected+1)+"-"+colorS[selected]+"-Y.png') no-repeat"});
				flippedY[selected] = true;
				rot[selected] = false;
			}
			else if(flippedX[selected]==true) {
				flipStance[selected] = "XYZ";
				flippedX[selected] = false;
				if(colorS[selected]=="default"){
					$(".elel").eq(selected).css({background: bkgs[selected]});
				} else {
					$(".elel").eq(selected).css({background: "url('images/elel/XYZ/elel"+(selected+1)+"-"+colorS[selected]+"-XYZ.png') no-repeat"});
				}
			}
			else {
				flipStance[selected] = "X";
				$(".elel").eq(selected).css({background: "url('images/elel/X/elel"+(selected+1)+"-"+colorS[selected]+"-X.png') no-repeat"});
				flippedX[selected] = true;
			}
		}
	}
	//Y
	function flipY() {
		if(selected != null) {
			if(flippedX[selected]==true){
				$(".elel").eq(selected).css({background: "url('images/elel/XY/elel"+(selected+1)+"-"+colorS[selected]+"-XY.png') no-repeat"});
				flippedX[selected] = false;
				rot[selected] = true;
				flipStance[selected] = "XY";
			}
			else if(rot[selected]==true){
				flipStance[selected] = "X";
				$(".elel").eq(selected).css({background: "url('images/elel/X/elel"+(selected+1)+"-"+colorS[selected]+"-X.png') no-repeat"});
				flippedX[selected] = true;
				rot[selected] = false;
			}
			else if(flippedY[selected]==true) {
				flipStance[selected] = "XYZ";
				flippedY[selected] = false;
				if(colorS[selected]=="default"){
					$(".elel").eq(selected).css({background: bkgs[selected]});
				} else {
					$(".elel").eq(selected).css({background: "url('images/elel/XYZ/elel"+(selected+1)+"-"+colorS[selected]+"-XYZ.png') no-repeat"});
				}
			}
			else {
				flipStance[selected] = "Y";
				$(".elel").eq(selected).css({background: "url('images/elel/Y/elel"+(selected+1)+"-"+colorS[selected]+"-Y.png') no-repeat"});
				flippedY[selected] = true;
			}
		}
	}

	//assign flip functions to flip buttons
	$("#flipH").click(flipX);
	$("#flipV").click(flipY);
	
	//DECONSTRUCT function
	function deconstruct() {
		for(e=1;e<27;e++) {
			var pos = parseInt($(".elel").eq(e-1).css("margin-left"));
			var posV = parseInt($(".elel").eq(e-1).css("margin-top"));
			if(e<12) {
				$('.elel').eq(e-1).animate({"margin-left":pos+300}, 500);
			} else if(e<22) {
				$('.elel').eq(e-1).animate({"margin-left":pos+70}, 500);
				$('.elel').eq(e-1).animate({"margin-top":posV-50},500);
			} else {
				$('.elel').eq(e-1).animate({"margin-left":pos+100}, 500);
			}
		}
	$(".vArrow").animate({"width":"toggle"},100);
	//1-11
	$("#el1").animate({"margin-left":elements[0].posLeft+300+140, "margin-top":elements[0].posTop+yTan*140}, 500);
	$("#el2").animate({"margin-left":elements[1].posLeft+300+55, "margin-top":elements[1].posTop-yTan*55}, 500);
	$("#el3").animate({"margin-left":elements[2].posLeft+300-100, "margin-top":elements[2].posTop+yTan*100}, 500);
	$("#el4").animate({"margin-left":elements[3].posLeft+300-200, "margin-top":elements[3].posTop+yTan*200}, 500);
	$("#el5").animate({"margin-left":elements[4].posLeft+300-50, "margin-top":elements[4].posTop-yTan*50}, 500, function(){
		var mata5=parseInt($("#el5").css("margin-top"));
		$(this).animate({"margin-top":mata5-90}, 500);
	})	
	$("#el6").animate({"margin-left":elements[5].posLeft+300+35, "margin-top":elements[5].posTop-yTan*35}, 500);
	$("#el7").animate({"margin-left":elements[6].posLeft+300-150, "margin-top":elements[6].posTop-yTan*150}, 500);
	$("#el8").animate({"margin-left":elements[7].posLeft+300-90, "margin-top":elements[7].posTop+yTan*90}, 500);
	$("#el9").animate({"margin-left":elements[8].posLeft+300+145, "margin-top":elements[8].posTop+yTan*145}, 500, function(){
		var mata9=parseInt($("#el9").css("margin-top"));
		$(this).animate({"margin-top":mata9+45},400);
	});
	$("#el10").animate({"margin-left":elements[9].posLeft+300+25,"margin-top":elements[9].posTop+yTan*25}, 500, function(){
		var mata10=parseInt($("#el10").css("margin-top"));
		$(this).animate({"margin-top":mata10+145}, 500);
	})
	//12-21
	$("#el12").animate({"margin-left":elements[11].posLeft+70+75, "margin-top":elements[11].posTop-50+yTan*75}, 500);
	$("#el13").animate({"margin-left":elements[12].posLeft+70+50, "margin-top":elements[12].posTop-50+yTan*50}, 500, function(){
		$(this).animate({"margin-top":elements[12].posTop-50+80}, 500, function(){
			$("#deconstruct").text("RECONSTRUCT");
		});
	});
	$("#el14").animate({"margin-left":elements[13].posLeft+70+45, "margin-top":elements[13].posTop-50-yTan*45}, 500);
	$("#el15").animate({"margin-left":elements[14].posLeft+70-100, "margin-top":elements[14].posTop-50+yTan*100}, 500);
	$("#el16").animate({"margin-left":elements[15].posLeft+70-165, "margin-top":elements[15].posTop-50+yTan*165}, 500);
	$("#el17").animate({"margin-left":elements[16].posLeft+70-100, "margin-top":elements[16].posTop-50+yTan*100}, 500);
	$("#el18").delay(500).animate({"margin-top":elements[17].posTop-50+70}, 500);
	$("#el19").animate({"margin-left":elements[18].posLeft+70-35, "margin-top":elements[18].posTop-50+yTan*35}, 500);
	$("#el21").animate({"margin-left":elements[20].posLeft+70+55, "margin-top":elements[20].posTop-50-yTan*55}, 500);
	$("#el20").delay(500).animate({/*"margin-left":elements[19].posLeft+50-100, */"margin-top":elements[19].posTop-50-65}, 500);
	//22-27
	$("#el22").delay(500).animate({/*"margin-left":elements[22].posLeft+100-100, */"margin-top":elements[21].posTop-yTan*115}, 500);
	$("#el23").delay(500).animate({/*"margin-left":elements[22].posLeft+100-100, */"margin-top":elements[22].posTop+yTan*100}, 500);
	$("#el24").animate({"margin-left":elements[23].posLeft+100-35, "margin-top":elements[23].posTop+yTan*35}, 500);
	$("#el25").animate({"margin-left":elements[24].posLeft+100-100, "margin-top":elements[24].posTop+yTan*100}, 500);
	$("#el26").animate({"margin-left":elements[25].posLeft+100-125, "margin-top":elements[25].posTop-yTan*125}, 500);
	}
	
	//RECONSTRUCT ARTWORK function
	function reconstruct() {
		var mata5=parseInt($("#el5").css("margin-top"));
		var mata9=parseInt($("#el9").css("margin-top"));
		var mata10=parseInt($("#el10").css("margin-top"));
		//1-11
		$("#el1").delay(1000).animate({"margin-left":elements[0].posLeft+300, "margin-top":elements[0].posTop}, 500, function(){
			$(".vArrow").delay(500).animate({"width":"toggle"},200);
			$("#interact").delay(500).animate({"height":"toggle"}, 200);
			$("#drag").delay(500).animate({"height":"toggle"}, 200);
			$("#infobox").delay(500).animate({"height":"toggle"}, 200, function(){
				$("#deconstruct").delay(500).text("DECONSTRUCT");
			});
			for(e=1;e<27;e++) {
				var pos = parseInt($(".elel").eq(e-1).css("margin-left"));
				var posV = parseInt($(".elel").eq(e-1).css("margin-top"));
				if(e<12) {
					$('.elel').eq(e-1).animate({"margin-left":pos-300}, 500);
				} else if(e<22) {
					$('.elel').eq(e-1).animate({"margin-left":pos-70},500);
				} else {
					$('.elel').eq(e-1).animate({"margin-left":pos-100}, 500);
				}
			}
		});
		$("#el2").delay(1000).animate({"margin-left":elements[1].posLeft+300, "margin-top":elements[1].posTop}, 500);
		$("#el3").delay(1000).animate({"margin-left":elements[2].posLeft+300, "margin-top":elements[2].posTop}, 500);
		$("#el4").delay(1000).animate({"margin-left":elements[3].posLeft+300, "margin-top":elements[3].posTop}, 500);
		$("#el5").delay(500).animate({"margin-top":mata5+90}, 500, function(){
			$(this).animate({"margin-left":elements[4].posLeft+300, "margin-top":elements[4].posTop}, 500);
			for(e=12;e<22;e++) {
				var posV = parseInt($(".elel").eq(e-1).css("margin-top"));
				$('.elel').eq(e-1).animate({"margin-top":posV+50},500);
			}
		});
		$("#el6").delay(1000).animate({"margin-left":elements[5].posLeft+300, "margin-top":elements[5].posTop}, 500);
		$("#el7").delay(1000).animate({"margin-left":elements[6].posLeft+300, "margin-top":elements[6].posTop}, 500);
		$("#el8").delay(1000).animate({"margin-left":elements[7].posLeft+300, "margin-top":elements[7].posTop}, 500);
		$("#el9").delay(500).animate({"margin-top":mata9-45}, 500, function(){
			$(this).animate({"margin-left":elements[8].posLeft+300, "margin-top":elements[8].posTop},400);
		});
		$("#el10").delay(500).animate({"margin-top":mata10-145}, 500, function(){
			$(this).animate({"margin-left":elements[9].posLeft+300,"margin-top":elements[9].posTop}, 500);
		});
		//12-21
		$("#el12").delay(500).animate({"margin-left":elements[11].posLeft+70, "margin-top":elements[11].posTop-50}, 500);
		$("#el13").animate({"margin-top":elements[12].posTop-50}, 500, function(){
			$(this).animate({"margin-left":elements[12].posLeft+70, "margin-top":elements[12].posTop-50}, 500);
		});
		$("#el14").delay(500).animate({"margin-left":elements[13].posLeft+70, "margin-top":elements[13].posTop-50}, 500);
		$("#el15").delay(500).animate({"margin-left":elements[14].posLeft+70, "margin-top":elements[14].posTop-50}, 500);
		$("#el16").delay(500).animate({"margin-left":elements[15].posLeft+70, "margin-top":elements[15].posTop-50}, 500);
		$("#el17").delay(500).animate({"margin-left":elements[16].posLeft+70, "margin-top":elements[16].posTop-50}, 500);
		$("#el18").animate({"margin-top":elements[17].posTop-50}, 500);
		$("#el19").delay(500).animate({"margin-left":elements[18].posLeft+70, "margin-top":elements[18].posTop-50}, 500);
		$("#el21").delay(500).animate({"margin-left":elements[20].posLeft+70, "margin-top":elements[20].posTop-50}, 500);
		$("#el20").animate({"margin-top":elements[19].posTop-50}, 500);
		//2-27
		$("#el22").delay(1000).animate({"margin-top":elements[21].posTop}, 500);
		$("#el23").delay(500).animate({"margin-top":elements[22].posTop}, 500);
		$("#el24").delay(1000).animate({"margin-left":elements[23].posLeft+100, "margin-top":elements[23].posTop}, 500);
		$("#el25").delay(1000).animate({"margin-left":elements[24].posLeft+100, "margin-top":elements[24].posTop}, 500);
		$("#el26").delay(1000).animate({"margin-left":elements[25].posLeft+100, "margin-top":elements[25].posTop}, 500);
		
	}
	//ASSIGN DECONSTRUCT/RECONSTRUCT FUNCTION
	$("#deconstruct").click(function(){
		if($(this).text()=="DECONSTRUCT"){
			$("#infobox").animate({"height":"toggle"}, 200);
			$(this).text("EXECUTING...");
			$("#interact").animate({"height":"toggle"}, 200);
			$("#drag").animate({"height":"toggle"}, 200);
			deconstruct();
		} else if ($(this).text()=="RECONSTRUCT"){
			$(this).text("EXECUTING...");
			reconstruct();
		} else if ($(this).text()=="KILL DRAGGING") {
			drag=false;
			$("#infobox").delay(2000).animate({"height":"toggle"},200);
			$("#drag").html("DRAGGING: <span style='color:red'>OFF</span>");
			$("#destroy").animate({"height":"toggle"}, 200);
			$(this).text("KILLING...");
			$( ".elel" ).draggable("destroy");
			for(i=1;i<28;i++){
				$("#el"+i).animate({"left":0, "top":0}, 2000, function(){
					$("#deconstruct").text("DECONSTRUCT");
				});
			}
		}
	});
	$("#drag").click(function(){
		if(drag==false){
			if($("#destroy").css("display")=="none") {
				$("#destroy").animate({"height":"toggle"}, 200);
				$("#infobox").animate({"height":"toggle"},200);
			}
			$("#deconstruct").text("KILL DRAGGING");
			$(this).html("DRAGGING: <span style='color:green'>ON</span>");
			drag = true;
			$( ".elel" ).draggable({ disabled:false, containment: 'parent' });
		} else {
			$(this).html("DRAGGING: <span style='color:red'>OFF</span>");
			drag = false;
			$( ".elel" ).draggable({ disabled: true });
		}
	});
	//Digital downloads hover
	$("#iTunes").hover(
		function(){
			$(this).css({"background":"url('images/shop/iTunes2.jpg') no-repeat"});
		},
		function(){
			$(this).css({"background":"url('images/shop/iTunes.jpg') no-repeat"});
		}
	);
	$("#beatport").hover(
		function(){
			$(this).css({"background":"url('images/shop/beatport2.jpg') no-repeat"});
		},
		function(){
			$(this).css({"background":"url('images/shop/beatport.jpg') no-repeat"});
		}
	);
	$("#solarshop").hover(
		function(){
			$(this).css({"background":"url('images/shop/solarshop2.jpg') no-repeat"});
		},
		function(){
			$(this).css({"background":"url('images/shop/solarshop.jpg') no-repeat"});
		}
	);
	$("#juno").hover(
		function(){
			$(this).css({"background":"url('images/shop/juno2.jpg') no-repeat"});
		},
		function(){
			$(this).css({"background":"url('images/shop/juno.jpg') no-repeat"});
		}
	);
	$("#trackitdown").hover(
		function(){
			$(this).css({"background":"url('images/shop/trackitdown2.jpg') no-repeat"});
		},
		function(){
			$(this).css({"background":"url('images/shop/trackitdown.jpg') no-repeat"});
		}
	);
	//Nav hover
	$("#navPrev").hover(
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') 0 -30px no-repeat");
		},
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') 0 0 no-repeat");
		}
	);
	$("#navNext").hover(
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') -30px -30px no-repeat");
		},
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') -30px 0 no-repeat");
		}
	);
	$("#navPrevT").hover(
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') 0 -30px no-repeat");
		},
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') 0 0 no-repeat");
		}
	);
	$("#navNextT").hover(
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') -30px -30px no-repeat");
		},
		function(){
			$(this).css("background", "url('images/shop/itemNav.png') -30px 0 no-repeat");
		}
	);
	$("#closeShop").hover(
		function(){
			$(this).css("color", "#b060b4");
		},
		function(){
			$(this).css("color", "black");
		}
	);
	$("#closeAbout").hover(
		function(){
			$(this).css("color", "#fff");
		},
		function(){
			$(this).css("color", "black");
		}
	);
	//Nav click
	var pP = parseInt($("#posterList").css("margin-left"));
	var pT = parseInt($("#tshirtList").css("margin-left"));
	var tM = parseInt($("#tshirtList").css("margin-left"));
	$("#navNext").click(function(){
		if($("#posterList").css("margin-left")=="0px") {
			$("#posterList").animate({"margin-left":"-291px"},400);
		}
	});
	$("#navPrev").click(function(){
		if($("#posterList").css("margin-left")=="-291px") {
			$("#posterList").animate({"margin-left":"0px"},400);
		}
	});
	$("#navNextT").click(function(){
		pT = parseInt($("#tshirtList").css("margin-left"));
		if(pT%315==0 && pT>-315*5) {
			tM = parseInt($("#tshirtList").css("margin-left"));
			$("#tshirtList").animate({"margin-left":tM-315},400);
		}
	});
	$("#navPrevT").click(function(){
		pT = parseInt($("#tshirtList").css("margin-left"));
		if(pT%315==0 && pT<0) {
			tM = parseInt($("#tshirtList").css("margin-left"));
			$("#tshirtList").animate({"margin-left":tM+315},400);
		}
	});
	$("#picker").ColorPicker({
		onChange: function (hsb, hex, rgb) {
			$('#container').css('background-color', '#' + hex);
			$('#picker').css('background-color', '#' + hex);
		}
	});
	
	//ABOUT PAGE MOVEMENT
	var aboutPos = [
		{a:-20},
		{a:-27},
		{a:425},
		{a:21},
		{a:39},
		{a:-38},
		{a:184}
	]
	//move artwork on mouse movement
	$(document).mousemove(function(e) {
		//maps mouse coords to main DIV's width/height
		var relativeX = e.pageX - $(".whiteBkgAbout").offset().left;
		var relativeY = e.pageY - $(".whiteBkgAbout").offset().top;
		var relX = 679-relativeX;
		if(relX >-1 && relX<680 && relativeY>-1 && relativeY<569) {
			$("#about1").css('margin-left', aboutPos[0].a+relX/60);
			$(".text1").css('margin-left', relX/60);
			$("#about2").css('margin-left', aboutPos[1].a+relX/30);
			$(".text3").css('margin-left', relX/30);
			$("#about3").css('margin-left', aboutPos[2].a-relX/20);
			$(".text2").css('margin-left', -relX/20);
			$("#about4").css('margin-left', aboutPos[3].a+relX/80);
			$(".text4").css('margin-left', relX/80);
			$("#about5").css('margin-left', aboutPos[4].a-relX/80);
			$(".text5").css('margin-left', -relX/80);
			$("#about6").css('margin-left', aboutPos[5].a+relX/40);
			$(".text6").css('margin-left', relX/40);
		}
	});
	$(".whiteBkgAbout").hover(
		function() {
		},
		function() {
			animating = true;
			$("#about1").animate({'margin-left':aboutPos[0].a},100);
			$(".text1").animate({'margin-left':'0px'},100);
			$("#about2").animate({'margin-left':aboutPos[1].a},100);
			$(".text3").animate({'margin-left':'0px'},100);
			$("#about3").animate({'margin-left':aboutPos[2].a},100);
			$(".text2").animate({'margin-left':'0px'},100);
			$("#about4").animate({'margin-left':aboutPos[3].a},100);
			$(".text4").animate({'margin-left':'0px'},100);
			$("#about5").animate({'margin-left':aboutPos[4].a},100);
			$(".text5").animate({'margin-left':'0px'},100);
			$("#about6").animate({'margin-left':aboutPos[5].a},100);
			$(".text6").animate({'margin-left':'0px'},100, function(){
				animating=false;
			});
		}
	);
})