/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("OS.Web");

OS.Web.PhotoSliderControl = function(element) {
  OS.Web.PhotoSliderControl.initializeBase(this, [element]);    
  
  this._cols        = 0;
  this._imageWidth  = 0;
  this._imageHeight = 0;
  this._creatorId   = "";
  this._setId       = "";
  
  this._scroller       = this._findScroller(element);  
  this._itemsContainer = this._findItemsContainer(element);
  this._btnPrevious    = this._findBtnPrev(element);
  this._btnNext        = this._findBtnNext(element);
  this._lblItemSummary = this._find_lblItemSummary(element);  
  this._lblCounter     = this._find_lblCounter(element);
  
  this._currentPosition = 0;
  this._fetchPosition = 0;
  this._itemsCount = 0;
  this._totalCount      = 0;
  this._dataSource      = [];
  this._loading         = false;  

  this.VisiblePosition = 0;  
  this.Step = 0;  
  this.ItemContainerTag = "td";
  this.CurrentItem = null;  
}

OS.Web.PhotoSliderControl.prototype = {
  initialize: function() {
    OS.Web.PhotoSliderControl.callBaseMethod(this, 'initialize');

    var btnPreviousClick = Function.createDelegate(this, this._previous);

    $addHandler(this._btnPrevious, "click", btnPreviousClick);

    var btnNextClick = Function.createDelegate(this, this._next);

    $addHandler(this._btnNext, "click", btnNextClick);

    this.Step = this._imageWidth + 6;
    this._load();
  },

  dispose: function() {
    OS.Web.PhotoSliderControl.callBaseMethod(this, 'dispose');
  },

  _findScroller: function(element) {
    var divs = element.getElementsByTagName("div");
    var div = null;

    for (var i = 0; i < divs.length; i++) {
      if (divs[i].getAttribute("name") == "pnlScroller")
        div = divs[i];
    }

    if (div == null) {
      throw new Error("Can't find panel HTML element");
      return;
    }

    return div;
  },

  _findItemsContainer: function(element) {
    var trs = element.getElementsByTagName("tr");
    var tr = null;

    for (var i = 0; i < trs.length; i++) {
      if (trs[i].getAttribute("name") == "tblTR")
        tr = trs[i];
    }

    if (tr == null) {
      throw new Error("Can't find items container HTML element");
      return;
    }

    return tr;
  },

  _findBtnPrev: function(element) {
    var imgs = element.getElementsByTagName("img");
    var img = null;

    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].getAttribute("name") == "btnPrev")
        img = imgs[i];
    }

    if (img == null) {
      throw new Error("Can't find prev. button HTML element");
      return;
    }

    return img;
  },

  _findBtnNext: function(element) {
    var imgs = element.getElementsByTagName("img");
    var img = null;

    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].getAttribute("name") == "btnNext")
        img = imgs[i];
    }

    if (img == null) {
      throw new Error("Can't find next button HTML element");
      return;
    }

    return img;
  },

  _find_lblItemSummary: function(element) {
    var spans = element.getElementsByTagName("div");
    var span = null;

    for (var i = 0; i < spans.length; i++) {
      if (spans[i].getAttribute("name") == "lblItemSummary")
        span = spans[i];
    }

    if (span == null) {
      throw new Error("Can't find summary HTML element");
      return;
    }

    return span;
  },

  _find_lblCounter: function(element) {
    var spans = element.getElementsByTagName("div");
    var span = null;

    for (var i = 0; i < spans.length; i++) {
      if (spans[i].getAttribute("name") == "lblCounter")
        span = spans[i];
    }

    if (span == null) {
      throw new Error("Can't find counter HTML element");
      return;
    }

    return span;
  },

  _getItems: function(position, count, doQueryForTotalCount, callback) {
    this._loading = true;
    var onSuccessDelegate = Function.createDelegate(this, callback);
    if (this._dataSource[position] != null) {
      var result = { "TotalCount": this._itemsCount, "Photos": this._dataSource[position] };
      onSuccessDelegate(result);
      return;
    }
    OS.TC.Portal.WebSite.Modules.Photos.WebServices.Photos.GetPhotosByCreatorIdOrSetId(this._creatorId, this._setId, position, count, doQueryForTotalCount, onSuccessDelegate);
  },

  _parseItems: function(position, photos) {
    for (var i = 0; i < photos.length; i++) {
      this._dataSource[position + i] = photos[i];
    }

    this._loading = false;
    return photos.length;
  },

  _load: function() {
    this._dataSource[this._totalCount - 1] = null;
    this._fetchPosition = (this._currentPosition) ? this._currentPosition - 1 : 0;
    if (this._fetchPosition >= this._totalCount - this._cols) {
      this._fetchPosition = this._totalCount - this._cols;
      if (this._fetchPosition < 0) this._fetchPosition = 0;
    }

    this._getItems(this._fetchPosition, this._cols, true, function(result) {
      if (result == null)
        return;
      var photosCount = this._parseItems(this._fetchPosition, result.Photos);
      this._itemsCount = result.TotalCount;
      for (var i = this._fetchPosition; i < this._fetchPosition + photosCount; i++) {
        this._addItem(this._dataSource[i], i);
      }

      var selectedItem = this._find(this._currentPosition);
      if (selectedItem) {
        Sys.UI.DomElement.toggleCssClass(selectedItem, "Photos_PhotoSlider_HighLightColor");
      }
      var sliderWidth = Math.round(this._cols * 100 / this._totalCount);
      if (sliderWidth < 99) {
        this._lblCounter.style.width = sliderWidth + "%";
      }
      else {
        this._lblItemSummary.style.visibility = "hidden";
      }
      this._checkButtons();
    });
  },

  _checkButtons: function() {
    this._btnPrevious.style.visibility = (this._fetchPosition == 0) ? "hidden" : "visible";
    this._btnNext.style.visibility = (this._fetchPosition + this._cols > this._totalCount - 1) ? "hidden" : "visible";
    this._lblCounter.style.left = Math.round(this._fetchPosition * 100 / this._totalCount) + "%";
  },

  _find: function(itemNum) {
    var itemsContainerItems = this._itemsContainer.getElementsByTagName(this.ItemContainerTag);

    for (i = 0; i < itemsContainerItems.length; i++) {
      if (itemsContainerItems[i].itemNum == itemNum)
        return itemsContainerItems[i];
    }

    return null;
  },

  _first: function() {
    OSNotImplemented();
  },

  _previous: function() {
    if (this._loading)
      return;

    if (this._fetchPosition == 0)
      return;

    this._fetchPosition--;

    this._getItems(this._fetchPosition, 1, false, function(result) {
      if (result == null)
        return;

      var photosCount = this._parseItems(this._fetchPosition, result.Photos);

      this._checkButtons();

      var itemContainer = this._find(this._fetchPosition);
      if (itemContainer == null) {
        var currentItemContainer = this._find(this._fetchPosition + 1);
        itemContainer = this._addItemBefore(this._dataSource[this._fetchPosition], this._fetchPosition, currentItemContainer);
      }
      this._scroller.scrollLeft -= this.Step;
    });
  },

  _next: function() {
    if (this._loading)
      return;

    if (this._fetchPosition >= this._totalCount - this._cols)
      return;

    this._fetchPosition++;
    var rightItemPos = this._fetchPosition + this._cols - 1;

    this._getItems(rightItemPos, 1, false, function(result) {
      if (result == null)
        return;

      var photosCount = this._parseItems(rightItemPos, result.Photos);

      this._checkButtons();

      var itemContainer = this._find(rightItemPos);
      if (itemContainer == null) {
        itemContainer = this._addItem(this._dataSource[rightItemPos], rightItemPos);
      }
      this._scroller.scrollLeft += this.Step;
    });
  },

  _last: function() {
    OSNotImplemented();
  },

  _addItem: function(item, itemNum) {
    if (item == null) return;

    var itemContainer = document.createElement(this.ItemContainerTag);

    itemContainer.style.padding = "3px";
    itemContainer.itemNum = itemNum;
    itemContainer.onmouseover = itemContainer.onmouseout = function() {
      Sys.UI.DomElement.toggleCssClass(itemContainer, "Photos_PhotoSlider_HoverEffect");
    }

    if (this._setId == "00000000-0000-0000-0000-000000000000") {
      itemContainer.innerHTML = "<a href='" + item.infoUrl + "&PhotoIndex=" + Number(item.id + 1) + "'><img src='" + item.photoUrl +
                                "' style='border:0;width:" + this._imageWidth + "px;height:" + this._imageHeight + "px;'/></a>";
    }
    else {
      itemContainer.innerHTML = "<a href='" + item.infoUrl + "&SetId=" + this._setId + "&PhotoIndex=" + Number(item.id + 1) + "'><img src='" + item.photoUrl +
                                "' style='border:0;width:" + this._imageWidth + "px;height:" + this._imageHeight + "px;'/></a>";
    }
    this._itemsContainer.appendChild(itemContainer);
    return itemContainer;
  },

  _addItemBefore: function(item, itemNum, previousItemContainer) {
    if (item == null) return;

    var itemContainer = document.createElement(this.ItemContainerTag);

    itemContainer.style.padding = "3px";
    itemContainer.itemNum = itemNum;
    itemContainer.onmouseover = itemContainer.onmouseout = function() {
      Sys.UI.DomElement.toggleCssClass(itemContainer, "Photos_PhotoSlider_HoverEffect");
    }

    if (this._setId == "00000000-0000-0000-0000-000000000000") {
      itemContainer.innerHTML = "<a href='" + item.infoUrl + "&PhotoIndex=" + Number(item.id + 1) + "'><img src='" + item.photoUrl +
                                "' style='border:0;width:" + this._imageWidth + "px;height:" + this._imageHeight + "px;'/></a>";
    }
    else {
      itemContainer.innerHTML = "<a href='" + item.infoUrl + "&SetId=" + this._setId + "&PhotoIndex=" + Number(item.id + 1) + "'><img src='" + item.photoUrl +
                                "' style='border:0;width:" + this._imageWidth + "px;height:" + this._imageHeight + "px;'/></a>";
    }

    this._itemsContainer.insertBefore(itemContainer, previousItemContainer);
    return itemContainer;
  },

  get_Cols: function() {
    return this._cols;
  },

  set_Cols: function(value) {
    this._cols = value;
  },

  get_ImageHeight: function() {
    return this._imageHeight;
  },

  set_ImageHeight: function(value) {
    this._imageHeight = value;
  },

  get_ImageWidth: function() {
    return this._imageWidth;
  },

  set_ImageWidth: function(value) {
    this._imageWidth = value;
  },

  get_CreatorId: function() {
    return this._creatorId;
  },

  set_CreatorId: function(value) {
    this._creatorId = value;
  },

  get_SetId: function() {
    return this._setId;
  },

  set_SetId: function(value) {
    this._setId = value;
  },

  get_CurrentPosition: function() {
    return this._currentPosition;
  },

  set_CurrentPosition: function(value) {
    this._currentPosition = value;
  },

  get_TotalCount: function() {
    return this._totalCount;
  },

  set_TotalCount: function(value) {
    this._totalCount = value;
  }
}
OS.Web.PhotoSliderControl.registerClass('OS.Web.PhotoSliderControl', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();