// JavaScript Document
// $.cookie('name','value',(expires: 2000)); //expires in days

		var slidePanel = {
			extremeLeft: 75,
			extremeRight: null,
			fadeLevel: 0.25,
			panelWidth: null,
			itemCount: null,
			itemsInView: 6,
			projectPageItemsInView: 8,
			currentPanel: 0, // NOTE we're starting at 0
			panelCount: null,
			slideLeft: null,
			slideRight: null,
			slidePanelLength: null,
			transitionSpeed: "slow",
			holderIdentifier: ".content-home-nav",
			panelIdentifier: ".content-home-nav>dl",
			itemIdentifier: ".content-home-nav>dl>dt", 
			controlsHTML: {
				en: '<div id="projectNavOuterBox"><a id="nav-btn-prev" href="#"><span>Prev</span></a> <a id="nav-btn-next" href="#"><span>Next</span></a></div>',
				fr: '<div id="projectNavOuterBox"><a id="nav-btn-prev" href="#"><span>Prev</span></a> <a id="nav-btn-next" href="#"><span>Next</span></a></div>'
			},
			regExtractDirectory: new RegExp("(\/[^/]+\/)[^/]*$", "g"),
			currentProjectIndex: null,
			init: function (cfg) {
//				this.panelWidth = parseInt($(this.panelIdentifer).css("width"));

				// calculate panelWidth by multiplying the number of items by the base width and margin
				// using right margin at the moment - it could be improved by checking left margin and collapsing the smaller
				
				if (cfg == undefined) cfg = {};
				
				var panelDTs = $(this.itemIdentifier);
				this.itemCount = panelDTs.length;
				if (this.itemCount > 0) {
					this.panelCount = (this.itemCount > this.itemsInView ? Math.floor(this.itemCount / this.itemsInView) : 0) + ( slidePanel.itemCount % slidePanel.itemsInView == 0  ?  0 : 1);
				
			
					this.panelWidth = this.itemCount * (
							parseInt($(panelDTs[0]).css("width")) + parseInt($(panelDTs[0]).css("margin-right"))
						) + this.extremeLeft;
					
					this.slidePanelLength = this.itemsInView * (
							parseInt($(panelDTs[0]).css("width")) + parseInt($(panelDTs[0]).css("margin-right"))
						);
					
					this.slideRight = "+=" + this.slidePanelLength + "px";
					this.slideLeft = "-=" + this.slidePanelLength + "px";
					
					$(this.panelIdentifier).css("width", this.panelWidth);
//					this.extremeRight = this.extremeLeft - this.panelWidth + parseInt($(this.holderIdentifier).css("width"));
					this.extremeRight =  0 - this.panelWidth + ( parseInt($(this.holderIdentifier).css("width")) - this.extremeLeft) ;
					
					var myVisibleItems;
					myVisibleItems = this.visibleItems(this.currentPanel);

					// if the number of items is greater than those view-able - then show the navigation
					$(this.itemIdentifier + ":gt(" + myVisibleItems.maxValue + ")").fadeTo(0, this.fadeLevel);

					if (this.itemCount > this.itemsInView) {
						$(".content-home-nav").after(this.controlsHTML[bdpg6.lang]);
					}


//					$(".content-home-nav").after(			'<p><span id="nav-btn-prev">Prev</span> <span id="nav-btn-next">Next</span></p>'		);


					
					$("#nav-btn-prev").click( function () {
		//				if (parseInt($(slidePanel.panelIdentifier).css("left")) < slidePanel.extremeLeft) {
						if (slidePanel.currentPanel > 0) {
							slidePanel.animate({down: true});
							slidePanel.currentPanel--;
						} else {
							log($(slidePanel.panelIdentifier).css("left"));
							log(slidePanel.extremeLeft);
						}
						return false;
					});
					$("#nav-btn-next").click( function () {
				//				if (parseInt($(slidePanel.panelIdentifier).css("left")) > slidePanel.extremeRight) {
						if (slidePanel.currentPanel < slidePanel.panelCount-1) { 
							slidePanel.animate({up: true});
							slidePanel.currentPanel++;
						} else {
							log($(slidePanel.panelIdentifier).css("left"));
							log(slidePanel.extremeRight);
						}
						return false;
					});
					
					
					
				} else {
					this.panelWidth = 0;
				}

				if (cfg.portfolioPage) {
					log("portfolio Page");	
					// find the current page in the project navigation by looking for the project directory name (e.g. portfolio/XYZ/default.asp) in the page URL
					var currentPage = window.location.href;
					if (matches = this.regExtractDirectory.exec(currentPage)) {
						// identify which item in the navigation matches this, save the position in currentProjectIndex, and add classes to the relevant
						containerDT = $(this.itemIdentifier).find("a[href*=" + matches[1] + "]").parent();
						currentProjectIndex = $(this.itemIdentifier).index(containerDT);
						$(containerDT).addClass("currentProject").next().addClass("currentProject");
						// assuming we're using DT followed by DD then add a class
						
						// calculate the panel position and goto it
						var panel = Math.floor(currentProjectIndex / this.projectPageItemsInView);
						this.animate({panel: panel});
					}
					
				} else {
				}


//				this.extremeRight = this.panelWidth - 
				
			},
			filterMinValue: -999,
			animate: function (cfg) {
				var myVisibleItems;
				
				filterWithinParams = function (index) {
					return ((index >= myVisibleItems.minValue) && (index <= myVisibleItems.maxValue));
				};
				
				if (cfg.up) {
					myVisibleItems = this.visibleItems(this.currentPanel+1);
					$(this.itemIdentifier + ":lt(" + myVisibleItems.minValue + ")").fadeTo(0, this.fadeLevel);
					$(this.itemIdentifier).filter(filterWithinParams).fadeTo(0, 100);
					
					$(this.panelIdentifier).animate({left: this.slideLeft, speed: this.transitionSpeed});
					
				} else if (cfg.down) {
					myVisibleItems = this.visibleItems(this.currentPanel-1);
					
					$(this.itemIdentifier + ":gt(" + myVisibleItems.maxValue + ")").fadeTo(0, this.fadeLevel);
					$(this.itemIdentifier).filter(filterWithinParams).fadeTo(0, 100);
					
					$(this.panelIdentifier).animate({left: this.slideRight, speed: this.transitionSpeed});
				
				} else if (typeof cfg.panel == "number") {
					var gotoPanel = Math.floor(cfg.panel);
					if (gotoPanel >= 0 && gotoPanel < this.panelCount && gotoPanel != this.currentPanel ) {
log("animatni to " + cfg.panel);
						var panelPosition = this.extremeLeft-gotoPanel * this.slidePanelLength;
log("panelPosition to " + panelPosition);
						$(this.panelIdentifier).animate({left: panelPosition, speed: this.transitionSpeed});	
						this.currentPanel = gotoPanel;
					}
					myVisibleItems = this.visibleItems(this.currentPanel);
					log(myVisibleItems);
					$(this.itemIdentifier + ":lt(" + myVisibleItems.minValue + ")").fadeTo(0, this.fadeLevel);
					$(this.itemIdentifier + ":gt(" + myVisibleItems.maxValue + ")").fadeTo(0, this.fadeLevel);
					$(this.itemIdentifier).filter(filterWithinParams).fadeTo(0, 100);
					
					
				}
			},
			visibleItems: function (inPanel) {
				// return object with min and max value of items currently displayed 
				
				var myPanel = (typeof inPanel=="number" ? parseInt(inPanel) : this.currentPanel);
				var currentRangeMin = myPanel * this.itemsInView;
				var currentRangeMax = currentRangeMin + this.itemsInView - 1;
				return({minValue: currentRangeMin, maxValue: currentRangeMax});
				
			}
			
		};
		
		
		var whatwedoPanel = {
			extremeLeft: 65,
			extremeRight: null,
			fadeLevel: 1,
			panelWidth: null,
			holderWidth: null,
			itemCount: null,
			itemsInView: 1,
			currentPanel: 0, // NOTE we're starting at 0
			panelCount: null,
			slideLeft: null,
			slideRight: null,
			transitionSpeed: "slow",
			holderIdentifier: "div#panelwidget",
			panelIdentifier: "div.SlidingPanelsContentGroup",
			itemIdentifier: "div.SlidingPanelsContent", 
			panelButtonsIdentifier: "ul.panelNavArray>li",
			init: function () {
//				this.panelWidth = parseInt($(this.panelIdentifer).css("width"));

				// calculate panelWidth by multiplying the number of items by the base width and margin
				// using right margin at the moment - it could be improved by checking left margin and collapsing the smaller
				
				var panelDTs = $(this.itemIdentifier);
				this.itemCount = panelDTs.length;
				if (this.itemCount > 0) {
					this.panelCount = (this.itemCount > this.itemsInView ? Math.floor(this.itemCount / this.itemsInView) : 0) + ( whatwedoPanel.itemCount % whatwedoPanel.itemsInView == 0  ?  0 : 1);
				
					this.holderWidth = parseInt($(this.holderIdentifier).css("width"));
			
					this.panelWidth = this.itemCount * (
							parseInt($(panelDTs[0]).css("width")) + parseInt($(panelDTs[0]).css("margin-right"))
						) + this.extremeLeft;
					
					var whatwedoPanelLength = this.itemsInView * (
							parseInt($(panelDTs[0]).css("width")) + parseInt($(panelDTs[0]).css("margin-right"))
						);
					
					this.slideRight = "+=" + whatwedoPanelLength + "px";
					this.slideLeft = "-=" + whatwedoPanelLength + "px";
					
					$(this.panelIdentifier).css("width", this.panelWidth);
//					this.extremeRight = this.extremeLeft - this.panelWidth + parseInt($(this.holderIdentifier).css("width"));
					this.extremeRight =  0 - this.panelWidth + ( this.holderWidth - this.extremeLeft) ;
					
					var myVisibleItems;
					myVisibleItems = this.visibleItems(this.currentPanel);
					
// CHANGE FROM slidePanel					$(this.itemIdentifier + ":gt(" + myVisibleItems.maxValue + ")").fadeTo(0, this.fadeLevel);

					
					
				} else {
					this.panelWidth = 0;
				}



//				this.extremeRight = this.panelWidth - 
				
			},
			filterMinValue: -999,
			currentPanel: null,
			animate: function (cfg) {
				var myVisibleItems;

				// highlight the newly selected item
				$(this.panelButtonsIdentifier + ".selected").removeClass("selected");
				$(cfg.parent).addClass("selected");
				
				
				filterWithinParams = function (index) {
					return ((index >= myVisibleItems.minValue) && (index <= myVisibleItems.maxValue));
				};
				
				if (cfg.up) {
					if (this.currentPanel < whatwedoPanel.panelCount-1) { 

						
						myVisibleItems = this.visibleItems(this.currentPanel+1);
						$(this.itemIdentifier + ":lt(" + myVisibleItems.minValue + ")").fadeTo(0, this.fadeLevel);
						$(this.itemIdentifier).filter(filterWithinParams).fadeTo(0, 100);
						
						$(this.panelIdentifier).animate({left: this.slideLeft, speed: this.transitionSpeed});


						this.currentPanel++;
					} else {
						log($(this.panelIdentifier).css("left"));
						log(this.extremeRight);
					}

					
				} else if (cfg.down) {

					
					if (this.currentPanel > 0) {
						
						myVisibleItems = this.visibleItems(this.currentPanel-1);
						
						$(this.itemIdentifier + ":gt(" + myVisibleItems.maxValue + ")").fadeTo(0, this.fadeLevel);
						$(this.itemIdentifier).filter(filterWithinParams).fadeTo(0, 100);
						
						$(this.panelIdentifier).animate({left: this.slideRight, speed: this.transitionSpeed});						
						
						
						this.currentPanel--;
					} else {
						log($(this.panelIdentifier).css("left"));
						log(this.extremeLeft);
					}
					
				
				} else if (typeof cfg.panel == "number") {
					var gotoPanel = Math.floor(cfg.panel);
					if (gotoPanel >= 0 && gotoPanel < this.panelCount && gotoPanel != this.currentPanel ) {
						var panelPosition = -gotoPanel * this.holderWidth;
						$(this.panelIdentifier).animate({left: panelPosition, speed: this.transitionSpeed});	
						this.currentPanel = gotoPanel;
					}
					
				}
			},
			visibleItems: function (inPanel) {
				// return object with min and max value of items currently displayed 
				
				var myPanel = (typeof inPanel=="number" ? parseInt(inPanel) : this.currentPanel);
				var currentRangeMin = myPanel * this.itemsInView;
				var currentRangeMax = currentRangeMin + this.itemsInView - 1;
				return({minValue: currentRangeMin, maxValue: currentRangeMax});
				
			}
			
		};
		
		
	
		// JS objects inc. widget code and flash text replacement to appear here
var apply = function(o, e){
    for(var p in e) o[p] = e[p];
    return o;
};

// allow browser console (Firefox and Safari) logging without breaking IE
var debug = true;
var log = ((debug && typeof console == "object") ? function (logStr) { console.log(logStr) } : function () {} );
	
		$(document).ready( function () {
		
			if ($("body.portfolioHome").length == 1) {
				slidePanel.init();
			} else if ($("body.portfolio").length == 1) {
				slidePanel.itemsInView = slidePanel.projectPageItemsInView;
				slidePanel.init({portfolioPage: true});
			} else if ($("body.whatwedo").length == 1) {

				whatwedoPanel.init();
				var panelIndex = 0;
				$(".panelNavArray>li>a").each( function () {
					this.panelIndex = panelIndex;
					$(whatwedoPanel.panelButtonsIdentifier+":first").addClass("selected");
					whatwedoPanel.currentPanel = $(whatwedoPanel.panelButtonsIdentifier+":first");
					$(this).click( function () {

						whatwedoPanel.animate({panel: this.panelIndex, parent: $(this).parent()});
						return(false);
					});
					panelIndex++;
				});
				
				$("body").addClass("whatwedoActive").removeClass("whatwedo");
			}

			
			
		});