/// <reference path="~/Scripts/webframe/webframe.segments.common.js" />
/// <reference path="~/Scripts/jquery-1.6.2-vsdoc.js" />

webframe.segmenttype.imagegallery = function (options)
{
  var itemRows;
  var editingRow;
  var jsonData;

  webframe.segments.common.GetSegmentData(options, function (segmentData, textStatus)
  {
    OpenDialog(segmentData, options.closeWithoutSaveCallback, options.saveAndCloseCallback);

    $('#playerSettingsToggle').click(function () { $('#playerSettings').toggle(); return false; });
    $('#playlistSettingsToggle').click(function () { $('#playlistSettings').toggle(); return false; });

    SetupData(segmentData);

    PopulateControls();
    SetupButtonHandlers();
    
  });

  function SetupButtonHandlers()
  {
    $('#btnImageBrowse').click(function ()
    {
      window.SetUrl = function (value)
      {
        $('#txtImageUrl').val(value);
        window.SetUrl = null;
      };

      OpenMediaItemSelector();
      return false;
    });

    $('#btnAdd').click(function ()
    {
      var itemInfo =
			{
			  id: itemRows.length,
			  name: $('#txtName').val(),
			  imageUrl: $('#txtImageUrl').val()
			};

      if (editingRow == null)
      {
        itemRows = itemRows.concat(itemInfo);
        InsertItemRow(itemInfo);
      }
      else
      {
        var rowIndex = GetItemRowIndexById(editingRow.id);
        itemRows[rowIndex].name = $('#txtName').val();
        itemRows[rowIndex].imageUrl = $('#txtImageUrl').val();
        PopulateControls();

        editingRow = null;
      }

      $('#txtName').val('');
      $('#txtImageUrl').val('');
    });
  }
  
  function OpenMediaItemSelector()
  { window.open('/ControlPanel/MediaCenter/selector.castle', '_blank', 'width=800, height=400, resizable, scrollbars'); }

  function GetItemRowIndexById(id)
  {
    var retVal = -1;
    $.each(itemRows, function (i, item)
    {
      if (item.id == id)
      {
        retVal = i;
        return false;
      }
    });
    return retVal;
  }

  function InsertItemRow(rowInfo)
  {
    $('#itemRows').append($.template(imageRowAdminHTML), rowInfo);
    var rowElement = $('#trItemId_' + rowInfo.id);

    var attachActionToRowButton = function (className, rowAction)
    {
      $('#trItemId_' + rowInfo.id + ' a.' + className).click(function ()
      {
        rowAction.call(null, GetItemRowIndexById(rowInfo.id));
        return false;
      });
    };

    attachActionToRowButton.call(null, 'DeleteItem', function (i)
    {
      itemRows.remove(i);
      rowElement.remove();
    });

    attachActionToRowButton.call(null, 'EditItem', function (i)
    {
      editingRow = itemRows[i];
      $('#txtName').val(editingRow.name);
      $('#txtImageUrl').val(editingRow.imageUrl);
    });

    attachActionToRowButton.call(null, 'MoveItemUp', function (i)
    {
      if (i > 0)
      {
        editingRow = itemRows[i];
        itemRows[i] = itemRows[i - 1];
        itemRows[i - 1] = editingRow;
        PopulateControls();
      }
      return false;
    });

    attachActionToRowButton.call(null, 'MoveItemDown', function (i)
    {
      if (i < itemRows.length - 1)
      {
        editingRow = itemRows[i];
        itemRows[i] = itemRows[i + 1];
        itemRows[i + 1] = editingRow;
        PopulateControls();
      }
      return false;
    });
  }

  function SetupData(segmentData)
  {
    if (!segmentData.DataAsJson.items)
    { segmentData.DataAsJson.items = []; }
    else if (!(segmentData.DataAsJson.items instanceof Array))
    {
      var tempItem = segmentData.DataAsJson.items;
      segmentData.DataAsJson.items = [];
      segmentData.DataAsJson.items[0] = tempItem;
    }

    segmentData.DataAsJson.items.remove = function (from, to)
    {
      var rest = this.slice((to || from) + 1 || this.length);
      this.length = from < 0 ? this.length + from : from;
      return this.push.apply(this, rest);
    };

    itemRows = segmentData.DataAsJson.items;
    jsonData = segmentData.DataAsJson;
  }

  function OpenDialog(segmentData, CloseWithoutSaveCallback, SaveAndCloseCallback)
  {
    var saveAction = $("#dialogSpace").find('form').attr('action');
    $("#dialogSpace").dialog(
		{
		  buttons:
			{
			  'Cancel': function ()
			  {
			    $(this).dialog('close');
			    if (CloseWithoutSaveCallback != null)
			    { CloseWithoutSaveCallback.call(); }
			  },
			  'Delete': function ()
			  { },
			  'Save': function ()
			  {
			    segmentData = UpdatePropertyDataFromForm(segmentData);
			    webframe.segments.common.SavePropertyData(segmentData, saveAction, function (updatedSegment)
			    { segmentData = updatedSegment; });
			  },
			  'OK': function ()
			  {
			    segmentData = UpdatePropertyDataFromForm(segmentData);
			    $(this).dialog('close');
			    webframe.segments.common.SavePropertyData(segmentData, saveAction, function (updatedSegment)
			    {
			      if (SaveAndCloseCallback != null)
			      { SaveAndCloseCallback.call(); }
			    });
			  }
			},
		  height: 520,
		  width: 800,

		  modal: false,
		  close: function ()
		  {
		    $("#dialogSpace").remove();
		    document.isDialogOpen = false;
		  }
		});
  }

  function PopulateControls()
  {
    $('.itemRowHtml').remove();
    $.each(itemRows, function ()
    { InsertItemRow(this); });
    console.log(jsonData);

    $('#chkShuffle').attr('checked', (jsonData.shuffle == 'true' ? 'checked' : ''));
    $('#chkDisplayNav').attr('checked', (jsonData.displayNav == 'true' ? 'checked' : ''));
    $('#txtHeight').val(jsonData.height || 200);
    $('#txtWidth').val(jsonData.width || 200);
    $('#selTransitionStyle').val(jsonData.transitionStyle);
    $('#txtTransitionTime').val(jsonData.transitionTime || '5');
  }

  function UpdatePropertyDataFromForm(segmentData)
  {
    jsonData.shuffle = $('#chkShuffle')[0].checked;
    jsonData.displayNav = $('#chkDisplayNav')[0].checked;
    jsonData.height = $('#txtHeight').val();
    jsonData.width = $('#txtWidth').val();
    jsonData.transitionStyle = $('#selTransitionStyle').val();
    jsonData.transitionTime = $('#txtTransitionTime').val();

    segmentData.DataAsJson = jsonData;
    segmentData.DataAsJson.items = itemRows;
    segmentData = webframe.segments.common.UpdatePropertyDataFromStandardControls(segmentData);

    return segmentData;
  }

  var imageRowAdminHTML =
	'<tr id="trItemId_${id}" class="itemRowHtml">' +
	'				<td>${name}</td>' +
	'				<td><a href="#" class="EditItem x-link"><img src="/Content/images/edit.gif" alt="Edit Audio" class="buttonLink" /></a></td>' +
	'				<td><a href="#" class="DeleteItem x-link"><img src="/Content/images/delete.gif" alt="Delete Audio" class="buttonLink" /></a></td>' +
	'				<td><a href="#" class="MoveItemUp x-link"><img src="/Content/images/up.gif" alt="Move Up" class="buttonLink" /></a></td>' +
	'				<td><a href="#" class="MoveItemDown x-link"><img src="/Content/images/down.gif" alt="Move Down" class="buttonLink" /></a></td>' +
  //'				<td><a href="#" class="TestItem x-link">Test</a></td>' +
	'</tr>';
}