var req;

// Get an XMLHttpRequest object in a portable way.
function newRequest()
{
  req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    } 
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
}

function updateSoffeColors(sizeSelect){
    newRequest();
    var productId = $('productId').getValue();
    req.open("GET", "ajax.php?page=productView&function=getSoffeColors&sizeId="+sizeSelect.value+"&productId="+productId, true);
    req.onreadystatechange = printSoffeColors;
    req.send(null);
}

function printSoffeColors(){
    if(req.readyState == 4){
        if (req.status == 200){
            var answer = req.responseText;
            var table = eval('('+answer+')');
            // clearing div contents            
            while($('soffeColors').childNodes.length){
                $('soffeColors').removeChild($('soffeColors').firstChild);
            }
            for(var i=0;i<table.length;i++){
                var color = table[i];
                var divi = document.createElement('div');
                var pic = document.createElement('img');
                    pic.setAttribute('src', color['pictureUrl']);
                    pic.setAttribute('alt', color['name']);
                    pic.setAttribute('style', "vertical-align: middle;"); 
                var label = document.createElement('label');
                    label.setAttribute('for', color['soffeColorId']);
                    label.innerHTML = "<b>"+color['name']+"</b>";
                    //, "+color['colorCode']
                
            
                try{  
                   var radio = document.createElement('<input type="radio" name="soffeColorId" />');  
                }catch(err){  
                 radio = document.createElement('input');
                 radio.setAttribute('type','radio');  
                }  
                  
                radio.setAttribute('name','soffeColorId');
                radio.setAttribute('value', color['soffeColorId']);
                
                                   
                //var br = document.createElement('br');
                    divi.appendChild(pic);
                    //divi.appendChild(br);
                    divi.appendChild(radio);
                    divi.appendChild(label);
                    $('soffeColors').appendChild(divi);    
            }
            
        }
    }
}

function changePicture(picture){
    $('big').removeChild($('big').firstChild);
    var pic = document.createElement('img');
    pic.setAttribute('src', picture.src);
    $('big').appendChild(pic);
}