//previw button
function buttonUpdate(value, action)
{
  $('buttonExample').innerHTML = '<img src="/web/images/spinner_blue.gif">';
  
  /**
   *updateing button tools elements before render
   */
   
  switch(action)
  {
    case 'updateFont':
    case 'updateTextStyle':
    case 'updateFontSize':
    case 'updateParagraphHeight':
        $('cornerRadiusArea').innerHTML = '<img src="/web/images/spinner_small.gif">';
        new Ajax.Updater('cornerRadiusArea', '/web/index.php/workspace/cornerRadius', {asynchronous:true, evalScripts:false});
      break;
    case 'updateCornerRadius':
        if(value>0)
        {
          $('innerBorderArea').style.display = 'none';
          $('shadowPositionArea').style.display = 'none';
        }
        else
        {
          $('innerBorderArea').style.display = 'block';
          $('shadowPositionArea').style.display = 'block';
        }
      break;
    case 'updateBackgroundColor':
        if(!$('useBgColorFon').checked)
        {
          $('useBgColorFon').checked = true;
          new Ajax.Request('/web/index.php/workspace/buttonExample', {parameters: { button_action: 'setGradient', value: '0' } ,asynchronous:true, evalScripts:false});
        }
      break;
    case 'updateGradientColor1':
    case 'updateGradientColor2':
    case 'updateGradientColor3':
    case 'setGradientAngle':
    case 'setUseGradienColor2':

        if(action=='setUseGradienColor2')
        {
          if($('useGradienColor2').checked)
          {
            value = 1;
          }
          else
          {
            value = 0;
          }
        }

        if(!$('useGradientFon').checked)
        {
          $('useGradientFon').checked = true;
          new Ajax.Request('/web/index.php/workspace/buttonExample', {parameters: { button_action: 'setGradient', value: '1' } ,asynchronous:true, evalScripts:false});
        }
      break;
    case 'setButtonIcon':
        icon_type = $('panel-buttons-icons-type').value
        
        if(icon_type=='left')
        {
          action = 'setIconLeft';
        }
        else
        {
          action = 'setIconRight';
        }
      break;
    case 'setIconSize':
        icon_type = $('panel-buttons-icons-type').value

        if(icon_type=='left')
        {
          action = 'setIconLeftSize';
        }
        else
        {
          action = 'setIconRightSize';
        }
      break;
  }
  
  /**
   *render button
   */
  new Ajax.Updater('buttonExample', '/web/index.php/workspace/buttonExample', {parameters: { button_action: action, value: value } ,asynchronous:true, evalScripts:false});
  
  /**
   *updateing button tools elements after render
   */
  switch(action)
  {
    case 'updateFont':
        $('show-dialog-buttons-font').value = value;
      break;
    case 'updateGradientColor1':
    case 'updateGradientColor2':
    case 'updateGradientColor3':
    case 'setGradientAngle':
    case 'setUseGradienColor2':
        $('gradient_preview_box').innerHTML = '<img src="/web/images/spinner_blue.gif">';
        new Ajax.Updater('gradient_preview_box', '/web/frontend_dev.php/workspace/gradientPreview', {asynchronous:true, evalScripts:false});
      break;
  }
}

//set button skin from gallery buttons
function setGalleryButton(id)
{    
  buttonUpdate(id,'setGalleryButton');
  
  if(Modalbox.initialized)
  {
    Modalbox.hide()
  }
}

//update small color picker area
function updateColorPickerArea(id)
{

  //gel color value
  color = $(id).value;
  color = color.split('-');

  //sel color background for color area
  colorArea = $(id+'Area');
  colorArea.style.background  = 'rgb('+color[0]+','+color[1]+','+color[2]+')';

}

function generateButtonsTypeOption(type)
{
  $('generateButtonsTypeOptionsBlock').innerHTML = '<img src="/web/images/spinner_blue.gif">';
  
  switch(type)
  {
    case 'custom':
        new Ajax.Updater('generateButtonsTypeOptionsBlock', '/web/frontend_dev.php/workspace/buttonsTypeCustom', {asynchronous:true, evalScripts:false});
      break;
    case 'cms':
        new Ajax.Updater('generateButtonsTypeOptionsBlock', '/web/frontend_dev.php/workspace/buttonsTypeCms', {asynchronous:true, evalScripts:true});
      break;
    case 'html':
        new Ajax.Updater('generateButtonsTypeOptionsBlock', '/web/frontend_dev.php/workspace/buttonsTypeHtml', {asynchronous:true, evalScripts:false});
      break;
  }
}

//element id counter
var imListItemCount = 1;

//insert new item
function im_insert_item()
{
  imListItemCount++;
  new Insertion.Bottom('imList', '<li id="item_'+imListItemCount+'" style="margin: 1px;"><input name="buttonsList[]" type="text"> <a href="javascript: im_delete_item(\'item_'+imListItemCount+'\')"><u>remove</u></a></li>');
}

//delete item by id
function im_delete_item(id)
{
  $(id).remove();
}

function updateButtonsData()
{
  updateColorPickerArea('fontColor');
  
  updateColorPickerArea('borderColor');
  
  updateColorPickerArea('innerBorderColor');
  
  updateColorPickerArea('shadowColor');
  
  updateColorPickerArea('backgroundColor');
  
  updateColorPickerArea('gradientColor1');
  
  updateColorPickerArea('gradientColor2');
  
  updateColorPickerArea('gradientColor3');
}


function buttons_icons_type(type)
{
  $('panel-buttons-icons-type').value = type;
  
  $('buttons-icons-type-name').innerHTML = ''+type+' icon';
}