///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Name:        campaign.js                                                                                          //
// Purpose:     Extend clientside functionality on www.dharmacon.com and implement reliable x/browser styles         //
// Created:     Wed Oct 27 16:42:23                                                                                  //
// Updated:     May 31, 2011                                                                             //
// Copyright:   Thermo Fisher Scientific 1998-2010                                                                   //
// Description: Control and implement style, layout and behavior for marketing pages: Segmented Campaigns,           //
// Specified LP's. Implement style rules for related MarCom web content                                                                                                    //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//Code to run after the page loads
$(document).ready(function(){
		      // Check to see if this page is a LP or a Segmented Campaign
		      var is_cat_table = $('.catalog_table');
		      // I am using #campaign container elements on segmeted lp's
		      var is_campaign = $('#campaign');
		      // The #lp element is used on the RNAi Screening LP
		      var is_lp = $('#lp');
		      // Test to see if we are on either a Segmented Campaign or the RNAi Screening LP
		      var campaign_wrapper = $('#campaign_wrapper');
		      // Test to see if we have modal content (refactoring the old way of displaying modal content so js doesn't need to be sotred in the db).
		      var solaris = $('#solaris');
			  var campContent = $('#campContent');
		      var modal_content = $('#modal_content');
		      if (page_test(is_campaign)){
			  // If we found the campaign div we need to set the css.
			  // Set the pageMainContent div to a width of 96%.
			  $('#pageMainContent').css('width', '96%');
			  // Style for the segment classes.
			  $('.segment_title').css('font-size', '1.2em').css('text-align', 'left').css('font-weight', 'bold');
			  //color the 3for2 class
			  $('.3for2').css('color', '#333333').css('font-weight', 'bold').css('font-size', '1.1em');
			  // style the 20off class for 20 percent off promos
			  $('.20off').css('color', '#333333').css('font-weight', 'bold').css('font-size', '1.1em');
			  // Give the users some feedback when they hover over a promo
			  $('.us_segment ul li a').hover(
			      function (){
			  	  $(this).css('color', '#333333').css('text-decoration', 'none');
			      },
			      function (){
			  	  $(this).css('color', '#5381ac').css('text-decoration', 'underline');
			      }
			  );
		      }
		      // We have style to apply to content in a catalog table
		      else if (page_test(is_cat_table)){
			  // style the catalog table
			  $('.catalog_table').css('border', 'none').css('padding', '10px');
			  //style the middle column
			  $('.catalog_table td:nth-child(2)').css('width', '60%').css('padding-bottom', '5px').css('padding-left', '10px').css('padding-right', '10px');
			  $('.catalog_table td:first-child').css('padding', '5px').css('text-align', 'center');
			  //style the last column
			  $('.catalog_table td:last-child').css('text-align', 'center');
			  // resytle the table
			  $('.catalog_table td').css('border', '1px solid #999').css('border-collapse', 'collapse');
			  $('.catalog_table td').css('border', 'none');
			  $('.catalog_table td').css('border-top', '1px solid #999').css('border-left', '1px solid #999');
			  $('.catalog_table td:nth-child(3)').css('border-right', '1px solid #999');
			  $('.catalog_table tr:last-child > td').css('border-bottom', '1px solid #999');
			  //these pages have hidden content
			  modal();
			  
		      }
		      else if (page_test(is_lp)){
			  // We are on a landing page and need to run the modal function so hidden content is accessible to the user.
			  modal();
			  // Now, add the rollover effect to the quote button for RNAi Screening
			  $(".quote").hover(function() {
						 $(this).attr("src","/uploadedImages/Home/Campaigns/2010/RNAi_Screening/quote-request-hover.png");
					     }, function() {
						 $(this).attr("src","/uploadedImages/Home/Campaigns/2010/RNAi_Screening/quote-request.png");
					     });
		      }
			   else if (page_test(campaign_wrapper) || page_test(campContent)){
				   $('#pageTitle').remove();
				   
				     // We need an event handler for the gene search text box to clear the text as needed
			  $('#gene_search').focus(function(){
						      $(this).val('');
			  });
			  // Listen for the user to press enter instead of clicking on the "Gene Search Image".
			  $('#gene_search').keypress(function(e) {
							  code = e.keyCode ? e.keyCode : e.which;
							  if(code.toString() == 13) {
							      e.preventDefault();
							      gene_search($('#gene_search').val());
							  }
						      });
			  //detect if msie and restyle the gene_search textbox and sumbission image for css quirks
			  if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
			      var ieversion=new Number(RegExp.$1); // capture x.x portion and store as a number
			      if (ieversion>=8) {
				  //alert("You're using IE8 or above");
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-5');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('.buy_btn').css('margin', '15px 15px 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#seg_head h3').css('padding-top', '5px');
			      }				  
			      else if (ieversion>=7) {
				  //alert("You're using IE7.x"); // or compatability mode
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-6').css('left', '0');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('input.genius_search').css('border', '0');
				  $('.buy_btn').css('margin', '-2px 0 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#tier2_content').css('margin', '0 0 185px 0');
				  $('#seg_head h3').css('padding-top', '5px');
			      }
			      else if (ieversion>=6) {
				  //alert("You're using IE6.x");
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-8').css('left', '2');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('.buy_btn').css('margin', '-8px 0 0 45px');
				  $('.buy_btn').css('margin', '-2px 0 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#tier2_content').css('margin', '0 0 185px 0');
				  $('#seg_head h3').css('padding-top', '5px');
			      }			      	      
			  }
			  
			  // Start rotating the quotes every 30 seconds
			  setInterval(function () {rotate_list('#quotes')}, 30000);
			  
			  //style the hidden content (css wasn't working but console+jquery did)
			  $('.small_link li').css('font-size', '.8em').css('width', '120px').css('margin-left', '30px');
			  // Code that triggers the rollover buttons
			  $('.roll img').hover(
			      function (){
				  this.src = this.src.replace("_off","_on");
			      },
			      function (){
				  this.src = this.src.replace("_on","_off");
			      }
			  );			  
				   
				   
				   
				   
				   
				   }
		      else if (page_test(campaign_wrapper) && page_test(solaris)){
			  // We have a campaign page here and this code is specific to the Solaris LP's.
			  //We do not need the pageTitle element on this page
			  $('#pageTitle').remove();
			  // Set the page_head h1 fnt size
			  $('#page_head h1').css('font-size', '19px');
			  $('#page_head').css('background-image', 'url(/uploadedImages/Home/Campaigns/2010/Solaris_Campaign/Solaris_lightbulb_Header.jpg)').css('height', '80px');
			  $('#pageMainContent').css('width', '96%'); // Set up the maincontent element
			  $('#BodyContentPlaceHolder_MainContainer').css('background', 'white'); // We want a white header
			  // remove the underline text decoration from the anchor tags in the .segment class
			  $('.segment p a').css('text-decoration', 'none');
			  // add style to the whats new elements
			  $('.whats_new ul li').css('padding-top', '5px'); 
			  $('.whats_new ul li').css('padding-bottom', '5px'); 
			  // We need an event handler for the gene search text box to clear the text as needed
			  $('#gene_search').focus(function(){
						      $(this).val('');
			  });
			  // Listen for the user to press enter instead of clicking on the "Gene Search Image".
			  $('#gene_search').keypress(function(e) {
							  code = e.keyCode ? e.keyCode : e.which;
							  if(code.toString() == 13) {
							      e.preventDefault();
							      gene_search($('#gene_search').val());
							  }
						      });
			  //detect if msie and restyle the gene_search textbox and sumbission image for css quirks
			  if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
			      var ieversion=new Number(RegExp.$1); // capture x.x portion and store as a number
			      if (ieversion>=8) {
				  //alert("You're using IE8 or above");
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-5');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('.buy_btn').css('margin', '15px 15px 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#seg_head h3').css('padding-top', '5px');
			      }				  
			      else if (ieversion>=7) {
				  //alert("You're using IE7.x"); // or compatability mode
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-6').css('left', '0');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('input.genius_search').css('border', '0');
				  $('.buy_btn').css('margin', '-2px 0 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#tier2_content').css('margin', '0 0 185px 0');
				  $('#seg_head h3').css('padding-top', '5px');
			      }
			      else if (ieversion>=6) {
				  //alert("You're using IE6.x");
				  $('#campaign_sidebar input.genius_search').css('padding', '5px 0 0 5px');
				  $('#campaign_sidebar .genius_btn').css('position', 'relative').css('top', '-8').css('left', '2');
				  // quote text need to be smaller in ie
				  $('ul#quotes').css('font-size', '.8em');
				  $('.buy_btn').css('margin', '-8px 0 0 45px');
				  $('.buy_btn').css('margin', '-2px 0 0 45px').css('position', 'relative').css('top', '-3px');
				  $('#tier2_content').css('margin', '0 0 185px 0');
				  $('#seg_head h3').css('padding-top', '5px');
			      }			      	      
			  }
			  
			  // Start rotating the quotes every 30 seconds
			  setInterval(function () {rotate_list('#quotes')}, 30000);
			  
			  //style the hidden content (css wasn't working but console+jquery did)
			  $('.small_link li').css('font-size', '.8em').css('width', '120px').css('margin-left', '30px');
			  // Code that triggers the rollover buttons
			  $('.roll img').hover(
			      function (){
				  this.src = this.src.replace("_off","_on");
			      },
			      function (){
				  this.src = this.src.replace("_on","_off");
			      }
			  );			  
		      }
		      else if (page_test(modal_content)){
			  // we have hidden content on this page and need to init it with the modal functionality
			  modal();
		      }
		      else {
			  // we did not find a campaign element and this is for completeness
			  //move along its not a campaign page and we want to leave the styles alone
		      }
});

