// START Dynamic Product Images on Radio Buttons V2.07 

var current = ''; 
var scaledown; 
var rcolcount; 
var rcolpos; 
var textunder; 
var buttonunder; 
var currentselect;                  // used to hold the id of the <select..> statement under construction 
var isels = new Object();               // will hold SELECT items 

function StartImageSelect(attribname){            // called from Act_VariantListHeader.html 
  currentselect = attribname;               // save name of current array in global 
  isels[currentselect] = new Array();            // make an array for the images using unique attribute name 
  isels[currentselect].push(current);            // current image name is 1st value 
} 

function EndImageSelect(){               // called from Act_VariantListFooter.html 
  var thissel = document.getElementById('s-' + currentselect);    // the <select> statement in question 
  for ( i = 0; i < thissel.options.length; i++ ) 
    { 
    var opt = thissel.options[i].text; 
    var styleval = opt.match(/(.*)\{(.*)\}(.*)/);      // have we a "{" and "}" in the text? 
    if ( styleval != null ) 
      { 
      isels[currentselect].push(styleval[2]);         // save the image name 
      thissel.options[i].text = styleval[1] + styleval[3];      // and remove the image name from the options list 
      } 
    else 
      { 
      isels[currentselect].push('');            // null image 
      } 
    } 
} 

function selectimage(selthis){               // called from onchange event in the <SELECT..> statement 
  var thisimg = isels[selthis.name][selthis.selectedIndex + 1];   // extract the image 
  if ( thisimg ) 
    { 
    var imgref = isels[selthis.name][0];         // 1st item has the main image name 
    var curbits = imgref.match(/(.*\/)(.*)/);         // detect any path in swap image (in case we're previewing) 
    var cpath =  curbits != null ? curbits[1] : '';      // null path if live 
    document.getElementById(imgref).src = cpath + thisimg;   // and replace main image with it 
    } 
} 

function radioimage(starthtml, midhtml, choicename){   // called from Act_VariantRadioButton.html 
 var radiohtml = '<INPUT TYPE=RADIO NAME="' + starthtml + '"';   // recreate the basic HTML 
 radiohtml += ' VALUE="' + midhtml;         // and the value 
 var radioid = 'RD-' + starthtml + choicename;      // unique ID for this button 
 var result = choicename.match(/(.*)\{(.*)\}(.*)/);      // see if HTML for Name contains {.....} 
 if ( result != null ) 
   { 
   radiohtml += ' id="' + radioid + '" ';            // set unique ID 
   var textsep = textunder ? '<br>' : '';             // do we want text under button 
   scaledown = scaledown - 0; 
   var twidth = Math.floor(100 / rcolcount); 
   rcolpos++; 
   if ( isNaN(scaledown) || scaledown < 1 ) scaledown = 4;         // set a default if bad scaledown 
   var cpath = ''; 
   var curbits = current.match(/(.*\/)(.*)/); 
   if ( curbits != null ) cpath = curbits[1]; 
   var thisimage = result[2];                     // the text within { } 
   // add in image substitution code 
   radiohtml += ' onClick="document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'">'; 
   var thiswidth = Math.floor(iwidth.replace(/WIDTH=(.*)/,"$1") / scaledown);   // the width 
   var thisheight = Math.floor(iheight.replace(/HEIGHT=(.*)/,"$1") / scaledown);// the height 
   document.write('<table width="' + twidth + '%" align=left>');      // start a table if appropriate width 
   document.write('<tr><td><img alt ="' + result[3] + '" src="' + cpath + thisimage + '"'      // first cell with image 
                + ' width=' + thiswidth + ' height=' + thisheight      // scaled sizes 
      + ' onclick="document.getElementById(\'' + radioid + '\').checked=true;'   // set appropriate radio if image clicked 
                + ' document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'"'   // and swap big image 
                + ' alt ="' + result[1] + result[3] + '"'         // informative text 
                + ' style="cursor:pointer"'               // show that image can be clicked 
      + '>'); 
   if ( buttonunder )                        // where do we want the button text 
     { 
     document.write('<br>' + radiohtml + textsep + result[1] + result[3]);   // button under image 
     } 
   else 
     { 
     document.write('</td><td width="100%" valign=top>');      // new cell next to image 
     document.write(radiohtml + textsep + result[1] + result[3]);   // then radio button and description 
     } 
   document.write('</td></tr></table>');            // finally end table 
   if ( rcolpos >= rcolcount ) 
     { 
     document.write('<br clear=all>'); 
     rcolpos = 0; 
     } 
   } 
 else  
   { 
   result = choicename.match(/(.*)\[(.*)\](.*)/);            // see if HTML for Name contains [.....] 
   if ( result != null ) 
     { 
     radiohtml += ' id="' + radioid + '" ';            // set unique ID 
     var textsep = textunder ? '<br>' : '';             // do we want text under button 
     var twidth = Math.floor(100 / rcolcount); 
     rcolpos++; 
     var cpath = ''; 
     var curbits = current.match(/(.*\/)(.*)/); 
     if ( curbits != null ) cpath = curbits[1]; 
     var thisimage = result[2];                     // the text within [ ] 
     radiohtml += '>'; 
     document.write('<table width="' + twidth + '%" align=left>');   // start a table if appropriate width 
     document.write('<tr><td><img alt ="' + result[3] + '" src="' + cpath + thisimage + '"'   // first cell with image 
        + ' onclick="document.getElementById(\'' + radioid + '\').checked=true;"'   // set appropriate radio if image clicked 
                  + ' alt ="' + result[1] + result[3] + '"'      // informative text 
                  + ' style="cursor:pointer"'            // show that image can be clicked 
        + '>'); 
     if ( buttonunder )                     // where do we want the button text 
       { 
       document.write('<br>' + radiohtml + textsep + result[1] + result[3]);   // button under image 
       } 
     else 
       { 
       document.write('</td><td width="100%" valign=top>');      // new cell next to image 
       document.write(radiohtml + textsep + result[1] + result[3]);     // then radio button and description 
       } 
     document.write('</td></tr></table>');            // finally end table 
     if ( rcolpos >= rcolcount ) 
       { 
       document.write('<br clear=all>'); 
       rcolpos = 0; 
       } 
     } 
   else                        // no brackets of any kind 
     { 
     document.write(radiohtml + '>' + choicename);           // so write the unaltered choice text 
     } 
   } 
} 
// (V11) END Dynamic Product Images on Radio Buttons