if (document.CTD == undefined) CTD = { urls: {} };

CTD.putDesignOnProduct = function(graphicSource) {
  var img = $('insideframeimage');
  if (img) {
    img.src = graphicSource;
  } else {
    var img = document.createElement('img');
    img.setAttribute('id', 'insideframeimage');
    $('insideframe').appendChild(img);
  }
  img.setAttribute('src', graphicSource);
  return img;
}

CTD.selectProductView = function(link, surfaceId, mode, imageSource) {
  var designId = $F('id');
  CTD.designPreview.surfaceId = surfaceId;
  CTD.designPreview.mode = mode;
  CTD.updateDesignPreview(designId, imageSource);
  $$('#productsel a').each( function(link) { link.className = ''});
  link.className = 'selected';
}

CTD.highlightColor = function(colorLink) {
	var colors = $$('#colors a.selected');
	for (var i=0; i<colors.length; i++) {
		colors[i].className = colors[i].className.gsub('selected', '');
	}
	$(colorLink).className += ' selected';
}

CTD.selectInlineColor = function(evt) {
	if (evt) {
		Event.stop(evt);
	}
	var designId = $F('id'); //from the form
	var colorLink = Event.findElement(evt, 'a');
	var colorId = colorLink.id.match(/[0-9]+/);
	
	$('item_color_id').value = colorId;
	CTD.designPreview.colorHex = colorLink.style.backgroundColor;
	CTD.highlightColor(colorLink);
	if (designId) CTD.updateDesignPreview(designId);
	return false;
}

CTD.selectInlineProduct = function(evt) {
  var selectProduct = Event.element(evt);
  var productId = $F(selectProduct);
  new Ajax.Updater('colors', CTD.urls.updateProductColors, { 
    parameters: 'productId='+productId,
    evalScripts: true
  });
}

CTD.updateDesignPreview = function(designId, imageSource) {
  var designImage = $('design_large_'+designId);
  if (CTD.designPreview.mode == 'onProduct') {
    // so we have to fetch the new image for this color and update it
    var colorId = $F('item_color_id');
    var surfaceId = CTD.designPreview.surfaceId;
    var productId = $F('item_product_id');
    new Ajax.Request(CTD.urls.updateProductImage, { 
      parameters: 'colorId='+colorId+'&productId='+productId+'&surfaceId='+surfaceId,
      evalJSON: true,
      onSuccess: function(transport, json){
        if (json && json.imageSource) {
          designImage.style.backgroundImage = 'url('+json.imageSource+')';
          designImage.style.backgroundColor = 'transparent';
          if (imageSource) CTD.putDesignOnProduct(imageSource);
        }
      }
    });
  } else {
    if (imageSource) {
      var img = $('insideframeimage');
      if (img) img.remove();
      designImage.style.backgroundImage = 'url('+imageSource+')';
    }
    designImage.style.backgroundColor = CTD.designPreview.colorHex;
  }
}

CTD.validateAdd = function(form) {
  var error = false;
  if (!$F('item_size_id')) {
    error = 'Please select a size.';
  } else if (!$F('item_color_id')) {
    error = 'Please select a color.';
  }
  if (error) {
    alert(error);
    return false;
  } else {
    return true;
  }
}

CTD.updateGalleryPhoto = function(spot, imagePath) {
  var evenOdd = spot % 2;
  if ($('designPhoto'+evenOdd)) {
    $('designPhoto'+evenOdd).style.backgroundImage = 'url('+imagePath+')';
  }
}

Event.observe(window, 'load', function() {
  var productSelect = $('item_product_id');
  if (productSelect) {
    Event.observe(productSelect, 'change', CTD.selectInlineProduct);
  }
});