// FILE Layout.js
// Contains JScript functions used to set the UI layout.


var c_navigationAreaWidth = 254;

function MainPageLayout(bannerImageWidth, bannerImageHeight)
{

   if (typeof (MainPageLayout._initialized) == 'undefined')
   {
      MainPageLayout.prototype.RecalculateLayout = RecalculateLayout;
      MainPageLayout.prototype.CalculateBannerAreaPosition = CalculateBannerAreaPosition;
      MainPageLayout.prototype.CalculateNavigationAreaPosition = CalculateNavigationAreaPosition;
      MainPageLayout.prototype.CalculateDetailsAreaPosition = CalculateDetailsAreaPosition;
      MainPageLayout.prototype.CalculateGlobalWrapperPosition = CalculateGlobalWrapperPosition;
   }
   MainPageLayout._initialized = true;

   this.globalWrapperArea = document.getElementById("globalWrapperArea");

   this.bannerOuterArea = document.getElementById("bannerOuterArea");
   this.bannerShadowedArea = document.getElementById("bannerShadowedArea");
   this.bannerClippingArea = document.getElementById("bannerClippingArea");
   var bannerShadowHolder = document.getElementById("bannerShadowHolder");

   this.navigationOuterArea = document.getElementById("navigationOuterArea");
   this.navigationShadowedArea = document.getElementById("navigationShadowedArea");
   this.navigationScrollerArea = document.getElementById("navigationScrollerArea");
   var navigationShadowHolder = document.getElementById("navigationShadowHolder");

   this.detailsOuterArea = document.getElementById("detailsOuterArea");
   this.detailsShadowedArea = document.getElementById("detailsShadowedArea");
   this.detailsScrollerArea = document.getElementById("detailsScrollerArea");
   var detailsShadowHolder = document.getElementById("detailsShadowHolder");

   this.bannerAreaShadow = new Shadow(bannerShadowHolder, this.bannerShadowedArea, "bannerArea");
   this.navigationAreaShadow = new Shadow(navigationShadowHolder, this.navigationShadowedArea, "navigationArea");
   this.detailsAreaShadow = new Shadow(detailsShadowHolder, this.detailsShadowedArea, "detailsArea");

   // Constant layout measures

   // horizontalGap: the horizontal space between the navigation area and the details area.
   // 10 + 2 where 2 accounts for the 1px border around elements.
   this.horizontalGap = 12;

   this.detailsAreaMinWidth = 630;
   this.detailsAreaMaxWidth = bannerImageWidth - c_navigationAreaWidth - this.horizontalGap;
   this.mainAreaMinHeight = 200;

   // verticalGap: the vertical space between the banner area and the nav/details area.
   // 10 + 2 where 2 accounts for the 1px border around elements.
   this.verticalGap = 12;

   this.pageMarginLeft = 20;
   this.pageMarginRight = 20;
   this.pageMarginTop = 20;
   this.pageMarginBottom = 20;

   this.panelMarginLeft = 0;
   this.panelMarginRight = 5;
   this.panelMarginTop = 10;
   this.panelMarginBottom = 10;

   this.bannerImageWidth = bannerImageWidth;
   this.bannerAreaHeight = bannerImageHeight;
   this.navigationAreaWidth = c_navigationAreaWidth;

   // Layout measures that will be recalculated at resize
   this.bannerAreaLeft = 0;
   this.bannerAreaTop = 0;
   this.bannerAreaWidth = 0;

   this.navigationAreaLeft = 0;
   this.navigationAreaTop = 0;
   this.navigationAreaHeight = 0;

   this.detailsAreaLeft = 0;
   this.detailsAreaTop = 0;
   this.detailsAreaWidth = 0;
   this.detailsAreaHeight = 0;

   return;


   function RecalculateLayout()
   {
      var pageWidth = GetPageWidth();
      var pageHeight = GetPageHeight();

      this.CalculateBannerAreaPosition(pageWidth, pageHeight);
      this.CalculateNavigationAreaPosition(pageWidth, pageHeight);
      this.CalculateDetailsAreaPosition(pageWidth, pageHeight);
      this.CalculateGlobalWrapperPosition(pageWidth, pageHeight);

      PlaceAbsolutePositionedControl(this.bannerOuterArea, this.bannerAreaLeft, this.bannerAreaTop);
      SizeAbsolutePositionedControl(this.bannerShadowedArea, this.bannerAreaWidth, this.bannerAreaHeight);
      PlaceAndSizeBannerClippingArea(this.bannerClippingArea, this.bannerAreaWidth, this.bannerAreaHeight);
      SetElementClip(this.bannerClippingArea);
      this.bannerAreaShadow.DropShadow();

      PlaceAbsolutePositionedControl(this.navigationOuterArea, this.navigationAreaLeft, this.navigationAreaTop);
      SizeAbsolutePositionedControl(this.navigationShadowedArea, this.navigationAreaWidth, this.navigationAreaHeight);
      PlaceAndSizeAbsolutePositionedControl(this.navigationScrollerArea,
         this.panelMarginLeft, this.panelMarginTop,
         this.navigationAreaWidth - (this.panelMarginLeft + this.panelMarginRight),
         this.navigationAreaHeight - (this.panelMarginTop + this.panelMarginBottom));
      this.navigationAreaShadow.DropShadow();

      PlaceAbsolutePositionedControl(this.detailsOuterArea, this.detailsAreaLeft, this.detailsAreaTop);
      SizeAbsolutePositionedControl(this.detailsShadowedArea, this.detailsAreaWidth, this.detailsAreaHeight);
      PlaceAndSizeAbsolutePositionedControl(this.detailsScrollerArea,
         this.panelMarginLeft, this.panelMarginTop,
         this.detailsAreaWidth - (this.panelMarginLeft + this.panelMarginRight),
         this.detailsAreaHeight - (this.panelMarginTop + this.panelMarginBottom));
      this.detailsAreaShadow.DropShadow();

      SizeAbsolutePositionedControl(this.globalWrapperArea, this.globalWrapperWidth, this.globalWrapperHeight);
   }

   function CalculateBannerAreaPosition(pageWidth, pageHeight)
   {
      var bannerAreaMinWidth = this.navigationAreaWidth + this.horizontalGap + this.detailsAreaMinWidth;

      this.bannerAreaWidth = pageWidth - (this.pageMarginLeft + this.pageMarginRight);
      if (this.bannerAreaWidth < bannerAreaMinWidth) this.bannerAreaWidth = bannerAreaMinWidth;
      if (this.bannerAreaWidth > this.bannerImageWidth) this.bannerAreaWidth = this.bannerImageWidth;

      this.bannerAreaLeft = this.pageMarginLeft;
      this.bannerAreaTop = this.pageMarginTop;
   }

   function CalculateNavigationAreaPosition(pageWidth, pageHeight)
   {
      this.navigationAreaLeft = this.bannerAreaLeft;
      this.navigationAreaTop = this.bannerAreaTop + this.bannerAreaHeight + this.verticalGap;
      this.navigationAreaHeight = pageHeight - (this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.pageMarginBottom);

      if (this.navigationAreaHeight < this.mainAreaMinHeight) this.navigationAreaHeight = this.mainAreaMinHeight;
   }

   function CalculateDetailsAreaPosition(pageWidth, pageHeight)
   {
      this.detailsAreaLeft = this.navigationAreaLeft + this.navigationAreaWidth + this.horizontalGap;
      this.detailsAreaTop = this.navigationAreaTop;
      this.detailsAreaWidth = this.bannerAreaWidth - (this.navigationAreaWidth + this.horizontalGap);
      this.detailsAreaHeight = this.navigationAreaHeight;
   }

   function CalculateGlobalWrapperPosition(pageWidth, pageHeight)
   {
      this.globalWrapperWidth = this.pageMarginLeft + this.bannerAreaWidth + this.pageMarginRight;
      this.globalWrapperHeight = this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.navigationAreaHeight + this.pageMarginBottom;
   }

}


