﻿$(document).ready(function() {
  initScrollArea();
});

//The area that will be scrolled sideways
var scrollArea;
//Bredden på det synlige område
var mainAreaWidth;
//Antallet af sider i scrollbaren
var antalSider = 0;
//Den aktuelle side
var currentPage = 1;
//
var leftArrow;
var contentListItems;
var rightArrow;
var contentListItemPadding = 0;
var isScrolling = false;
var scrollAreaWidth = 0;
var isTest = getURLParam("test") != "";
/*
* Readies the scrollarea
*/
function initScrollArea() {
  //All items in the scrollarea
  scrollAreaWidth = 0;
  contentListItems = $(".contentListItem").not(".hidden");
  scrollArea = $("#scrollArea");
  mainAreaWidth = parseInt($("#mainAreaCenter").width());
  try {
    contentListItemPadding = parseInt(contentListItems.css("margin-right")) + parseInt(contentListItems.css("padding-right").replace("px", ""));
  } catch (e) {
    //Der er intet indhold
  }
  
  leftArrow = $("#leftArrow");
  rightArrow = $("#rightArrow");

  for (var i = 0; i < contentListItems.length; i++) {
    var contentListItem = $(contentListItems[i])
    var marginRight = parseInt(contentListItem.css("margin-right"));
    var marginLeft = parseInt(contentListItem.css("margin-left"));
    scrollAreaWidth += contentListItem.outerWidth() + marginRight + marginLeft;
    //Tjek om der er noget indhold der kan vises
    //Ellers skal indholdslinket skjules

    //if (contentListItem.next().find(".contentItemScrollContent").text().trim() == "")
    //contentListItem.children(".readMore").css("display", "none");
  }
  scrollArea.width(scrollAreaWidth);
  scrollArea.css("opacity", 0);
  scrollArea.animate({
    opacity: 1
  }, 1000);

  if (scrollAreaWidth > mainAreaWidth) {
    //Looper for at få det korrekte antal sider
    antalSider = findPage();

    leftArrow.bind("click", { isRight: false, speed: 500 }, doScroll);
    rightArrow.bind("click", { isRight: true, speed: 500 }, doScroll);
  }
  setArrows();
  $(".contentItem").bind("click", function() {
    toggleContent(this);
  });

  $(".readMore").bind("click", function() {
    $(this.parentNode).next().trigger("click");
  });

  $(".contentItemClose").bind("click", function() {
    toggleContent(this);
  });

  //Scroll to a predefined page
  if (getURLParam("show")) {
    var show = "ele" + getURLParam("show");
    doScroll({ data: { speed: 500, element: show} });
  }
}

//Finds the page from a width
//If no width is defined, the total scrollareawidth will be used
function findPage(width) {
  var tmpAntalSider = 0;
  var remainingWidth = scrollAreaWidth;
  if (width != null)
    remainingWidth = width == 0 ? 1 : width + 1;

  while (remainingWidth > 0) {
    tmpAntalSider++;
    remainingWidth = remainingWidth - contentListItemPadding - mainAreaWidth;
    if (remainingWidth < 1)
      break;
  }
  return tmpAntalSider;
}

function doScroll(e) {
  var gotopage = 0;
  var newXPos = 1;
  var tempXPos = 0;

  if (e.data.element) {

    var lengthToElement = 0;
    for (var i = 0; i < contentListItems.length; i++) {
      if (contentListItems[i].id == e.data.element)
        break;
      lengthToElement += $(contentListItems[i]).outerWidth();
    }
    gotopage = findPage(lengthToElement);
  }

  if (!isScrolling) {

    toggleIsScrolling();
    oldXPos = parseInt(scrollArea.css("left").replace("px", ""));

    if (gotopage == 0) {
      newXPos = e.data.isRight ? oldXPos - mainAreaWidth - contentListItemPadding : oldXPos + mainAreaWidth + contentListItemPadding;

      if (e.data.isRight)
        currentPage++;
      else
        currentPage--;
    } else {
      if (currentPage != gotopage) {
        newXPos = -((gotopage - 1) * mainAreaWidth + (gotopage - 1) * contentListItemPadding);
        if (currentPage > gotopage)
          e.data.isRight = true;
        else
          e.data.isRight = false;
      }

      currentPage = gotopage;
    }

    if (newXPos != 1) {
      tempXPos = e.data.isRight ? oldXPos + 30 : oldXPos - 30;

      scrollArea.animate({
        left: tempXPos
      }, 200);

      scrollArea.animate({
        left: newXPos
      }, 1000, function() {
        toggleIsScrolling();
        if (e.data.element)
          $("#" + e.data.element).children(".readMore").trigger("click");
      });
    } else if (e.data.element) {
      $("#" + e.data.element).children(".readMore").trigger("click");
      toggleIsScrolling();
    }
    setArrows();

  }
}

function setArrows(hide) {
  if (hide) {
    toggleArrow("#leftArrow", false);
    toggleArrow("#rightArrow", false);
    return;
  }
  if (currentPage == 1 || antalSider < 2)
    toggleArrow("#leftArrow", false);
  else
    toggleArrow("#leftArrow", true);

  if (currentPage == antalSider || antalSider < 2)
    toggleArrow("#rightArrow", false);
  else
    toggleArrow("#rightArrow", true);
}

function toggleArrow(arrowID, show) {
  arrow = $(arrowID);
  if (!show) {
    arrow.css("display", "none");
    return;
  }
  if (arrow.css("display") == "none" || show)
    arrow.css("display", "block");
  else
    arrow.css("display", "none");
}

function toggleIsScrolling() {
  isScrolling = !isScrolling;
}

var currentContentItem;
function toggleContent(contentListItem) {

  if (!currentContentItem) {
    //Show the Content
    currentContentItem = $(contentListItem);
    var contentItemHolder = $("#contentItemHolder");
    var contentItemHolderContent = $("#contentItemHolderContent");
    contentItemHolder.css("display", "block");
    contentItemHolder.css("opacity", 0);
    contentItemHolderContent.css("opacity", 0);


    var c = currentContentItem.children();
    for (var i = 0; i < c.length; i++)
      $("#contentItemHolderContent")[0].appendChild(c[i]);
    contentItemHolder.animate({
      opacity: 1
    }, 700, function() {
      contentItemHolderContent.animate({
        opacity: 1
      }, 700, function() { setArrows(true); });
    });

  } else {
    //Hide the content
    var contentItemHolder = $("#contentItemHolder");
    var contentItemHolderContent = $("#contentItemHolderContent");

    contentItemHolderContent.animate({
      opacity: 0
    }, 700, function() {
      contentItemHolder.animate({
        opacity: 0
      }, 400, function() {

        //currentContentItem.append(contentItemHolderContent.children());
        var c = contentItemHolderContent.children();
        for (var i = 0; i < c.length; i++)
          currentContentItem[0].appendChild(c[i]);
        currentContentItem = null;
        contentItemHolder.css("display", "none");
        setArrows();
      });
    });
  }
}

function getGlassesPage(pageno) {
  if (isTest) {
    var rtnData = "";
    pageno = pageno || 1;
    jQuery.ajax({
    url: "http://www.nytsyn.dk/AJAX-Brillemode-Briller.aspx?ID=363&PID=2881&Action=0&currentPage=" + pageno,
      async: false,
      success: function(d) {
      rtnData = d.substr(d.indexOf("<body>") + 6, d.indexOf("</body>"));
        jQuery("#centerRow").prepend(d);
        
      }
    });
    return rtnData;
  }
}