/* dev */ /* * This starts our NI name space to keep everyhing organized */ var RIGHT_COLUMN_HEIGHT = 0; var NI = function(){}; //initiate a function when the document has finished loading and is ready function initprototype($navShowNum, $isCulDeSac, $culDeSac_type){ //This sets up the CSS for cul-de-sac pages depending on which type you are viewing. NI.features.addCss($culDeSac_type); // This is the where the rollover effect happens on the header section NI.features.header(); /* * Search box needs to be cleared when user focuses on the input box and if nothing is added and focus is taken away * the input text box should be populated with the word search again. * We can make this text localized by passing in the correct locaized version of the word search. */ NI.features.search_box(); //SEO changes made the below code required. //This code checks the height of the left column. If the left column is taller than the right column then we set container-div's height to the height of the left column //The left column is positioned absolute and the right column is relative so the right column will be setting the contents width if the right column is taller than the left //This is needed to fix the placement of the footer and all derives from the need for the right column's code to come before the left columns code in the source. SEO $('#left-column-daq').height() > $('#right-column-daq') ? $('#content-daq').height($('#left-column-daq').height()+20) : null; if(!$isCulDeSac){ //Auto Height on elements to make same image line across NI.setSize.autoHeight($('.product-info-daq')); NI.setSize.autoHeight($('.maintain-table-height-daq')); //These are features for the left nav NI.features.left_nav_features(); //These are featrues for the functionality for the image gallery NI.features.image_gallery(); //This includes all the extra features like formating the page dynamicaly //Need this one first because the footer is taking to long to load NI.features.extras_for_non_cul_de_sac_pages(); NI.features.manage_minihighlights(); } else { // Clean up for prototype for cul-de-sac pages NI.features.extras_for_cul_de_sac_pages(); } } /* ##################################### * function addStyleSheet : * We use addStyleSheet to append the correct stylesheet to the head section depending on the url, and if it is a cul-de-sac page or not * * param - css : The css object that we append all of our styles to * param - media : The type of media we are assigning our css styles to. Ex: (screen, projector, print ...) */ NI.setStyles = { addStyleSheet : function(css, media){ var _style/*:object*/ = document.createElement( 'style' ); var _head/*:object*/ = document.getElementsByTagName('head')[0]; _style.type = 'text/css'; _style.media = media; _style.rel = "stylesheet"; _head.appendChild( _style ); if( _style.styleSheet ) { // IE _style.styleSheet.cssText = css; } else { // other browsers _style.appendChild( document.createTextNode(css) ); return _style; } } } /* ##################################### * function autoHeight : * We search for the bucket that has the largest height. Assign that height to a variable. Add that hieght to each bucket contained in the selected group. * This aligns all the buckets across the rows and columns. * * param - $divElement : This can be a class or an id. Just pass in the main parent div element id or class to autoheight that group */ NI.setSize = { autoHeight : function ($divElement){ //creating a variable just to start off the height. var $biggestHeight = 1; //creating an empty array. This array will contain all of our heights we are looking at var $heights = new Array(); //loop through each element and assign its height to the empty array $divElement.each(function(){ //append the height to the end of the array $heights.push($(this).height()); }); // end jquery for loop //loop through each element in the heights array and check if the height in question is larger than the biggest variable number for(var i = 0; i < $heights.length; i++){ //if the height in question is larger than he biggest height assign the biggest height the new height in question if($heights[i] > $biggestHeight){ // assginging a new number to biggest because the height in question is larger than what is currently placed $biggestHeight = $heights[i]; } // end if statement }// end for loop //Loop through each element in question and assign a css value to each element of height and put the biggest value in the height section in css. This will cause all other areas in question to have the same height $divElement.each(function(){ // Assigning the height css to each element in question $(this).css({height:$biggestHeight}); }); // end jquery for loop } } NI.features = { set_right_height : function(height) { RIGHT_COLUMN_HEIGHT = height; }, /** * Manage the minihighlights and make them all the same height. * We auto height: * title * a tag that contains the img tag as a child * the paragraph tag * which puts the link at the bottom */ manage_minihighlights : function(){ NI.setSize.autoHeight($(".headerLink-wrap-cp")); NI.setSize.autoHeight($('.border-wrapper p')); NI.setSize.autoHeight($('.border-wrapper')); }, /* ##################################### * function header : * Hover functionality for the Header * * param - none */ header : function(){ $("div#nav ul li").hover( function() { $(this).addClass("hover"); }, function(){ $(this).removeAttr("class"); } ) }, /* ##################################### * function search_box : * The word "Search" is located in the text input. When selected to type in a search the "Search" text is removed. * If the box is left empty or replaced with the word "Search" the box is reset. * * param - none */ search_box : function(){ $('input[@class=blur]').focus(function(){ var _that = $(this); _that.attr("value") == "Search" ? _that.attr("value", '') : null; }).blur(function(){ var _that = $(this); !_that.attr("value") ? _that.attr("value", "Search") : null; }); }, /* ##################################### * function addCss : * Perform a switch statement to find out what type of cul-de-sac page is viewed. * Add the correct stylesheet to the page that corisponds with that cul-de-sac page * * param - $culDeSac_type : Provided from the PA in the main init function */ addCss : function($culDeSac_type){ //This sets up the CSS for cul-de-sac pages depending on which type you are viewing. switch ($culDeSac_type){ case "casestudy": var cssStyle = '/**** Cul-De-Sac Casestudy CSS ****/' cssStyle += '@import "/css/global/neutral/cul-de-sac_caseStudy.css";'; NI.setStyles.addStyleSheet(cssStyle,"screen"); break; case "tutorial": var cssStyle = '/**** Cul-De-Sac Tutorial CSS ****/' cssStyle += '@import "/css/global/neutral/cul-de-sac_caseTutorial.css";'; NI.setStyles.addStyleSheet(cssStyle,"screen"); break; case "webcasts": var cssStyle = '/**** Cul-De-Sac Webcasts CSS ****/' cssStyle += '@import "/css/global/neutral/cul-de-sac_webcasts.css";'; cssStyle += '@import "/css/global/neutral/cul-de-sac_caseStudy.css";'; NI.setStyles.addStyleSheet(cssStyle,"screen"); break; case undefined: break; default: var cssStyle = '/**** CASE STUDY CSS - DEFAULT WAS CHOSEN in SWITCH ****/' cssStyle += '@import "/css/global/neutral/cul-de-sac.css";'; NI.setStyles.addStyleSheet(cssStyle,"screen"); break; }; }, /* ##################################### * function left_nav_features : * JQuery - * functions to perform the dropdown of twisty elements to display its ul li list elements. * appends css class of ulShowHide for css functionality * * param - none */ left_nav_features : function(){ var _left_height = $('#left-column-daq').height(); var _right_height = $('#right-column-daq').height(); //If left column is longer then the right column make the container div the height of the left columns height _left_height > _right_height ? $('#content-daq').height(_left_height) : null; /*This expands and collapses the left column*/ $('.doExpand-daq').next().hide().prev().prepend("
").wrap("
").find("span[@class=cursor-daq], .nav-container-2 span").click(function(){ var _that = $(this); var _height = ''; var _left_column_height = ''; if(_that.parents("#wrapped").next().is(":hidden")){ _height = _that.parents('#wrapped').next().height(); _that.parents('#wrapped').next().slideDown(500); _left_column_height = $('#left-column-daq').height() + _height; NI.features.manage_container_div(1, _left_column_height); } else { _left_column_height = $('#left-column-daq').height(); _that.parents('#wrapped').next().hide(500); NI.features.manage_container_div(0, _left_column_height); } $(this).parents('#wrapped').find('span[@class=cursor-daq]').children().toggle(); }); //Add a class to all nav-block1-daq and nav-block2-daq classed divs $('div.nav-block1-daq ul, div.nav-block2-daq ul').addClass("ulShowHide"); //If we want to set one or more elements to be shown as open we set the section up otherwise it will be closed on load $('div.nav-block2-daq').find('.selected').each(function(){ var _that = $(this); _that.find('.cursor-daq img:first').hide(); _that.find('.cursor-daq img:last').show(); _that.parent().next('ul.ulShowHide').show(); }); }, /* ##################################### * function image_gallery : * JQuery - * functions to perform the thumbnail image click to display the larger image. * This should be removed with Scene 7 takes over * * param - none */ image_gallery : function(){ //Hiding all large images except the first one $(".prod-hightlight-imgePannel-mainJPG-daq:gt(0)").hide(); //Assigning each selectable thumbnail image an indexValue -- We will use this to find out which large image to display depending on which one was clicked $('.prod-hightlight-imagePannel-selectablesJPG-daq').each(function(i){ $(this).attr({indexValue:i}); }); //Each thumbnail that is clicked will initiate the Large image to change and display the correct image. $('.prod-hightlight-imagePannel-selectablesJPG-daq').click(function(){ $indexValue = $(this).attr("indexValue"); $(".prod-hightlight-imgePannel-mainJPG-daq:eq("+$indexValue+")").show(); $(".prod-hightlight-imgePannel-mainJPG-daq:gt("+$indexValue+")").hide(); }); }, /* ##################################### * function extras_for_non_cul_de_sac_pages : * JQuery - * functions to perform cleanup here and there. Most of them have been implemented into the HTML. * Others are needed for their dynamic features that are not possible with HTML alone * * param - none */ extras_for_non_cul_de_sac_pages : function(){ //setContentHeight(0); //wrap tags into div so they will not get stuck under images $("a[@class=headerLink-daq]").wrap("
"); //Remove the style tag from this. Helps with Formating $("#prod-hightlight-daq").find("p").not(":first").css({marginBottom:"0px"}); $("a").children("span").parent().css({textDecoration:"none"}); //Every Odd prod-container-daq we need to take away the margin-right. This is causing IE to break the float pattern $('.prod-container-daq:odd').css({marginRight:'0px'}); /************************************************************ * If no prodcut line is selected * remove div[@class=hr-style-daq] ***********************************************************/ /*$('.hr-style-daq').next().find('tr:not(td)').parents('table[@class=product-advancedInfo-daq]').hide().andSelf().parent().prev().hide(); var browserType = jQuery.browser; if($.browser.msie && $.browser.version == 6.0){ //we have to change the bottom value when we remove these elements. $('.hr-style-daq:hidden').parent().parent().find('.product-container-rndBL-daq').css({bottom:"-12px"}); $('.hr-style-daq:hidden').parent().parent().find('.product-container-rndBR-daq').css({bottom:"-12px"}); } */ // Breadcrumb should not have ajax help functionality $("#breadcrumb > a > span[@class=help]").removeClass("help").removeAttr("onmouseout").removeAttr("onmouseover"); //This function removes the css from the tag inside an