function ViewArticleLayout(bannerImageWidth, bannerImageHeight)
{

   if (typeof (ViewArticleLayout._initialized) == 'undefined')
   {
      ViewArticleLayout.prototype.RecalculateLayout = RecalculateLayout;
      ViewArticleLayout.prototype.CalculateBannerAreaPosition = CalculateBannerAreaPosition;
      ViewArticleLayout.prototype.CalculateDetailsAreaPosition = CalculateDetailsAreaPosition;
      ViewArticleLayout.prototype.CalculateGlobalWrapperPosition = CalculateGlobalWrapperPosition;
   }
   ViewArticleLayout._initialized = true;

   this.globalWrapperArea = document.getElementById("globalWrapperArea");

   this.bannerOuterArea = document.getElementById("bannerOuterArea");
   this.bannerShadowedArea = document.getElementById("bannerShadowedArea");
   this.bannerClippingArea = document.getElementById("bannerClippingArea");
   var bannerShadowHolder = document.getElementById("bannerShadowHolder");

   this.detailsOuterArea = document.getElementById("detailsOuterArea");
   this.detailsShadowedArea = document.getElementById("detailsShadowedArea");
   this.detailsIFrameArea = document.getElementById("detailsIFrameArea");
   var detailsShadowHolder = document.getElementById("detailsShadowHolder");

   this.bannerAreaShadow = new Shadow(bannerShadowHolder, this.bannerShadowedArea, "bannerArea");
   this.detailsAreaShadow = new Shadow(detailsShadowHolder, this.detailsShadowedArea, "detailsArea");

   // Constant layout measures

   // verticalGap: the vertical space between the banner area and the nav/details area.
   // 10 + 2 where 2 accounts for the 1px border around elements.
   this.verticalGap = 12;

   this.detailsAreaMinWidth = 700;
   this.detailsAreaMinHeight = 200;
   this.detailsAreaMaxWidth = bannerImageWidth;

   this.pageMarginLeft = 20;
   this.pageMarginRight = 20;
   this.pageMarginTop = 20;
   this.pageMarginBottom = 20;

   this.panelMarginLeft = 5;
   this.panelMarginRight = 5;
   this.panelMarginTop = 30;
   this.panelMarginBottom = 5;

   this.bannerImageWidth = bannerImageWidth;
   this.bannerAreaHeight = bannerImageHeight;

   // Layout measures that will be recalculated at resize
   this.bannerAreaLeft = 0;
   this.bannerAreaTop = 0;
   this.bannerAreaWidth = 0;

   this.detailsAreaLeft = 0;
   this.detailsAreaTop = 0;
   this.detailsAreaWidth = 0;
   this.detailsAreaHeight = 0;

   this.iframeLeft = 0;
   this.iframeTop = 0;
   this.iframeWidth = 0;
   this.iframeHeight = 0;

   return;


   function RecalculateLayout()
   {
      var pageWidth = GetPageWidth();
      var pageHeight = GetPageHeight();

      this.CalculateBannerAreaPosition(pageWidth, pageHeight);
      this.CalculateDetailsAreaPosition(pageWidth, pageHeight);
      this.CalculateGlobalWrapperPosition(pageWidth, pageHeight);

      PlaceAbsolutePositionedControl(this.bannerOuterArea, this.bannerAreaLeft, this.bannerAreaTop);
      SizeAbsolutePositionedControl(this.bannerShadowedArea, this.bannerAreaWidth, this.bannerAreaHeight);
      PlaceAndSizeBannerClippingArea(this.bannerClippingArea, this.bannerAreaWidth, this.bannerAreaHeight);
      SetElementClip(this.bannerClippingArea);
      this.bannerAreaShadow.DropShadow();

      PlaceAbsolutePositionedControl(this.detailsOuterArea, this.detailsAreaLeft, this.detailsAreaTop);
      SizeAbsolutePositionedControl(this.detailsShadowedArea, this.detailsAreaWidth, this.detailsAreaHeight);
      PlaceAndSizeAbsolutePositionedControl(this.detailsIFrameArea,
         this.iframeLeft, this.iframeTop,
         this.iframeWidth, this.iframeHeight);
      this.detailsAreaShadow.DropShadow();

      SizeAbsolutePositionedControl(this.globalWrapperArea, this.globalWrapperWidth, this.globalWrapperHeight);
   }

   function CalculateBannerAreaPosition(pageWidth, pageHeight)
   {
      var bannerAreaMinWidth = this.detailsAreaMinWidth;

      this.bannerAreaWidth = pageWidth - (this.pageMarginLeft + this.pageMarginRight);
      if (this.bannerAreaWidth < bannerAreaMinWidth) this.bannerAreaWidth = bannerAreaMinWidth;
      if (this.bannerAreaWidth > this.bannerImageWidth) this.bannerAreaWidth = this.bannerImageWidth;

      this.bannerAreaLeft = this.pageMarginLeft;
      this.bannerAreaTop = this.pageMarginTop;
   }

   function CalculateDetailsAreaPosition(pageWidth, pageHeight)
   {
      this.detailsAreaLeft = this.bannerAreaLeft;
      this.detailsAreaTop = this.bannerAreaTop + this.bannerAreaHeight + this.verticalGap;
      this.detailsAreaWidth = this.bannerAreaWidth;
      this.detailsAreaHeight = pageHeight - (this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.pageMarginBottom);

      if (this.detailsAreaHeight < this.detailsAreaMinHeight) this.detailsAreaHeight = this.detailsAreaMinHeight;

      this.iframeLeft = this.panelMarginLeft;
      this.iframeTop = this.panelMarginTop;
      this.iframeWidth = this.detailsAreaWidth - (this.panelMarginLeft + this.panelMarginRight);
      this.iframeHeight = this.detailsAreaHeight - (this.panelMarginTop + this.panelMarginBottom);

      if (browserType == "Firefox" || browserType == "Chrome" || browserType == "Safari")
      {
         // It seems that MsIE includes the border in the iframe size.
         // "Firefox", "Chrome" and "Safari" do not count the border in the iframe size.
         // As a result, we need to reduce the iframe size with 4 for "Firefox", "Chrome" and "Safari".
         this.iframeWidth -= 4;
         this.iframeHeight -= 4;
      }

   }

   function CalculateGlobalWrapperPosition(pageWidth, pageHeight)
   {
      this.globalWrapperWidth = this.pageMarginLeft + this.bannerAreaWidth + this.pageMarginRight;
      this.globalWrapperHeight = this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.detailsAreaHeight + this.pageMarginBottom;
   }

}

