$(document).ready(function(){
	
	/************************************************************************************************************************************************************************/
	/*when document ready functions to execute */
	
	/*flash insert*/
	if(document.getElementById('flash')) {
		insertBannerFlash();
	}
	
	/*jcarousel control update*/
	var count = 0;
	var codeString = "<ol><img src='basemedia/images/prev.gif' class='jcarousel-prev' />";
	$(".jcarousel-list li").each(function() {
		count++;
		if(count == '1')
		{
			codeString = codeString + "<li class='selected' id='"+count+"'><a href='#' class='jcarousel-control'>"+count+"</a></li>";
		}
		else
		{
			codeString = codeString + "<li class='' id='"+count+"'><a href='#' class='jcarousel-control'>"+count+"</a></li>";
		}
	});
	codeString = codeString + "<img src='basemedia/images/next.gif' class='jcarousel-next' /></ol>";
	$("div.jcarousel-controls").html($("div.jcarousel-controls").html() + codeString);
	
	/*jcarousel creation*/
    jQuery("#projectCarousel").jcarousel({
        itemScroll: 1,
        itemFirstInHandler: itemFirstInHandler
		
    });
	
	
	/*scrollers*/
	/*
		Depending on which template is being used, scrollers will be added with a reference(id) to the element that requires scrolling. The element that needs scrolling will also be wrapped inside a div 
		that will have the relative positioning on it that the element wrapped in it will use on use of the scrollers.
		
		The menu is done indepenatly as it will exist on any page within the website
		
		The panel listing component will also be independant as it is not specific to any template.
	*/
	/*tpl default*/
	if(document.getElementById("default"))
	{
		//get the elements that could exist within the content that may require scrolling
		var ic = getElementsByClassName(document, "div", "inner-content");
		var ics = getElementsByClassName(document, "div", "inner-content-small");
		var icf = getElementsByClassName(document, "div", "inner-content-full");
		
		var left = 263;
		
		//check to see if there is a menu within the content and if so then update the left var
		var menuCheck = getElementsByClassName(document, "div", "menu");
		if(document.getElementById("contentMenu")) //theres two menus on the page therefore the second one in the content
		{
			left = left + 233;
		}		
		//checking inner content
		if(ic.length > 0)
		{
			if(ic[0].offsetHeight > 416)
			{
				$("div.scroll-buttons").append('<div class="scrollers" id="inner-content"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				//wrap the div in a scope width the same height 416 position relative
				//make the element position aboslute top 0
				width = ic[0].offsetWidth;
				$(ic[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden;'></div>")
			}
		}		
		//checking inner content small
		if(ics.length > 0)
		{
			if(ics[0].offsetHeight > 416)
			{
				$("div.scroll-buttons").append('<div class="scrollers" id="inner-content-small"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				width = ics[0].offsetWidth;
				$(ics[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden;'></div>")
			}
		}
		//chceking inner content full
		if(icf.length > 0)
		{
			if(icf[0].offsetHeight > 416)
			{
				$("div.scroll-buttons").append('<div class="scrollers" id="inner-content-full"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				width = icf[0].offsetWidth;
				$(icf[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden;'></div>")
			}
		}
	}
	/*splitLHS*/
	if(document.getElementById("splitlhs"))
	{
		//get the elements that require may require scolling in realtion to the splitlhs template
		var primary = getElementsByClassName(document, "div", "primary-column");
		var second = getElementsByClassName(document, "div", "secondary-column");
		
		var left = 263;
		//since both primary and secondary column will scroll together, checking to see if either goes over the height and if so to add the scrollers
		if(primary[0].offsetHeight > 416 || second[0].offsetHeight > 416)
		{
			$("div.scroll-buttons").append('<div class="scrollers" id="prim-second"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			width = primary[0].offsetWidth + second[0].offsetWidth;
			//wrap both an element to move the content
			var phtml = $("div.primary-column").html();
			var shtml = $("div.secondary-column").html();
			var heading = $("div.group h1").html();
			
			$("div.group").empty();
			$("div.group").html("<h1>"+heading+"</h1><div class='prim-second'><div class='primary-column'>"+phtml+"</div><div class='secondary-column'>"+shtml+"</div></div>");
			
			//wrap that in the scope 
			$("div.prim-second").wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden;'></div>")
		}
	}
	/*splitLHS*/
	if(document.getElementById("splitrhs"))
	{
		//get the elements that require may require scolling in realtion to the splitrhs template
		var primary = getElementsByClassName(document, "div", "primary-column");
		var second = getElementsByClassName(document, "div", "secondary-column");
		var imgMenu = getElementsByClassName(document, "div", "image-menu");
		
		var leftprim = 263;
		var leftsec = 364;
		
		
		//checking to see if scrollers required and adds them if needed
		if(imgMenu.length > 0)//there is an image-menu on the screen and would be in primary column
		{
			var counter = 0;
			$(".image-menu li").each(
				function(i)
				{
					counter++;
				}
			);
			var height = counter * 60;
			if(height > 416)
			{
				$("div.scroll-buttons").append('<div class="scrollers" id="primary-column"  style="left: '+leftprim+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				width = 101;
				$(primary[0]).wrap("<div class='scope' style='width:"+width+"px !important; height:416px; position:relative; overflow:hidden; float: left;'></div>")
			}
		}
		else if(primary[0].offsetHeight > 416)
		{
			$("div.scroll-buttons").append('<div class="scrollers" id="primary-column"  style="left: '+leftprim+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			width = primary[0].offsetWidth;
			$(primary[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>")
		}
		
		if(second[0].offsetHeight > 416)
		{
			$("div.scroll-buttons").append('<div class="scrollers" id="secondary-column"  style="left: '+leftsec+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			width = second[0].offsetWidth;
			$(second[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
		}
	}
	/*menu/s*/
	if(document.getElementById("menu"))
	{
		//get the list of menus on the page
		//at most the length of the menu list should be 2, one for main navigation and one within the content
		var menuList = getElementsByClassName(document, "div", "menu");
		
		var left = 30; //at the very least the offset is 30
		
		for(i=0;i<menuList.length;i++)
		{
			//get the main ul of the menu
			var ul = $(menuList[i]).children("ul");
			//checking to see if its the main nav
			if($(menuList[i]).parent().attr("class") == "page") //then the main navigation
			{
				$(ul[0]).addClass("main-first");
				$(ul[0]).wrap("<div class='scope' style='width:233px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
				
				//$(ul[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>")
				if(ul[0].offsetHeight > 416)
				{
					$("div.scroll-buttons").append('<div class="scrollers nav" id="main-first"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				}
			}
			//checks to see if it the content nav
			else if($(menuList[i]).parent().attr("class") == "group")//the secondary navigation
			{
				left = 263;
				$(ul[0]).addClass("second-first");
				$(ul[0]).wrap("<div class='scope' style='width:233px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
				
				//$(".second-first").wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>")
				if(ul[0].offsetHeight > 416)
				{
					$("div.scroll-buttons").append('<div class="scrollers nav" id="second-first"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
				}
			}
		}
		
		//since theres menus on the screen add into the scrollers div controllers for any submenus that may go over and display none on it;
		$("div.scroll-buttons").append('<div class="scrollers nav" id="menuSub"  style="left: 118px; display: none;"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
		$("div.scroll-buttons").append('<div class="scrollers nav" id="contentMenuSub"  style="left: 342px; display: none;"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
	} 
	/*panel listing*/
	if(document.getElementById("listing-panel"))
	{
		var ul = $("#listing-panel").children("ul");
		var left = 109;
		if(ul[0].offsetHeight > 416) // as there should only ever be one ul in the listing panel
		{
			//$(panel).wrap("<div class='scope' style='width:154px; height:416px; position:relative; overflow:hidden; float: left;'></div>")
			$("div.scroll-buttons").append('<div class="scrollers" id="listing-panel"  style="left: 109px;"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
		}
		else
		{
		}
	}
	
	/*carousel n details (for details only as the carousel images will all fall within viewing range)*/
	if(document.getElementById("details"))
	{
		element = document.getElementById("details");
		if($(element).parent().attr("class") == "carousel-n-details")
		{
			//as on enter page the details are hidden, wrap the details div in the scope just in case the details do go out of view
			//$(element).wrap("<div class='scope' style='width:370px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
			//get the a element in the details
			var list = $(element).children(".inner-content-small");
			if(list.length > 0)
			{
				$(element).children(".inner-content-small").wrap("<div class='scope' style='width:370px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
				$("div.scroll-buttons").append('<div class="scrollers" id="inner-content-small"  style="left: 364px; display: none"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			}
		}
	} 
	/*add dummy class to all li's*/
	$(".menu li").each(
		function(i)
		{
			$(this).addClass("holder");
		}
	);
	/*add dummy class to all ul's*/
	$(".menu ul").each(
		function(i)
		{
			$(this).addClass("holder");
		}
	);
	/*
		on enter page if there is a first level item selected, if there is a 2nd submenu item selected then show the third menu, otherwise show the second menu
	*/
	if(document.getElementById("menu"))
	{
		//reset the id's on the menu items
		$(".menu ul").each(
			function(i)
			{
				if($(this).attr("id") == "2")
				{
					$(this).attr("id", "second");
				}
				else if($(this).attr("id") == "3")
				{
					$(this).attr("id", "third");
				}
			}
		)
	
		var first;
		var second;
		var element;
		var check;
		
		var menuList = getElementsByClassName(document, "div", "menu");
		for(var i=0;i < menuList.length; i++)
		{
			var id = $(menuList[i]).attr("id");
			$("#"+id+" ul").children().each(
				function(i)
				{
					//liClass = $(this).attr("class").replace("break", "").replace(" ", "").replace("submenu", "").replace(" ", "");
					//var subCheck = $(this).attr("class").replace("break", "").replace(" ", "").replace("selected", "").replace(" ", "");
					//if(liClass == "selected" && subCheck == "submenu")
					if($(this).attr("class").match("selected") && $(this).attr("class").match("submenu"))
					{
						check = "selected";
						mainlist = $(this).children("ul");
						element = mainlist[0];
						//then check to see if there should be a third level showing
						$(this).children("ul").children().each(
							function(i)
							{
								
								subLiClass = $(this).attr("class").replace("break", "").replace(" ", "").replace("submenu", "").replace(" ", "");
								subSubCheck = $(this).attr("class").replace("break", "").replace(" ", "").replace("selected", "").replace(" ", "");
								var id = $(this).parent().attr("id");
								
								//if(subLiClass == "selected" && subSubCheck == "submenu")
								if($(this).attr("class").match("selected") && $(this).attr("class").match("submenu"))
								{
									if(id == "third")
									{
										list = $(this).children();
										element = list[0];
									}
									else
									{
									}
								}
								else
								{
								}
							}
						) 
					}
				}
			)		
			if(check == "selected")
			{
				$(element).removeClass("hidden");
				if(element.offsetHeight > 416)
				{
					$("div.scroll-buttons #"+id+"Sub").css("display", "block");
				}
			}
		}
		
		
	}
	/*sets the heights on all uls in the menu to 416px if there are shorter than that*/
	$("#menu ul").each(
		function(i)
		{
			if(this.offsetHeight < 416)
			{
				$(this).css("height", "416px");
			}
		}
	)
	
	/************************************************************************************************************************************************************************/
	/*on event occuring functions */
	if($.browser.safari) {
		$(".menu ul li a").each(
			function(i)	{
				$(this).attr("onclick", "if(abc(this)) { return true; } else { return false; }");
			}
		)
	} else {
		/*navigation javascript*/
	 	$(".menu ul li a").click(
			function() {
				return abc(this);
			}
		);
	}
	
	
	
	/*jcarousel n details functionality*/
	$(".carousel-n-details a.top").click(
		function()
		{
			//get the href of the a clicked minu s the #
			var href = $(this).attr("href").replace("#", "").replace(window.location, "");
			$(".carousel-n-details").children().each(
				function(i)
				{
					if($(this).attr("id") == href)
					{
						$(this).removeClass("hide");
					}
					else
					{
						$(this).addClass("hide");
					}
					
					
				}
			)
			
			if(href == "details")
			{
				list = $("div#details .inner-content-small");
				if(list.length > 0 && list[0].offsetHeight > 416)
				{
					$("div.scroll-buttons #inner-content-small").css("display", "block");
				}
			}
			else
			{
				$("div.scroll-buttons #inner-content-small").css("display", "none");
			}
			
			return false;
		}
	)
	
	/*office list controls*/
	$(".office a").click(
		function()
		{
			var winloc = window.location;
			var href = $(this).attr("href").replace("#","").replace(winloc, "");
			//show the pulser
			$(".office-list li").each(
				function(i)
				{
					if($(this).attr("id") == href)
					{
						$(this).removeClass("hide");
					}
					else
					{
						$(this).addClass("hide");
					}
				}
			)
			//show the office address
			$(".address-list li").each(
				function(i)
				{
					if($(this).attr("class").replace("hide", "").replace(" ", "") == href)
					{
						$(this).removeClass("hide");
					}
					else
					{
						$(this).addClass("hide");
					}
				}
			)
			
			//reset the selected class
			$(".office li").each(
				function(i)
				{
					$(this).removeClass("selected");
				}
			)
			
			$(this).parent().addClass("selected");
			
			return false;
			
		}
	)
	
	//check to see if there are any empty p tags and remove them
	$("p").each(
		function(i)
		{
			if($(this).html().length <= 0)
			{
				$(this).css("display", "none");
			}
		}
	);
	
	/*project details check
	if there is no images then display the description and hide the back link
	*/
	if(document.getElementById("projectCarousel"))
	{
		var counter = 0;
		$(".jcarousel-clip img").each(
			function(i)
			{
				counter++;
			}
		);
		
		if(counter == 0)//there are no images
		{
			$(".carousel-n-details .jcarousel-scope").addClass("hide");
			$(".carousel-n-details #details").removeClass("hide");
			$("a.top").addClass("hide");
		}
	}
	
	/*scrollers behaviour*/
	//old scrollers behaviour
	//applyScrollBehaviour();
	applyScrollingBehaviour();
});

function check(evt, el)
{
	var checker = abc(el);
	if(checker == false)
	{
		el.preventDefault();
	}
}

function abc(thElement)
{
	var del = true;
	if($(thElement).parents("ul").attr("id")=="second"){
		del = false;
		$(".content div.group").empty();
		$(".content div.group").html
		('<div class="primary-column"><div class="image-menu"></div></div><div class="secondary-column"></div>');
		$("div.image-menu").load("/umbraco/getimagelist.aspx?disciplineId="+$(thElement).parent().attr("id"),{},function()
			{
				addRHSScroll();
				//applyScrollBehaviour();
				applyScrollingBehaviour();
			}
		);
	}
	var element = $(thElement).parents("div.menu");
	var id = $(element).attr("id");
	var level = $(thElement).parent().parent().attr("id");


	//remove the selected class from all of the a li parents siblings
	$(thElement).parent().siblings().each(
		function(i)
		{	
			$(this).removeClass("selected");
		}
	)

	var scrElToLeave = "null";

	if(level == "first" || level == "second")
	{
		if(level == "first")
		{
			
			//reset all li's with no selected class
			$("#"+id+" ul li").each(
				function(i)
				{
					$(this).removeClass("selected");
				}
			)
		}
		//var pcls = $(thElement).parent().attr("class").replace("break", "").replace(" ", "");
		//check to see if theres a submenu
		if($(thElement).parent().attr("class").match("submenu"))
		{
			//then show the submenu
			var ul = $(thElement).siblings("ul");
			if($(ul).attr("class").match("hidden"))
			{
				//hide all the submenus secondary and tertiary
				$("#"+id+" li ul").each(
					function(i)
					{
						//var cls = $(this).attr("class");	
						if($(this).attr("class").match("hidden")){}
						else
						{
							$(this).addClass("hidden");
						} 
					}
				)
				//remove selected class from all siblings
				$(thElement).siblings().each(
					function(i)
					{
						$(this).fadeIn("slow");
						$(this).removeClass("selected");
					}
				)
				$(thElement).siblings().removeClass("hidden");
				//check to see if the submenu shown is over the height limit
				if(ul[0].offsetHeight > 416)
				{
					if(id == "contentMenu")
					{
						$("div.scroll-buttons #contentMenuSub").css("display", "block");
						scrElToLeave = $("div.scroll-buttons #contentMenuSub");
					}
					else
					{	
						$(".scrollers#menuSub").css("display", "block");
						scrElToLeave = $("div.scroll-buttons #menuSub");
					}
				}
				else
				{
					$(".scollers#"+id+"Sub").css("display", "none");
				}
				//hide the scollers for listing panel
				$("div.scroll-buttons #listing-panel").css("display", "none");
				//hide the listing-panel div
				$("div.listing-panel").css("display", "none");
			}
			
		}
		else
		{
			//redirect to page
			$(thElement).parent().addClass("selected");
			return true;
		}
	}
	else if(level == "third")
	{
		if($(thElement).parent().attr("class").match("backmenu"))
		{
			//add hidden class to the parent ul
			var secul = $(thElement).parents("#second");
			$(thElement).parents("#third").addClass("hidden");
			$(secul).children().each(
				function(i)
				{
					$(this).removeClass("selected");
				}
			)
			$(secul).fadeIn("slow");
			$(secul).removeClass("hidden");
			//check to see if scroller needed
			if(secul[0].offsetHeight > 416)
			{
				$(".scrollers#"+id+"Sub").css("display", "block");
				scrElToLeave = $(".scrollers#"+id+"Sub");
				//$("div.scroll-buttons").append('<div class="scrollers nav" id="'+id+'Sub"  style="left: '+left+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			}
			else
			{
				$(".scrollers#"+id+"Sub").css("display", "none");
			}
			
		}
		else
		{
			$(thElement).parent().addClass("selected");
			return true;
		}
	}
	resetMenuNestedUlTop(id, 0, "second");
	resetMenuNestedUlTop(id, 0, "third");
	$(thElement).parent().addClass("selected");
	//delete all content
	var parent = $(thElement).parents(".menu").attr("id");
	if(del == true && parent == "menu")
	{
		
		$(".content .group").empty();
		$("div.scroll-buttons div").each(
			function(i)
			{
				if($(scrElToLeave).attr("id") == $(this).attr("id"))
				{
					//alert("1: " + $(scrElToLeave).attr("id") + "\n2: " + $(this).attr("id"));
					$(this).css("display", "block");
				}
				else
				{
					$(this).css("display", "none");
				}
				
			}
		);
		if(level == "first")
		{
			//<div class="flash" id="flash"></div>
			$("div.content div.group").append("<div class='flash' id='flash'></div>");
			//update the content with the flash
			insertBannerFlash();
		}
	} 
	else if(del == true && parent == "contentMenu")
	{
			$(".inner-content-small").empty();
			//add in check if they only want directors associates and awards with this ability
	}
	return false;
}

function insertBannerFlash()
{
	var so = new SWFObject("/basemedia/flash/rotator.swf", "sotester", "687", "416", "7", "#000000");
	so.addParam("allowScriptAccess", "sameDomain");
	so.addParam("wmode", "transparent");
	so.write("flash");
}

function resetMenuNestedUlTop(id, thenewtop, level)
{
	$("."+id+" ul#"+level).each(
		function(i)
		{
			$(this).css("top", thenewtop+"px");
		}
	)
}

function itemFirstInHandler(carousel, li, idx, state) {
    if (state != 'init')
        return;

    var cr = carousel;

    jQuery(".jcarousel-controls li a").bind("click", function() {
		cr.scrollDirection = "null";
        cr.scroll(parseInt(jQuery(this).html()));
		//remove selected class
		$(".jcarousel-controls li").each(
			function(i)
			{
				$(this).removeClass("selected");
			}
		)
		//add selected class to the right item
		$(this).parent().addClass("selected");
		
        return false;
    });
}


$.fn.hoverClass = function(c) {
	return this.each(function(){
		$(this).hover( 
			function() { $(this).addClass(c);  },
			function() { $(this).removeClass(c); }
		);
	});
};

function addRHSScroll()
{

	//get the elements that require may require scolling in realtion to the splitrhs template
	var primary = getElementsByClassName(document, "div", "primary-column");
	var second = getElementsByClassName(document, "div", "secondary-column");
	var imgMenu = getElementsByClassName(document, "div", "image-menu");
	
	var leftprim = 263;
	var leftsec = 364;
	
	//checking to see if scrollers required and adds them if needed
	//checking to see if scrollers required and adds them if needed
	if(imgMenu.length > 0)//there is an image-menu on the screen and would be in primary column
	{
		var counter = 0;
		$(".image-menu li").each(
			function(i)
			{
				counter++;
			}
		);
		var height = counter * 60;
		if(height > 416)
		{
			$("div.scroll-buttons").append('<div class="scrollers" id="primary-column"  style="left: '+leftprim+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
			width = 83;
			$(primary[0]).wrap("<div class='scope' style='width:"+width+"px !important; height:416px; position:relative; overflow:hidden; float: left;'></div>")
		}
	}
	else if(primary[0].offsetHeight > 416)
	{
		$("div.scroll-buttons").append('<div class="scrollers" id="primary-column"  style="left: '+leftprim+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
		width = primary[0].offsetWidth;
		$(primary[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>")
	}
	
	if(second[0].offsetHeight > 416)
	{
		$("div.scroll-buttons").append('<div class="scrollers" id="secondary-column"  style="left: '+leftsec+'px"><a href="#" class="up"><img src="media/images/arrow-up.gif" width="9" height="5" alt="" /></a><a href="#" class="down"><img src="media/images/arrow-down.gif" width="9" height="5" alt="" /></a></div>');
		width = second[0].offsetWidth;
		$(second[0]).wrap("<div class='scope' style='width:"+width+"px; height:416px; position:relative; overflow:hidden; float: left;'></div>");
	}
};

function applyScrollingBehaviour()
{
	$(".scroll-buttons a").mousedown(
		function()
		{
			
			var pxpersec = 150;
			var id = $(this).parent().attr("id");
			var height;
			var element;
			var className = $(this).parent().attr("class").replace("scrollers ", "");
			
			//if(className == "nav")
			if($(this).parent().attr("class").match("nav"))
			{
				//submenu movement
				if(id == "contentMenuSub" || id == "menuSub")
				{
					var menu = id.replace("Sub", "");
					
					element = $("div#"+menu).children("div.scope").children("ul");
					selected = $(element).children(".selected");
					var ulToMove = $(selected[0]).children("ul");
					//find the ul that's doing the moving
					for(j=0;j<selected.length;j++)
					{
						var subSelected = $(selected[j]).children("ul").children(".selected");
						if(subSelected.length > 0)
						{
							var check = $(subSelected[0]).children("ul");
							if(check.length > 0)
							{
								ulToMove = $(subSelected[0]).children("ul");
							}							
							
						}
						/*else it will be the submenu of the first occurence of the selected class in the list*/
					}
					
					//find the distance the element needs to move
					if($(this).attr("class") == "down")
					{
						var elHeight = parseInt($(ulToMove).height());
						var scopeHeight = parseInt($(ulToMove).parents(".scope").css("height"));
						var parentUlTop = parseInt($(ulToMove).parents("ul").css("top"));
						var elTop = parseInt($(ulToMove).css("top"));
						if(elTop < 0)
						{
							elTop = elTop * -1;
						}
						
						if(parentUlTop < 0)
						{
							parentUlTop = parentUlTop * -1;
						}
						var topdiff = parentUlTop - elTop;
						if(topdiff < 0)
						{
							topdiff = topdiff*-1;
						}
						var diff = elHeight - scopeHeight - topdiff;
						
						var time = (diff/pxpersec)*1000;
						var newtop = parseInt($(ulToMove).css("top")) - diff;
						
						$(ulToMove).animate({top: newtop},time,"linear");
					}
					else if($(this).attr("class") == "up")
					{
						//the element will need to move to the opposite of teh parent ul's top
						var parentUlTop = parseInt($(ulToMove).parents("ul").css("top"));
						var elTop = parseInt($(ulToMove).css("top"));
						
						var newtop = parentUlTop * -1;
						//find the difference to move
						var diff = newtop - elTop;
						var time = (diff/pxpersec)*1000;
						
						$(ulToMove).animate({top: newtop},time,"linear");
					}
				}
				else
				{
					//get the element and the height of the element
					$(".page ul").each(
						function(i)
						{
							if($(this).attr("class") == id)
							{
								height = this.offsetHeight;
								element = this;
							}
						}
					);
					
					//find the amount that the element can travel in the desired direction
					if($(this).attr("class") == "down")
					{
						//get the height of the scope surrounding the element
						var currtop = parseInt($(element).css("top"));
						
						var scopeHeight = parseInt($(element).parents(".scope").css("height"));
						var diff = height - scopeHeight + currtop;//it will only ever be 0 to minus the highest possible distance
						
						//get the time that the element will take to travel that distance
						var time = (diff/pxpersec)*1000;
						var newtop = -1*(height-scopeHeight);
						
						//if an element is selected and there is a submenu showing, then animate in the opposite direction
						//such that the element animates to the positive value of newtop
						//find the ul if any are showing
						var menu;
						
						if($(this).parent().attr("id").match("first"))//then it the main nav
						{
							menu = "menu";
						}
						else //it is the content menu
						{
							menu = "contentMenu"
						}
											
						newElement = $("div#"+menu).children("div.scope").children("ul");
						selected = $(newElement).children(".selected");
						var ulToMove = $(selected[0]).children("ul");
						for(j=0;j<selected.length;j++)
						{
							var subSelected = $(selected[j]).children("ul").children(".selected");
							if(subSelected.length > 0)
							{
								var check = $(subSelected[0]).children("ul");
								if(check.length > 0)
								{
									ulToMove = $(subSelected[0]).children("ul");
								}							
								
							}
							/*else it will be the submenu of the first occurence of the selected class in the list*/
						}
						
						//animate the element and the submenu element if there is one to animate
						$(element).animate({top: newtop},time,"linear");
						if(ulToMove.length > 0)
						{
							newtop = newtop * -1;
							$(ulToMove).animate({top: newtop},time,"linear");
						}
						else
						{
							//do nothing
						}
						
					}
					else if($(this).attr("class") == "up")
					{
						var diff = parseInt($(element).css("top"));
						var time = (-diff/pxpersec)*1000;
						var newtop = 0;
						
						//animate any submenu that may be showing
						if($(this).parent().attr("id").match("first"))//then it the main nav
						{
							menu = "menu";
						}
						else //it is the content menu
						{
							menu = "contentMenu"
						}
											
						newElement = $("div#"+menu).children("div.scope").children("ul");
						selected = $(newElement).children(".selected");
						var ulToMove = $(selected[0]).children("ul");
						for(j=0;j<selected.length;j++)
						{
							var subSelected = $(selected[j]).children("ul").children(".selected");
							if(subSelected.length > 0)
							{
								var check = $(subSelected[0]).children("ul");
								if(check.length > 0)
								{
									ulToMove = $(subSelected[0]).children("ul");
								}							
								
							}
							/*else it will be the submenu of the first occurence of the selected class in the list*/
						}
						$(element).animate({top: newtop},time,"linear");
						if(ulToMove.length > 0)
						{
							$(ulToMove).animate({top: newtop},time,"linear");
						}
						else
						{
							//do nothing
						}
						
					}
				}
			}
			else //all other elements movement
			{
				var element = $("."+id);
				
				if($(this).attr("class") == "down")
				{
					var height = parseInt($(element).height());
					//get the height of the scope surrounding the element
					var currtop = parseInt($(element).css("top"));
					var scopeHeight = parseInt($(element).parents(".scope").css("height"));
					var diff = height - scopeHeight + currtop;//it will only ever be 0 to minus the highest possible distance
					
					//get the time that the element will take to travel that distance
					var time = (diff/pxpersec)*1000;
					
					var newtop = -1*(height-scopeHeight);
					
					//animate the element and the submenu element if there is one to animate
					$(element).animate({top: newtop},time,"linear");
					
				}
				else if($(this).attr("class") == "up")
				{
					
					var diff = parseInt($(element).css("top"));
					var time = (-diff/pxpersec)*1000;
					var newtop = 0;
					
					$(element).animate({top: newtop},time,"linear");
				}
			}
			return false;
		}
	);
	
	$(".scroll-buttons a").mouseup(
		function()
		{
			//on mouse up
			//stop all animating elements
			$("#menu ul").each(
				function(i)
				{
					$(this).stop();
				}
			);
			
			$(".scope div").each(
				function(i)
				{
					$(this).stop();
				}
			);
			return false;
		}
	);
}

function applyScrollBehaviour()
{
	$(".scroll-buttons a").click(
		function()
		{
			var id = $(this).parent().attr("id");
			var height;
			//element that is being effected
			var element;
			var className = $(this).parent().attr("class").replace("scrollers ", "");
			//menu movement
			
			if(className == "nav")
			{
				//submenu movement
				if(id == "contentMenuSub" || id == "menuSub")//its a sub menu scrollers
				{
					var menu = id.replace("Sub", "");
					
					element = $("div#"+menu).children("div.scope").children("ul");
					selected = $(element).children(".selected");
					var ulToMove = $(selected[0]).children("ul");
					for(j=0;j<selected.length;j++)
					{
						var subSelected = $(selected[j]).children("ul").children(".selected");
						if(subSelected.length > 0)
						{
							var check = $(subSelected[0]).children("ul");
							if(check.length > 0)
							{
								ulToMove = $(subSelected[0]).children("ul");
							}							
							
						}
						/*else it will be the submenu of the first occurence of the selected class in the list*/
					}
					//move the element.
					//get the current top of the element
					var top = parseInt($(ulToMove[0]).css("top"));
					height = ulToMove[0].offsetHeight;
					var newtop = 0;
					var parentTop = parseInt($("#"+menu+" ul").css("top"));
					
					if($(this).attr("class") == "up")
					{
						var diff = parentTop - top;
						if(diff < 60)
						{
							newtop = 0;
						}
						else if(top >= (parentTop-1))
						{
							newtop = top;
						}
						else
						{
							newtop = top+60;
						}
					}
					else
					{	
						//var diff = (parentTop + 416)(top);
						diff = 416 - height - parentTop;
						if(top < diff)
						{
							newtop = top;
						}
						else
						{
							newtop = top-60;
						}
					}
					$(ulToMove).animate({top: newtop}, "normal", "linear");
				}
				else
				//main ul movement
				{
					//scroll specific to menu
					$(".page ul").each(
						function(i)
						{
							if($(this).attr("class") == id)
							{
								height = this.offsetHeight;
								element = this;
							}
						}
					)
					var top = parseInt($(element).css("top"));
				
					var pId = $(element).parent().attr("id");
					var newtop = top;
					var subNewTop;
					var moving = false;
					//main ul movement
					if($(this).attr("class") == "up")
					{
						if(top >= 0)
						{/*then don't move*/}
						else if(top >= -59 && top <= -1)
						{
							moving = true;
							newtop = 0;
							subNewTop = -1 * top;
						}
						else
						{
							moving = true;
							newtop = top+60;
							subNewTop = -60;
						}
					}
					else
					{
						var diff = 416 - height;
						if(top < diff)
						{/*do nothing*/}
						else
						{
							newtop = top-60;
							subNewTop = +60;
							moving = true;
						}
					}
										
					var currli = $("."+id).children(".selected");
					if(currli.length > 0)//there is a first menu item that has the selected class
					{
						var liClass = $(currli[0]).attr("class").replace(" ", "").replace("break", "").replace("selected", "").replace(" ", "");
						if(liClass == "submenu" && moving == true)//if the item has a submenu
						{
							//then move the submenu
							//the third one will move indirectly becuase it relies upon the positioning of the third menu
							//moves the main ul element
							$(element).animate({top: newtop, left: 0}, "normal", "linear");
							var currSubTop = parseInt($(currli).children("ul").css("top"));
							var opp = currSubTop + subNewTop;
							$(currli).children("ul").animate({top: opp}, "normal", "linear");
							//set all nested ul's in the menu with the top of opp
							resetMenuNestedUlTop(id, opp, "second");
						}
						else if(moving == true)
						{
							$(element).animate({top: newtop, left: 0}, "normal", "linear");	
							resetMenuNestedUlTop(id, newtop*-1, "second");
						}
					}
					else
					{
						$(element).animate({top: newtop, left: 0}, "normal", "linear");	
						resetMenuNestedUlTop(id, newtop*-1, "second");
					}
				}	
			}
			//all other elements
			else
			{
			
				$(".page div").each(
					function(i)
					{
						if($(this).attr("class") == id)
						{
							if(id == "listing-panel")
							{
								list = $(this).children("ul");
								element = list[0];
								height = element.offsetHeight;
							}
							else
							{
								element = this;
								height = this.offsetHeight;
							}
						}
					}
				) 
				
				//get the current top position
				var top = parseInt($(element).css("top"));
				if($(this).attr("class") == "up")
				{
					if(top >= 0)
					{/*do nothing*/}
					else if(top >= -59 && top <= -1)
					{
						newtop = 0;
						if(top <= -1 && top >= -10)
						{
							$(element).css("top", newtop+"px");
						}
						$(element).animate({top: newtop, left: 0}, "normal", "linear");
					}
					else
					{
						//the new top position
						var newtop = top+60;
						//animate the move
						$(element).animate({top: newtop, left: 0}, "normal", "linear");
						
					}
				}
				else
				{
					//get the difference in height between the scope wrapping element and the element to be moved.
					var diff = 416 - height;
					if(top < diff)
					{/*do nothing*/}
					else
					{
						//the new top position
						var newtop = top-60;
						//animate the move
						$(element).animate({top: newtop, left: 0}, "normal", "linear");
						
					}
				}			
			}
			return false;
		}
	) 
};