tag for cul-de-sac pages $("h2 > a:not([@href])").each(function(){ var _that = $(this); var $holder = _that.text(); var $placement = _that.parent(); _that.remove(); $placement.text($holder); }); /************************************************************************************************ * Remove a div that james cant get rid of. The div wrapper "
" * Sachi is working on this and she is going to let me know when to remove this. ************************************************************************************************/ //$("div#localeselector").parent().append("Select Your Country").end().remove(); }, /* ##################################### * function extras_for_cul_de_sac_pages : * JQuery - * functions to perform cleanup here and there. Most of them have been implemented into the HTML. * Others are needed for their dynamic features that are not possible with HTML alone * * param - none */ extras_for_cul_de_sac_pages: function(){ //setContentHeight(100); // Breadcrumb should not have ajax help functionality $("#breadcrumb > a > span[@class=help]").removeClass("help").removeAttr("onmouseout").removeAttr("onmouseover"); //If any images are larger than 710px wide we shrink them to 705px wide $('#cul-de-sac-add img').each(function(){ var _that = $(this); if (_that.width() > 690) { _that.removeAttr("width"); _that.attr({width: "650"}); } }); }, /* ############################################### * */ manage_container_div : function(position, left_height){ var _position = parseInt(position); var _left_height = left_height; //if the left column is taller than the right column then assign the left columns height to the container div. //if not do nothing and start moving the container divs height by the code below if (_left_height > RIGHT_COLUMN_HEIGHT) { //typeof _position == Number ? null : throw_error('manage_container_div', 'passed in parameter (postion) to be of type Number.'); //typeof _height == Number ? null : throw_error('manage_container_div', 'passed in parameter (height) to be of type Number'); _position === 1 ? $('#content-daq').height(_left_height + 20) : null; _position === 0 ? $('#content-daq').height(_left_height - 20) : null; } else { $('#content-daq').height($('#right-column-daq').height() + 20); } } } // end Namespace /* ##################################### * Not going to add these to the NI namespace. They are called else where, could cause problems */ // Javascript used to render help bubbles. function showTitleNIFN (event, helpType, helpCode, oraLang){ //Call core functionality showTitleCore (event, helpType, helpCode, oraLang); //Call to DCSMultiTrack //tWT = window.setTimeout("meta('" + helpCode +"','')",6000); } /* ##################################### * Not going to add these to the NI namespace. They are called else where, could cause problems */ function hideTitleNIFN (){ sweetTitles.tipOut(); } /* ##################################### * Helper function to check which column is taller left or right. * Then assigns that height to the container div for the left and right column. * This is needed for placement of original content in the uper most part of the source */ function setContentHeight(extra){ //SEO changes made the below code required. //This code checks the height of the left column then the right. Depending which one is longer sets the parents container +20 for bottom padding to the correct height. $('#left-column-daq').height() > $('#right-column-daq').height() ? $('#content-daq').css({height:$('#left-column-daq').height() + extra}) : $('#content-daq').css({height:$('#right-column-daq').height() + extra}); } function throw_error(method, string){ throw new Error('Function => '+ method +' :: error. Epected => '+ string); } $(function(){ (function(){ //tricky tricky have to set a timer or else you get to high of a number because items are floated left. Just trust me and you will get the correct //value if you use the setTimeouts setTimeout("NI.features.set_right_height($('#right-column-daq').height())", 1000); })(); });