/*
  TO ADD A NEW CATEGORY
  ---------------------
  1. add an element to the products array in the productChange function - the element (e.g., 'motor') should be the folder
  in 'images/affiliate' where the gifs are found (e.g., 'images/affiliate/{motor}'
  2. add an if statement in the sizeChange function for the new product element and edit the sizes array so the elements are
  the sizes of the images and the value of each of these is an array with the image names
  3. add the new category to the product drop down
  
  TO EDIT THE IMAGES IN A CATEGORY
  --------------------------------
  1. add any new sizes to the product array in the productChange function if the image is a new size
  2. add an element to the appropriate sizes array in the sizeChange function or add any new images to the exisitng size element
  
  COUPLE OF NOTES
  ---------------
  -The text in the product dropdown (e.g., 'Car Insurance') is used in the alt tag for the HTML code
  -These functions loop over the arrays and set the select options as they go, this means that for each drop down, all arrays need
  to be as long as the longest array, i.e., if there are 9 sizes in the household array for the sizes drop down, all the 
  other product arrays must be 9 elements long and the dropdown must have 9 blank option fields in the HTML  
  */

  function productChange(choice) {
  
      
      // set the sizes and product copy

      var products = new Array();
      products['general']       = ['80 x 30', '100 x 30', '100 x 37', '120 x 44', '125 x 46', '200 x 74', '255 x 94', '320 x 118'];
      products['motor_campaign']= ['125 x 55',  '120 x 60', '160 x 60', '468 x 60'];
      products['household']     = ['80 x 80',  '100 x 30', '120 x 60', '120 x 90', '468 x 60'];
      products['motor']         = ['80 x 80',  '100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '468 x 30', '468 x 60', '758 x 49'];
      products['roadside']      = ['100 x 30', '120 x 60', '120 x 90', '758 x 49', '200 x 79', '125 x 125', '468 x 60'];
      products['travel']        = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49', '468 x 60'];
      products['student']       = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['pet']           = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['bike']          = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['caravan']       = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['financial']     = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['landlords']     = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49', '468 x 60'];
      products['rent_guarantee']     = ['20 x 60', '100 x 30', '120 x 90', '125 x 125', '200 x 79', '468 x 60', '758 x 49'];
      products['mobile']        = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49'];
      products['renter']        = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49', '468 x 60'];
      products['wow']           = ['80 x 80',  '100 x 30', '120 x 60', '120 x 90',  '125 x 125','200 x 79', '758 x 49'];
      products['student_motor'] = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '468 x 30', '468 x 60', '758 x 49'];
      products['17to40']        = ['100 x 30', '120 x 60', '120 x 90', '125 x 125', '200 x 79', '758 x 49', '468 x 60'];
      products['partnership']   = ['Text'];
      
      
      // get sizes array from products array
      
      var sizes_array;
      
      if (choice != '') {
          sizes_array = products[choice];
      }
      if (! sizes_array || sizes_array.length == 0) {
          sizes_array = new Array('---');
      }
      
      // set copy in copy area
      
      if (choice == 'motor_campaign') {
          var div_object = getObject('copy_area');
          var div_text   = getObject('div_Motor_Campaign');
          div_object.innerHTML = div_text.innerHTML;
      }      
      else if (choice == 'household') {
          var div_object = getObject('copy_area');
          var div_text   = getObject('div_Home');
          div_object.innerHTML = div_text.innerHTML;       
      }
      else if (choice == 'motor') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Motor');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'roadside') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Roadside');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'roadside') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Roadside');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'travel') {
      var div_object = getObject('copy_area');
          var div_text   = getObject('div_Travel');
          div_object.innerHTML = div_text.innerHTML;       
      }
      else if (choice == 'bike') {
      var div_object = getObject('copy_area');
          var div_text   = getObject('div_Bike');
          div_object.innerHTML = div_text.innerHTML; 
      }
      else if (choice == 'caravan') {
          var div_object = getObject('copy_area');
          div_object.innerHTML = 'It\'s important to protect your caravan, as home and car policies do not cover any loss or damage, which makes this policy a must.';
      }
      else if (choice == 'landlords') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Landlords');
          div_object.innerHTML = div_text.innerHTML;      
      }
       else if (choice == 'rent_guarantee') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Rent_Guarantee');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'student_motor') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Student_Motor');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'renter') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_Tenants');
          div_object.innerHTML = div_text.innerHTML;      
      }
	  else if (choice == 'wow') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_WOW');
          div_object.innerHTML = div_text.innerHTML;      
      }
	  else if (choice == '17to40') {
 		  var div_object = getObject('copy_area');
          var div_text   = getObject('div_17to40');
          div_object.innerHTML = div_text.innerHTML;      
      }
      else if (choice == 'general') {
          var div_object = getObject('copy_area');
          div_object.innerHTML = 'To view approved Daai partnership text please select the partnership text option on the product drop down box menu.';
      }
      else if (choice == 'partnership') {
          var div_object = getObject('copy_area');
          
          /* use an if else in here */
          div_object.innerHTML = 'Awaiting copy...';
      }
      else {
          //user has clicked 'Please select...' or an option without copy associated with it so show blank values
          setBlank('copy_area');
          setBlank('html_area');
          setBlank('image_preview');
          
          // clear down the options drop down so no images are shown
          document.forms.creative.option_select.options.length = 0;          
      }

      // resize the selectbox
      document.forms.creative.size_select.options.length = sizes_array.length;
      
      
      // show the 120x90 size first then the first one because if theres only one in the drop down list, you can't actually change (onChange) to that size
      
      var has_default_size = 0;
      for (var i = 0; i < sizes_array.length; i++) {
        if (sizes_array[i] == '120 x 90') {
          has_default_size++;
        }
      }

      
      // set sizes drop down
            
      for (var i = 0; i < sizes_array.length; i++) {
          document.forms.creative.size_select.options[i].text  = sizes_array[i];
          document.forms.creative.size_select.options[i].value = sizes_array[i];
          if (sizes_array[i] == '120 x 90') {
              document.forms.creative.size_select.options[i].selected = true;
          }
      }
      
      if (has_default_size > 0) {
        sizeChange('120 x 90');
      }
      else {
        document.forms.creative.size_select.options[0].selected = true;
        sizeChange(sizes_array[0]);
      }
  }
  
  
  
  function sizeChange(choice) {
  
      var product = document.forms.creative.product_select.value;
      
      var options_array;
      
      
      // make array where element is size and value is array of images      
      
     if (product == 'motor_campaign') {
          var sizes = new Array();
          sizes['125 x 55']  = ['CarCampaign_125x55.gif'];
          sizes['120 x 60']  = ['CarCampaign_120x60.gif'];
          sizes['160 x 60']  = ['CarCampaign_160x60.gif'];
          sizes['468 x 60']  = ['CarCampaign_468x60.gif'];
          
          options_array = sizes[choice];
      }
     else if (product == 'household') {
          var sizes = new Array();
          sizes['120 x 90']  = ['C3static.gif'];
          sizes['125 x 125'] = ['F3.gif'];
          sizes['100 x 30']  = ['A3static.gif'];
          sizes['120 x 60']  = ['B3static.gif'];
          sizes['758 x 49']  = ['D3static.gif'];
          sizes['200 x 79']  = ['E3static.gif'];
          sizes['80 x 80']   = ['Web 80x80 Home.gif'];
          sizes['468 x 60']  = ['468x60-Home.gif'];
            
          options_array = sizes[choice];
      }
      else if (product == 'motor') {
          var sizes = new Array();
          sizes['468 x 30']  = ['468x30 Car.gif'];
          sizes['468 x 60']  = ['468x60 Car.gif'];
          sizes['120 x 90']  = ['C16static.gif'];
          sizes['125 x 125'] = ['F17.gif'];
          sizes['100 x 30']  = ['A17static.gif'];
          sizes['120 x 60']  = ['B16static.gif'];
          sizes['758 x 49']  = ['D17static.gif'];
          sizes['200 x 79']  = ['E16static.gif'];
          sizes['80 x 80']   = ['Web 80x80 Car.gif'];

          options_array = sizes[choice];
      }
      else if (product == 'roadside') {
          var sizes = new Array();
          sizes['100 x 30']  = ['roadside-100x30.gif'];
          sizes['120 x 60']  = ['roadside-120x60.gif'];
          sizes['120 x 90']  = ['roadside-120x90.gif'];
          sizes['758 x 49'] = ['roadside-758x49.gif'];
          sizes['200 x 79']  = ['roadside-200x79.gif'];
          sizes['125 x 125']  = ['roadside-125x125.gif'];
          sizes['468 x 60']  = ['468x60-Roadside.gif'];

          options_array = sizes[choice];
      }
      else if (product == 'travel') {
          var sizes = new Array();
          sizes['120 x 90']  = ['C7static.gif'];
          sizes['100 x 30']  = ['A7static.gif'];
          sizes['120 x 60']  = ['B7static.gif'];
          sizes['758 x 49']  = ['D7static.gif'];
          sizes['200 x 79']  = ['E7static.gif'];
          sizes['125 x 125'] = ['F7.gif'];
          sizes['468 x 60']  = ['468x60-Travel.gif'];
     

          options_array = sizes[choice];
      }
      else if (product == 'student') {
          var sizes = new Array();
          sizes['120 x 90']  = ['C4static.gif'];
          sizes['100 x 30']  = ['A4static.gif'];
          sizes['120 x 60']  = ['B4static.gif'];
          sizes['758 x 49']  = ['D4static.gif'];
          sizes['200 x 79']  = ['E4static.gif'];
          sizes['125 x 125'] = ['F4.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'pet') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A10static.gif'];
          sizes['120 x 60']  = ['B10static.gif'];
          sizes['120 x 90']  = ['C10static.gif'];
          sizes['758 x 49']  = ['D10static.gif'];
          sizes['200 x 79']  = ['E10static.gif'];
          sizes['125 x 125'] = ['F10.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'bike') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A13static.gif'];
          sizes['120 x 60']  = ['B13static.gif'];
          sizes['120 x 90']  = ['C13static.gif'];
          sizes['758 x 49']  = ['D13static.gif'];
          sizes['200 x 79']  = ['E13static.gif'];
          sizes['125 x 125'] = ['F13.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'caravan') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A11static.gif'];
          sizes['120 x 60']  = ['B11static.gif'];
          sizes['120 x 90']  = ['C11static.gif'];
          sizes['758 x 49']  = ['D11static.gif'];
          sizes['200 x 79']  = ['E11static.gif'];
          sizes['125 x 125'] = ['F11.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'financial') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A8static.gif', 'A9static.gif'];
          sizes['120 x 60']  = ['B8static.gif', 'B9static.gif'];
          sizes['120 x 90']  = ['C8static.gif', 'C9static.gif'];
          sizes['758 x 49']  = ['D8static.gif', 'D9static.gif'];
          sizes['200 x 79']  = ['E8static.gif', 'E9static.gif'];
          sizes['125 x 125'] = ['F8.gif',       'F9.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'landlords') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A14static.gif'];
          sizes['120 x 60']  = ['B14static.gif'];
          sizes['120 x 90']  = ['C14static.gif'];
          sizes['758 x 49']  = ['D14static.gif'];
          sizes['200 x 79']  = ['E14static.gif'];
          sizes['125 x 125'] = ['F14.gif'];
          sizes['468 x 60']  = ['468x60-Landlords.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'rent_guarantee') {
          var sizes = new Array();
          sizes['20 x 60']  = ['Rent-20x60.gif'];
          sizes['100 x 30']  = ['Rent-100x30.gif'];
          sizes['120 x 90']  = ['Rent-120x90.gif'];
          sizes['125 x 125']  = ['Rent-125x125.gif'];
          sizes['200 x 79']  = ['Rent-200x79.gif'];
          sizes['468 x 60'] = ['Rent-468x60.gif'];
          sizes['758 x 49']  = ['Rent-758x49.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'mobile') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A12static.gif'];
          sizes['120 x 60']  = ['B12static.gif'];
          sizes['120 x 90']  = ['C12static.gif'];
          sizes['758 x 49']  = ['D12static.gif'];
          sizes['200 x 79']  = ['E12static.gif'];
          sizes['125 x 125'] = ['F12.gif'];

          options_array = sizes[choice];
      }
      else if (product == 'renter') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A5static.gif', 'A6static.gif'];
          sizes['120 x 60']  = ['B5static.gif', 'B6static.gif'];
          sizes['120 x 90']  = ['C5static.gif', 'C6static.gif'];
          sizes['758 x 49']  = ['D5static.gif', 'D6static.gif'];
          sizes['200 x 79']  = ['E5static.gif', 'E6static.gif'];
          sizes['125 x 125'] = ['F5.gif',       'F6.gif'];
          sizes['468 x 60']  = ['468x60-Renter.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == 'wow') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A15static.gif'];
          sizes['120 x 60']  = ['B15static.gif'];
          sizes['120 x 90']  = ['C15static.gif'];
          sizes['758 x 49']  = ['D15static.gif'];
          sizes['200 x 79']  = ['E15static.gif'];
          sizes['125 x 125'] = ['F15.gif'];
          sizes['80 x 80']   = ['Web 80x80 WOW.gif'];

          options_array = sizes[choice];
      }
      else if (product == 'student_motor') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A18static.gif'];
          sizes['120 x 60']  = ['B17static.gif'];
          sizes['120 x 90']  = ['C17static.gif'];
          sizes['758 x 49']  = ['D18static.gif'];
          sizes['200 x 79']  = ['E17static.gif'];
          sizes['125 x 125'] = ['F18.gif'];
          sizes['468 x 60']  = ['468x60 Student Car.gif'];
          sizes['468 x 30']  = ['468x30 Student Car.gif'];

          options_array = sizes[choice];
      }
      else if (product == 'general') {
          var sizes = new Array();
          sizes['80 x 30'] = ['33814WebLogo80x30.gif'];
          sizes['100 x 30'] = ['A16static.gif'];
          sizes['100 x 37'] = ['33814WebLogo100x37.gif'];
          sizes['120 x 44'] = ['33814WebLogo120x44.gif'];
          sizes['125 x 46'] = ['33814WebLogo125x46.gif'];
          sizes['200 x 74'] = ['33814WebLogo200x74.gif'];
          sizes['255 x 94'] = ['33814WebLogo255x94.gif'];
          sizes['320 x 118'] = ['33814WebLogo320x118.gif'];
          
          options_array = sizes[choice];
      }
      else if (product == '17to40') {
          var sizes = new Array();
          sizes['100 x 30']  = ['A19.gif'];
          sizes['120 x 60']  = ['B19.gif'];
          sizes['120 x 90']  = ['C19.gif'];
          sizes['758 x 49']  = ['D19.gif'];
          sizes['200 x 79']  = ['E19.gif'];
          sizes['125 x 125'] = ['F19.gif'];
          sizes['468 x 60']  = ['468x60-17to40.gif'];
          
          options_array = sizes[choice];
      }    
      else if (product == 'partnership') {
          var sizes = new Array();

          sizes['Text'] = ['Sales/professional','Relaxed/funky','Membership Organisation','Information/Serious for Younger market','Standard Financial Portals'];
                    
          options_array = sizes[choice];
      }
      
      
      if (! options_array || options_array.length == 0 ) {
          options_array = new Array('---');
      }
      
      
      // set the options drop down values
      
      document.forms.creative.option_select.options.length  = options_array.length;
      
      for (var i = 0; i < options_array.length; i++) {
          document.forms.creative.option_select.options[i].text  = options_array[i];
          document.forms.creative.option_select.options[i].value = options_array[i];
      }
      
      
      // set the first element to be preselected 
      document.forms.creative.option_select.options[0].selected = true;
      
      // show the first image because if theres only one in the drop down list, you can't actually change (onChange) to that image
      optionChange(options_array[0]);
      
  
  }
  
  
  
  function optionChange(choice) {
  
      if (choice == '') { return false; };
  
      var product      = document.forms.creative.product_select.value;
      
      var code = 'Awaiting copy...';
      
      if ( product == 'partnership' ) {
            var div_text;
            if ( choice == 'Sales/professional' ) {
                div_text = 'div_Partnership_Sales';
            } else if ( choice == 'Relaxed/funky' ) {
                div_text = 'div_Partnership_Relaxed';
            } else if ( choice == 'Membership Organisation' ) {
                div_text = 'div_Partnership_Organisation';
            } else if ( choice == 'Information/Serious for Younger market' ) {
                div_text = 'div_Partnership_Information';
            } else if ( choice == 'Standard Financial Portals' ) {
                div_text = 'div_Partnership_Standard';
            /* add else if's as needed */
            } else {
                partnership_text = 'Partnership text awaiting copy';
            }
            
            var div_object     = getObject('copy_area');
            var div_htmlobject = getObject(div_text);
            
            if ( ! div_object ) {
                alert("Unable to get the 'copy_area' object");
                return;
            }
            
            if ( ! div_htmlobject ) {
                alert("Unable to get the '" + div_text + "' object");
                return;
            }
            
            div_object.innerHTML = div_htmlobject.innerHTML;

      }
      
          //NB:product value needs to be same as image folder, and, drop down text and value need to be the same as the file name
    
          image_src     = new Image;
    
          if ( product && choice && choice != '---' && choice.match('\.(gif|jpg)$') ) {  
              image_src.src = '/images/affiliate/' + product + '/' + choice;
          } else {
              image_src.src = '/images/common/blank.gif';
          }
          // set the image source
      
          if(document.getElementById && document.getElementById('image_preview')) {
            document.getElementById('image_preview').src = image_src.src;
          } 
          else if (document.all && document.all('image_preview')) {
            document.all('image_preview').src = image_src.src;
          } 
          else if (document.layers && document.layers['image_preview']) {
            document.images['image_preview'].src = image_src.src;
          } 
//      }
      // get the name of the product from the drop down and use it in the alt tag for html copy
      
      var product_text;
      
      for (var i =0; i < document.forms.creative.product_select.options.length; i++) {
          if (document.forms.creative.product_select.options[i].selected == true) {
              product_text = document.forms.creative.product_select.options[i].text;
          }
      }

      if (document.forms.creative.product_select.value == 'general') {
          product_text = 'Insurance Services';
      }
      
      // set the html copy
            
//      div_object = getObject('html_area');
//      div_object.innerHTML = code;
      
  }
  
  
  
  function setBlank(choice) {
      
      if (choice == 'image_preview') {
          
          var blank_image = new Image;
          blank_image.src = '/images/common/blank.gif';
                  
          if(document.getElementById && document.getElementById('image_preview')) {
            document.getElementById('image_preview').src = blank_image.src;
          } 
          else if (document.all && document.all('image_preview')) {
            document.all('image_preview').src = blank_image.src;
          } 
          else if (document.layers && document.layers['image_preview']) {
            document.images['image_preview'].src = blank_image.src;
          }
      
      }
      else {
  
          var div_object = getObject(choice);
          div_object.innerHTML = '';
          
      }

  }
  
  
  //--------------------------------------------------------------------
  // Function to return object from id cross-browserly
  //--------------------------------------------------------------------  
  
  function getObject(objectId) {

    if(document.getElementById && document.getElementById(objectId)) {
      // W3C DOM
      return document.getElementById(objectId);
    } 
    
    else if (document.all && document.all(objectId)) {
      // MSIE 4 DOM
      return document.all(objectId);
    } 
 
    else if (document.layers && document.layers[objectId]) {
      // NN 4 DOM.. note: this won't find nested layers
      return document.layers[objectId];
    } 
 
    else {
      return false;
    }                
  }