function page_test(obj){
    // A Global function that can detect if the object passed in is null or not.
    // The campaign_test function takes one argument (an object) and test it to see if it is the camnpaign div. It returns true or false.
    if (obj.html() == null) {
	return false;
    }
    else if (obj.html != null){
	return true;
    }
    else { 
	// Nothing to do here, move along 
    }

}

function modal() {
    // A global function to create the modal effect. Use this to initialize links that will show additional content in a modal view.
    // select all the a tags with name equal to modal
    $('a[name=modal]').click(function(e) {
				 //Cancel the link behavior
				 e.preventDefault();
		
				 //Get the a tag
				 var id = $(this).attr('href');
	
				 //Get the screen height and width
				 var maskHeight = $('#wrapper').height();
				 var maskWidth = $('#wrapper').width();
	
				 //Set heigth and width to mask to fill up the whole screen
				 $('#mask').css({'width':maskWidth,'height':maskHeight});
				 
				 //transition effect		
				 $('#mask').fadeTo(0, 0.7);	
				 $('#mask').fadeIn(500);	
	
				 //Get the window height and width
				 var winH = $(window).height();
				 var winW = $(window).width();
              
				 //Set the popup window to a reasonable default
				 $(id).css('top',  maskHeight/5);
				 $(id).css('left', maskWidth/15);
	
				 //transition effect
				 $(id).fadeIn(500); 
	
			     });
	
    // If the close button is clicked we close the modal
    $('.window .close').click(function (e) {
				  //Cancel the link behavior
				  e.preventDefault();
				  
				  $('#mask').hide();
				  $('.window').hide();
			      });		
    
    // If mask is clicked we close the modal
    $('#mask').click(function () {
			 $(this).hide();
			 $('.window').hide();
		     });    
}