function ContactPageLayout(bannerImageWidth, bannerImageHeight, messageTextClientId)
{

   if (typeof (ContactPageLayout._initialized) == 'undefined')
   {
      ContactPageLayout.prototype.RecalculateLayout = RecalculateLayout;
      ContactPageLayout.prototype.CalculateBannerAreaPosition = CalculateBannerAreaPosition;
      ContactPageLayout.prototype.CalculateDetailsAreaPosition = CalculateDetailsAreaPosition;
      ContactPageLayout.prototype.CalculateMessageAreaAize = CalculateMessageAreaAize;
      ContactPageLayout.prototype.CalculateGlobalWrapperPosition = CalculateGlobalWrapperPosition;
   }
   ContactPageLayout._initialized = true;

   this.globalWrapperArea = document.getElementById("globalWrapperArea");

   this.bannerOuterArea = document.getElementById("bannerOuterArea");
   this.bannerShadowedArea = document.getElementById("bannerShadowedArea");
   this.bannerClippingArea = document.getElementById("bannerClippingArea");
   var bannerShadowHolder = document.getElementById("bannerShadowHolder");

   this.detailsOuterArea = document.getElementById("detailsOuterArea");
   this.detailsShadowedArea = document.getElementById("detailsShadowedArea");
   this.messageArea = document.getElementById("messageArea");
   this.messageText = document.getElementById(messageTextClientId);
   var detailsShadowHolder = document.getElementById("detailsShadowHolder");

   this.bannerAreaShadow = new Shadow(bannerShadowHolder, this.bannerShadowedArea, "bannerArea");
   this.detailsAreaShadow = new Shadow(detailsShadowHolder, this.detailsShadowedArea, "detailsArea");

   // verticalGap: the vertical space between the banner area and the nav/details area.
   // 10 + 2 where 2 accounts for the 1px border around elements.
   this.verticalGap = 12;

   // Constant layout measures
   this.detailsAreaMinWidth = 700;
   this.detailsAreaMaxWidth = bannerImageWidth;   this.textAreaMinHeight = 200;
   this.spaceBelowMessageArea = 70;
   this.contactMessageAreaMargin = 20;
   
   this.pageMarginLeft = 20;
   this.pageMarginRight = 20;
   this.pageMarginTop = 20;
   this.pageMarginBottom = 20;

   this.bannerImageWidth = bannerImageWidth;
   this.bannerAreaHeight = bannerImageHeight;

   // Layout measures that will be recalculated at resize
   this.bannerAreaLeft = 0;
   this.bannerAreaTop = 0;
   this.bannerAreaWidth = 0;

   this.detailsAreaLeft = 0;
   this.detailsAreaTop = 0;
   this.detailsAreaWidth = 0;
   this.detailsAreaHeight = 0;

   this.messageAreaWidth = 0;
   this.messageAreaHeight = 0;

   return;


   function RecalculateLayout()
   {
      var pageWidth = GetPageWidth();
      var pageHeight = GetPageHeight();

      this.CalculateBannerAreaPosition(pageWidth, pageHeight);
      this.CalculateDetailsAreaPosition(pageWidth, pageHeight);
      this.CalculateMessageAreaAize();
      this.CalculateGlobalWrapperPosition(pageWidth, pageHeight);

      PlaceAbsolutePositionedControl(this.bannerOuterArea, this.bannerAreaLeft, this.bannerAreaTop);
      SizeAbsolutePositionedControl(this.bannerShadowedArea, this.bannerAreaWidth, this.bannerAreaHeight);
      PlaceAndSizeBannerClippingArea(this.bannerClippingArea, this.bannerAreaWidth, this.bannerAreaHeight);
      SetElementClip(this.bannerClippingArea);
      this.bannerAreaShadow.DropShadow();

      PlaceAbsolutePositionedControl(this.detailsOuterArea, this.detailsAreaLeft, this.detailsAreaTop);
      SizeAbsolutePositionedControl(this.detailsShadowedArea, this.detailsAreaWidth, this.detailsAreaHeight);
      this.detailsAreaShadow.DropShadow();

      PlaceAndSizeAbsolutePositionedControl(this.messageArea, 20, 0, this.messageAreaWidth, this.messageAreaHeight);
      PlaceAndSizeAbsolutePositionedControl(this.messageText, 0, 0, this.messageAreaWidth, this.messageAreaHeight);
      
      SizeAbsolutePositionedControl(this.globalWrapperArea, this.globalWrapperWidth, this.globalWrapperHeight);
   }

   function CalculateBannerAreaPosition(pageWidth, pageHeight)
   {
      var bannerAreaMinWidth = this.detailsAreaMinWidth;

      this.bannerAreaWidth = pageWidth - (this.pageMarginLeft + this.pageMarginRight);
      if (this.bannerAreaWidth < bannerAreaMinWidth) this.bannerAreaWidth = bannerAreaMinWidth;
      if (this.bannerAreaWidth > this.bannerImageWidth) this.bannerAreaWidth = this.bannerImageWidth;

      this.bannerAreaLeft = this.pageMarginLeft;
      this.bannerAreaTop = this.pageMarginTop;
   }

   function CalculateDetailsAreaPosition(pageWidth, pageHeight)
   {
      var mainAreaMinHeight = this.messageArea.offsetTop + this.textAreaMinHeight + this.spaceBelowMessageArea;

      this.detailsAreaLeft = this.bannerAreaLeft;
      this.detailsAreaTop = this.bannerAreaTop + this.bannerAreaHeight + this.verticalGap;
      this.detailsAreaWidth = this.bannerAreaWidth;
      this.detailsAreaHeight = pageHeight - (this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.pageMarginBottom);
      if(this.detailsAreaHeight < mainAreaMinHeight) this.detailsAreaHeight = mainAreaMinHeight;
   }

   function CalculateMessageAreaAize()
   {
      this.messageAreaWidth = this.detailsAreaWidth - 2 * this.contactMessageAreaMargin;
      this.messageAreaHeight = this.detailsAreaHeight - this.messageArea.offsetTop - this.spaceBelowMessageArea;
   }
   
   function CalculateGlobalWrapperPosition(pageWidth, pageHeight)
   {
      this.globalWrapperWidth = this.pageMarginLeft + this.bannerAreaWidth + this.pageMarginRight;
      this.globalWrapperHeight = this.pageMarginTop + this.bannerAreaHeight + this.verticalGap + this.detailsAreaHeight + this.pageMarginBottom;
   }

}

function PlaceAndSizeBannerClippingArea(htmlElement, bannerAreaWidth, bannerAreaHeight)
{
   PlaceAbsolutePositionedControl(htmlElement, 2, 2);
   SizeAbsolutePositionedControl(htmlElement, bannerAreaWidth - 4, bannerAreaHeight - 4);
}

function PlaceAndSizeAbsolutePositionedControl(htmlElement, left, top, width, height)
{
   PlaceAbsolutePositionedControl(htmlElement, left, top);
   SizeAbsolutePositionedControl(htmlElement, width, height);
}

function PlaceAbsolutePositionedControl(htmlElement, left, top)
{
   htmlElement.style["left"] = left.toString() + "px";
   htmlElement.style["top"] = top.toString() + "px";
}

function SizeAbsolutePositionedControl(htmlElement, width, height)
{
   htmlElement.style["width"] = width.toString() + "px";
   htmlElement.style["height"] = height.toString() + "px";
}

function SetElementClip(htmlElement)
{
   var elementWidth = parseInt(htmlElement.style["width"]);
   var elementHeight = parseInt(htmlElement.style["height"]);

   htmlElement.style["clip"] = "rect(0px " + elementWidth.toString() + "px " + elementHeight.toString() + "px 0px)";

}