swfobject.embedSWF("media/cma_type_intro_r2.swf", "homeflash", "1024", "448", "9.0.0", "media/expressInstall.swf"); //load in all the swf icons... swfobject.embedSWF("media/beverage_icon.swf", "designnav-beverage-icon", "84", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); swfobject.embedSWF("media/food_icon.swf", "designnav-food-icon", "84", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); swfobject.embedSWF("media/beauty_icon.swf", "designnav-health-icon", "84", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); //swfobject.embedSWF("media/fashion_icon.swf", "designnav-fashion-icon", "84", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); swfobject.embedSWF("media/pets_icon.swf", "designnav-pets-icon", "84", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); swfobject.embedSWF("media/electronics_icon2.swf", "designnav-electronics-icon", "102", "96", "9.0.0", "media/expressInstall.swf", {}, {bgcolor:"000000"}); //some global variables var lastpane = ""; var href = ""; var inprogress = false; /*var inprogress2 = false;*/ var lastpane2 = ""; var lastpane3 = ""; $(document).ready(function(){ //easing plugin global definition... jQuery.easing.def = "easeOutCirc"; //we need to set up the navigation items wide enough to accomodate the dot images above the text... //we'll need these values for when a nav item gets expanded to accomodate that dot image //so that subnavs will line up properly //specifically -we'll need the difference of the width before, then after then divided by two (because text is centered) //to get JUST the additional padding on the LEFT that was added to accomodate that dot image nav3widthBefore = $('#nav3').width(); nav4widthBefore = $('#nav4').width(); if ($('#nav3 a').width() < "48") $('#nav3 a').css("width","48px"); if ($('#nav4 a').width() < "67") $('#nav4 a').css("width","67px"); if ($('#nav5 a').width() < "86") $('#nav5 a').css("width","86px"); //see note above about why we need to know all this nav3widthAfter = $('#nav3').width(); nav4widthAfter = $('#nav4').width(); nav3widthDifference = nav3widthAfter - nav3widthBefore; nav4widthDifference = nav4widthAfter - nav4widthBefore; //now lets fix the subnav widths...? //base width on width of actual text.. var worknavwidth = $('#worknav ul').width(); $('#worknav').css('width',worknavwidth ); var companynavwidth = $('#companynav ul').width(); $('#companynav').css('width',companynavwidth ); var processnavwidth = $('#processnav ul').width(); $('#processnav').css('width',processnavwidth ); var clientsnavwidth = $('#clientsnav ul').width(); $('#clientsnav').css('width',clientsnavwidth ); //make process - structure = sub sub nav the right height... (for when we see it later) //+5 padding because UL in sub navs have 5px padding on top... processnavstructuretop = $('#processnav-structure').position().top + 5; $('#processnav-structure-sub').css('top',processnavstructuretop); //if we click on main navigation... we need to pull in the right subnav... $('#navigation a').click(function(){ //do not do anything if we're in the process of scrolling or if we're already on the main nav currently... if (!inprogress && $(this).attr('href') != lastpane) { //set inprogress to true so we don't overlap scrolling stuff inprogress = true; //fade out homedefault - once gone - it wont come back.. $('#homedefault').fadeOut('slow'); //if we're on a nav that has a subnav - we need to fade it out as well as any sub sub nav blocks... if (lastpane == "#worknav" || lastpane == "#companynav" || lastpane == "#processnav" || lastpane == "#clientsnav") { //move this current sub nav behind everything.. $(lastpane).css("z-index","1"); //fade it out... $(lastpane).fadeOut('slow',function(){ //when it's done fading out - move it out of view and then fade back in so we can pull it back into view later... $(lastpane).css("left","-80px"); $(lastpane).fadeIn('fast'); }); /* HIDE ALL SUBNAVS */ $('#designnav').fadeOut("slow", function() { $('#designnav').css("left","-620px"); $('#designnav').fadeIn(); }); lastpane2 = ""; $('#processnav-design-sub').fadeOut("slow", function() { $('#processnav-design-sub').css("left","-620px"); $('#processnav-design-sub').fadeIn(); }); lastpane3 = ""; $('#processnav-structure-sub').fadeOut("slow", function() { $('#processnav-structure-sub').css("left","-620px"); $('#processnav-structure-sub').fadeIn(); }); lastpane3 = ""; } //store reference to currently clicked sub nav (main nav links have sub nav panels IDs in it's href tag) var href = $(this).attr('href'); //if the mainnav we've clicked is one of those that has a subnav box we need to show the subnav box... if (href == "#worknav" || href == "#companynav" || href == "#processnav" || href == "#clientsnav" && href != lastpane) { //make sure the subnav box is currently out of view - should already be - but just in case... $(href).css("left","-80px"); //move it in front of other boxes that might be in the process of fading out $(href).css("z-index","2"); //make sure this box is viewable and isn't still in "faded out" mode... $(href).fadeIn('fast'); //store this variable here so we can use it later var posLeft; //place subnavs in correct position if (href == "#worknav") { //clear logo box... posLeft = $('#logo').width() + 40; } else if (href == "#companynav") { //company nav should be aligned with the second nav about... //so first we need to know how wide the first nav is = allow for right padding - (both on main nav UL and nav1) //then scooch back over 20pixels because our sub navs have 20 pixels of padding on either side - this way text will align vertically... posLeft = $('#nav1').width() + 60 + 121 - 20; /* 121 ul padding left, 60 padding from nav 1, -20 padding in nav to line up text above */ } else if (href == "#processnav") { //rinse repeat- add in nav2 and associated padding width... posLeft = 121 + $('#nav1').width() + 60 + $('#nav2').width() + 60 - 20; } else if (href == "#clientsnav") { //rinse repeat- add in nav3 and associated padding width...(nav was expanded to accomodate dot image- so get that left side padding and add it too posLeft = 121 + $('#nav1').width() + 60 + $('#nav2').width() + 60 + $('#nav3').width() + 60 - 20 + (nav4widthDifference/2); } //ok now we know WHERE we need to move the subnav to (value of posLeft) - lets scroll... $(href).animate({"left": posLeft}, 900, function() { //when scrolling is done - update global variable lastpane with reference to currently being viewed subnav lastpane = href; //set in progress to false so we can do more scrolling... inprogress = false; }); } else { //if the currently clicked mainnav item isn't one of those items that has a subnav box = just set lastpane to the clicked ID (which doesn't actually exist) lastpane = href; //set in progress to false so we can scroll on next click... inprogress = false; } } }); /******* WORKNAV SUB SUB NAV SCROLL ****/ $('#worknav a').click(function(){ //this has been changed so that now only the li with id of "designnav" will have subnav... //but lets get the ID of the parent element of the link (which will be the LI) var parentid = $(this).parent().attr('id'); //if LI has and id of design - and we're not currently VIEWING the designnav //which would have been stored in lastpane2 variable... //then scroll out the designnav sub sub nav block... if (parentid == "design" && lastpane2 != "designnav" && !inprogress) { inprogress = true; //lets construct the left position of where / how far we need to scroll this box out to... //we take width of logo block and width of worknav block = add in padding... posLeft = $('#logo').width() + 40 + $('#worknav').width() + 40; //then lets scroll it out... $('#designnav').animate({"left": posLeft}, 900,function() {inprogress=false;}); //update global variable lastpane2 so we know that designnav is currently visible lastpane2 = "designnav"; } else if (parentid != "design" && lastpane2 == "designnav" && !inprogress) { inprogress = true; //if the parentid is NOT design = lets make sure designnav is faded out and out of view... $('#designnav').fadeOut("slow", function() { //fade out designnav $('#designnav').css("left","-720px"); //and then make sure it's moved over and out of view $('#designnav').fadeIn(); inprogress = false; }); //clear out lastpane2 global variable since no subnav is now viewable... lastpane2 = ""; } }); /******* PROCESSNAV SUB SUB NAV SCROLL ****/ $('#processnav a').click(function(){ //ok, we've clicked on one of the process's subnav links... //first lets get the id of the parent element (which will be the LI element) var parentid = $(this).parent().attr('id'); //now lets construct the text of the ID of the subnav (both links on process have subnavs so we don't need to check IF it has a subnav.) //subnav ids will be in the format of the parentid (processnav-design or processnav-structure) with -sub at the end... var subnavid = parentid+"-sub"; //if the sub sub nav we're currently viewing is not the same as the one we clicked... if (lastpane3 != subnavid && !inprogress) { //lets' make sure we're not currently scrolling one of the other subnavs... inprogress = true; //if lastpane is not set to nothing (meaning no sub sub navs are in view) - then fade it out if (lastpane3 != '') { $('#'+lastpane3).fadeOut("slow", function() { //after it's faded out - move it back out of view and then fade back in so it's ready to be shown later $(this).css("left","-720px"); $(this).fadeIn(); }); } //now we need to calcuate the exact location to scroll this sub sub nav over... //get the position of the process subnav and then add the padding (20 and 10???) posLeft = $('#processnav').position().left + $('#processnav').width() + 42 + 10; //show our "mask" so we don't see the nav scrolling on the left side of the process sub nav $('#processnav-backmask').show(); //make the mask long enough to cover all the way out to the process nav sub nav box... navwidth = $('#processnav').position().left $('#processnav-backmask').css('width',navwidth); //now lets scroll out our sub sub nav box... $('#'+subnavid).animate({"left": posLeft}, 900,function(){ //when that's complete - hide our backmask $('#processnav-backmask').hide(); //reset inprogress so we can scroll next time inprogress = false; }); //set globalvariable lastpane3 to the sub sub nav currently being viewed lastpane3 = subnavid; } }); //this will hide/show the flash icons on mouseover for the designnav sub sub nav items... $('#designnav ul li a').hover(function() { var hoverelementtmp = $(this).parents()[0]; var hoverelement = $(hoverelementtmp).children("div.iconwrapper"); $(hoverelement).css('display','inline'); }, function() { var hoverelementtmp = $(this).parents()[0]; var hoverelement = $(hoverelementtmp).children("div.iconwrapper"); $(hoverelement).css('display','none'); }); }); /*sfHover = function() { var sfEls = document.getElementById("bottom").getElementsByTagName("li"); for (var i=0; i