function gene_search(st){
    //console.log(st);
    // exceptions: blank search term, ="Enter Gene Name"
    // exception handler needs to reset the fields
    if (st == ""){
	reset_search();
    }
    else if (st == "Enter Gene Name"){
	reset_search();
    }
    else if (st == "Valid terms only!"){
	reset_search();
    }
    else{
	search_url = "/CatalogSearch/GlobalSearch.aspx?id=2231&imageid=2230&SearchTerm=" + st + "&gene=true";
	window.location = search_url;
    }
}

function reset_search(){
    $('#gene_search').val('Valid terms only!');
}

function solaris_pricing(cur) {
    //a list of styles used to default the table cells and modify them
    var list = ['.usd', '.euro', '.gbp', '.sfr', '.dkk', '.sek', '.nok'];
    for (var i in list){
	$(list[i]).hide();
    }
    //make sure all the cells have the proper border
    $(cur).show();
}

var rotate_list = function(list) {
    /* Take the id of a list and rotate the first li to the back of the ul*/
    var first = list + ' li:first';
    //console.log(first);      // debugging
    var append_to = 'ul' + list;
    //console.log(append_to);  // debugging
    $(first).animate(
	{opacity: 0}, 
	800, 
	function() {
	    $(this).remove().appendTo(append_to).removeAttr('style');
	});
};

var toggle_class = function (name){
    aclass = "." + name;
    $(aclass).toggle();
};
