﻿
//<!--
    	$(document).ready(function () {
    		// Setup list items with style
    		$("#DefaultContentRight li").addClass("DefaultContentRightListItem");
    		$("#DefaultContentRight li").click(function () { SwapBoxes($(this).attr("title")); });

    		// Toggle list item's style on hover
    		$("#DefaultContentRight li[class!='DefaultContentRightListItem_Active']").hover(function () { $(this).addClass("DefaultContentRightListItem_Hover"); }, function () { $(this).removeClass("DefaultContentRightListItem_Hover"); });

    		function GetDivs() {
    			var Divs = $(".SlideBox").map(function () { return $(this).attr('id'); }).get().join(",");
    			var reg = new RegExp("[,]");
    			return Divs.split(reg);
    		}



    		function SwapBoxes(divSwap) {

    			var SlideBoxWidth = 509;
    			var Left = 0;
    			var divCurrent = $(".VisibleSlideBox").attr("id");
    			var indexCurrent = "-1";
    			var divSelected = "#" + divSwap;
    			var indexSelected = "-1";

    			$("#DefaultContentRight > li").removeClass("DefaultContentRightListItem_Active");
    			$("#DefaultContentRight > li[title='" + divSwap + "']").addClass("DefaultContentRightListItem_Active");

    			var arr = GetDivs();

    			for (var i = 0; i < arr.length; i++) {
    				if (arr[i] == divCurrent)
    					indexCurrent = i;

    				if (arr[i] == divSwap)
    					indexSelected = i;
    			}

    			var posLeft;
    			var pos = $("#Slider").position();
    			posLeft = pos.left;

    			// If remainder is != 0, then the user clicked before the div "Slider" was in postion
    			// In this case, we reset the items to make sure the always Slider div always falls within some increment of the "SlideBox" width
    			var remainder = (posLeft % SlideBoxWidth);
    			if (remainder != 0) {
    				posLeft = (SlideBoxWidth);
    				indexSelected = indexCurrent;
    			}

    			if (indexCurrent == indexSelected && (indexCurrent != "-1" && indexCurrent != "-1")) {
    				return;
    			}
    			else {

    				if (indexCurrent != "-1" && indexCurrent != "-1") {
    					if (indexSelected > indexCurrent) {
    						if ((indexSelected - indexCurrent) > 1)
    							Left = posLeft - (SlideBoxWidth * indexSelected);
    						else
    							Left = posLeft - (SlideBoxWidth);

    					}
    					else if (indexSelected < indexCurrent) {
    						if ((indexCurrent - indexSelected) > 1)
    							Left = posLeft + (SlideBoxWidth * indexCurrent);
    						else
    							Left = posLeft + (SlideBoxWidth);
    					}
    				}
    			}
    			$("#" + divCurrent).removeClass("VisibleSlideBox");
    			$("#Slider").animate({ top: "0px", left: Left + "px" }, 200);
    			$(divSelected).addClass("VisibleSlideBox");

    		}

    		SwapBoxes("WhatWeDo");

    	});

//-->
