/**
 * The name space of the "explore the truck" is "microsite.explore".
 */
microsite.explore = function()
{
  DWRHandler.registerUpdateFunction('detailUpdateBean',
    function(updateBean)
    {
      microsite.explore.showDetail(updateBean);
    });
  DWRHandler.registerUpdateFunction('subDetailUpdateBean',
    function(updateBean)
    {
      microsite.explore.updateSubDetail(updateBean);
    });

  //hotSpots is a two dimensional array. Both dimensions are built as an associative array.
  var hotSpots = {};

  // popupVariants is an array that contains the variant definitions that is shown in a popup
  var popupVariants = [];

  // The current view can be "normal" or "compare". See showOtherVariantsView or hideOtherVariantsView functions.
  var currentView = "normal";
  // The current variant scope is either "this" or "other"
  var currentVariantScope = "this";
  // The variant index of the selected variant depending on the scope.
  var currentVariantIndexInScope = 0;

  function HotSpot(objId, xPos, yPos, displayText)
  {
    var id;
    var x;
    var y;
    var text;

    this.id = objId;
    this.x = xPos;
    this.y = yPos;
    this.text = displayText;
  }

  function PopupVariant(objId)
  {
    var id;

    this.id = objId;
  }

  function updateHorizonText(newText)
  {
    // The font size is optimized by the factor. If the text contains more than 15 characters the font size will be
    // reduced.
    // Due to the fact that the span inherits the font size of the surrounding div the factor itself can be used to set
    // the new font size.
    // A factor of 1.0em means that the font size of the surrounding div will be used.
    var factor = 1.0;
    if(newText.length > 15)
    {
      factor = 15 / newText.length;
    }
    var elem = $("#horizonText span");
    elem.html(newText);
    elem.css({fontSize:factor + "em"});
    $("#horizonText").css("top", 330 + 150 - elem.height() * 0.83);
    $("#horizonText").css("left", Math.max(0, 400 - elem.width()));
  }

  function deleteHotSpots()
  {
    $("#hotspots").empty();
  }

  function createHotSpots(menuIndex)
  {
    var itemHotSpots = hotSpots[menuIndex];
    deleteHotSpots();
    if(itemHotSpots != null && itemHotSpots != undefined)
    {
      $.each(itemHotSpots, function(i)
      {
        var self = this; // self is used in delegated functions
        $("#hotspots").appendDom([
          {
            tagName:'div',
            id:'hotspot_' + this.id,
            className:'hotspot_collapsed',
            style:'left:' + this.x + 'px' + ';top:' + this.y + 'px;width:41px;height:41px'
          }
        ]);
        $("#hotspot_" + this.id).hover(function(){microsite.explore.expandHotSpot(self)},
                                       function(){microsite.explore.collapseHotSpots()});
        // The click is for the touch pad
        $("#hotspot_" + this.id).click(function(){microsite.explore.expandHotSpot(self)}, null);
      });
    }
  }

  function showPopupVariant(id, image)
  {
    $(".variantPopupButton_selected").removeClass("variantPopupButton_selected");
    for(var i = 0; i < popupVariants.length; i++)
    {
      if(id == popupVariants[i].id)
      {
        $("#" + popupVariants[i].id + "Button").addClass("variantPopupButton_selected");
        $("#variantsPopupRight").empty();
        $("#variantsPopupRight").appendDom(
        [
          {
            tagName: 'img',
            src: image
          }
        ]);
      }
    }
  }

  // public functions
  return {
    registerHotSpot: function(menuIndex, id, x, y, text)
    {
      var ar = hotSpots[menuIndex];
      if(ar == null || ar == undefined)
      {
        ar = new Array();
        hotSpots[menuIndex] = ar;
      }
      ar.push(new HotSpot(id, x, y, text));
    },
    showHotSpots: function(menuIndex)
    {
      $(".menu360_item").removeClass("menu360_item_selected");
      $("#menu360_item" + menuIndex).addClass("menu360_item_selected");
      updateHorizonText($("#menu360_title_" + menuIndex).html());
      $("#pageText").html($("#menu360_text_" + menuIndex).html());
      rotateToImage($("#menu360_angle_" + menuIndex).text() * 1 / 10);
      createHotSpots(menuIndex);
    },
    hideHotSpots: function()
    {
      deleteHotSpots();
      $(".menu360_item").removeClass("menu360_item_selected");
      updateHorizonText($("#menu360_title_default").html());
      $("#pageText").html($("#menu360_text_default").html());
    },
    expandHotSpot: function(hotSpot)
    {
      microsite.explore.collapseHotSpots();
      var text = hotSpot.text;
      $("#hotspot_" + hotSpot.id).appendDom([
        {
          tagName:'div',
          className:'hotspot_expanded',
          childNodes:[
            {
              tagName:'div',
              className:'hotspot_expanded_div',
              style:'display:none;',
              childNodes:[
                {
                  tagName:'div',
                  className:'hotspot_expanded_text',
                  innerHTML:text
                },
                {
                  tagName:'div',
                  className:'hotspot_expanded_rightarrow',
                  childNodes:[
                    {
                      tagName:'div',
                      innerHTML:'&nbsp;'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          tagName:'div',
          className:'hotspot_expanded_plus',
          childNodes:[
            {
              tagName:'img',
              src:'layout/hotspot-red.png'
            }
          ]
        }
      ]);
      $("#hotspot_" + hotSpot.id).unbind('click');
      $("#hotspot_" + hotSpot.id).click(function(){microsite.explore.requestDetail(hotSpot.id)});
      $("#hotspot_" + hotSpot.id + " .hotspot_expanded_div").fadeIn("fast");
    },
    collapseHotSpots: function()
    {
      $("#hotspots div").empty();
    },
    registerVariantForPupup: function(id)
    {
      popupVariants.push(new PopupVariant(id));
    },
    openVariantsInPopup: function()
    {
      $("#variantsPopupStage").empty();
      $("#variantsPopupStage").appendDom(
      [
        {
          tagName: 'div',
          className: 'variantsPopupBackground',
          childNodes: [
            {
              tagName: 'div',
              className: 'variantsPopupContainer',
              childNodes: [
                {
                  tagName: 'div',
                  className: 'variantsPopupCloseButton',
                  innerHTML: '&nbsp;',
                  id: 'variantsPopupCloseButton'
                },
                {
                  tagName: 'div',
                  className: 'variantsPopupCanvas',
                  id: 'variantsPopupCanvas',
                  childNodes:
                  [
                    {
                      tagName: 'div',
                      className: 'variantsPopupLeft',
                      id: 'variantsPopupLeft'
                    },
                    {
                      tagName: 'div',
                      className: 'variantsPopupRight',
                      id: 'variantsPopupRight'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]);
      $("#variantsPopupCloseButton").unbind("click");
      $("#variantsPopupCloseButton").click(function(){$("#variantsPopupStage").empty()});
      $("#variantsPopupStage").css("display", "block");
      for(var i = 0; i <  popupVariants.length; i++)
      {
        var variant = popupVariants[i];
        var variantThumb = $("#" + variant.id + "Thumb").html();
        var variantTitle = $("#" + variant.id + "Title").html();
        var variantText = $("#" + variant.id + "Text").html();
        var variantImage = $("#" + variant.id + "Image").html();
        $("#variantsPopupLeft").appendDom(
        [
          {
            tagName: 'div',
            id: variant.id + 'Button',
            className: 'variantPopupButton',
            childNodes:
            [
              {
                tagName: 'div',
                innerHTML: variantTitle,
                className: 'variantPopupTitle',
                style: 'background:url("' + variantThumb + '") no-repeat'
              },
              {
                tagName: 'div',
                innerHTML: variantText,
                className: 'variantPopupText'
              }
            ]
          }
        ]);
        $("#" + variant.id + "Button").attr("identifier", variant.id);
        $("#" + variant.id + "Button").attr("displayImage", variantImage);
        $("#" + variant.id + "Button").click(function()
          {
            showPopupVariant($(this).attr("identifier"), $(this).attr("displayImage"));
          });
      }
      showPopupVariant(popupVariants[0].id, $("#" + popupVariants[0].id + "Button").attr("displayImage"));
    },
    showOtherVariantsView: function()
    {
      microsite.explore.currentView = "compare";
      microsite.explore.hideHotSpots();
      $("#menu360").css("display", "none");
      $("#pageText").css("display", "none");
      $("#horizonText").css("display", "none");
      $("#otherVariantsLink").css("display", "none");
      $("#ImageHolder360").stop().animate({left:"130px"}, 600, null);
      $(".variantsTitle").css("display", "block");
      $("#variantsSwitchContainer").stop().animate({left: "0"}, {duration:600, complete:function()
      {
        microsite.explore.showOtherVariantsButtons()
      }});
      $("#currentVariantText").html($("#thisVariantText" + microsite.explore.currentVariantIndexInScope).html());
    },
    showOtherVariantsButtons: function()
    {
      $("#otherVariantsSwitchContainer").fadeIn();
      $("#otherVariantsButtonContainer").fadeIn();
      $("#currentVariantTextContainer").css("display", "block");
      $("#thisVariantText").css("display", "block");
      $("#thisVariantText").html($("#thisVariantsText").html());
      $("#otherVariantText").html($("#otherVariantsText").html());
    },
    hideOtherVariantsView: function()
    {
      microsite.explore.currentView = "normal";
      $(".variantsTitle").css("display", "none");
      $("#currentVariantTextContainer").css("display", "none");
      $("#otherVariantsSwitchContainer").css("display", "none");
      $("#otherVariantsButtonContainer").css("display", "none");
      $("#variantsSwitchContainer").stop().animate({left:"730px"}, {duration:600, complete:function()
      {
        microsite.explore.restoreThisVariantsView()
      }});
      $("#ImageHolder360").stop().animate({left:"200px"}, 600, null);
    },
    restoreThisVariantsView: function()
    {
      $("#otherVariantsLink").css("display", "block");
      $("#horizonText").css("display", "block");
      $("#pageText").css("display", "block");
      $("#menu360").css("display", "block");
      if(microsite.explore.currentVariantScope == "other")
      {
        microsite.explore.switchVariant("this", 0);
      }
      else
      {
        microsite.explore.switchVariant("this", microsite.explore.currentVariantIndexInScope);
      }
      microsite.explore.hideHotSpots();
    },
    switchVariant: function(scope, index)
    {
      // allowed scopes are: "this" and "other"
      microsite.explore.currentVariantScope = scope;
      microsite.explore.currentVariantIndexInScope = index;
      initImages(eval(scope + "VariantImages" + index)); // Assign the array that contains the image names.
      if(microsite.explore.currentView == "compare")
      {
        $("#currentVariantText").html($("#" + scope + "VariantText" + index).html());
      }
      else
      {
        $("#" + scope + "VariantText").css("display", "none");
      }
      $(".variantButton_selected").removeClass("variantButton_selected").addClass("variantButton");
      $("#" + scope + "VariantButton" + index).removeClass("variantButton").addClass("variantButton_selected");
    },
    showOtherVariantsVideo: function(videoName)
    {
      $("#variantsVideoStage").empty();
      $("#variantsVideoStage").appendDom(
      [
        {
          tagName: 'div',
          className: 'variantsVideoBackground',
          childNodes: [
            {
              tagName: 'div',
              className: 'variantsVideoContainer',
              childNodes: [
                {
                  tagName: 'div',
                  className: 'variantsVideoCloseButton',
                  innerHTML: '&nbsp;',
                  id: 'variantsVideoCloseButton'
                },
                {
                  tagName: 'div',
                  className: 'variantsVideoCanvas',
                  id: 'variantsVideoCanvas'
                }
              ]
            }
          ]
        }
      ]);
      $("#variantsVideoCloseButton").unbind("click");
      $("#variantsVideoCloseButton").click(function(){$("#variantsVideoStage").empty()});
      $("#variantsVideoStage").css("display", "block");
      $.fn.media.defaults.flvPlayer = "player_flv_mini.swf";
      $.fn.media.defaults.flashvars = {flv:'resources/content/' + videoName, autoplay: "1"};
      $("#variantsVideoCanvas").appendDom([
         {
           id:'detail_video',
           tagName:'a',
           href:'resources/content/' + videoName
         }
        ]);
      $("#detail_video").media({width: $("#variantsVideoCanvas").width(), height:$("#variantsVideoCanvas").height(),
                                 autoplay: true});
    },
    requestDetail: function(id)
    {
      DWRHandler.executeDWRService(
        dwrExploreTheTruckDetailService.showDetail, id, microsite.core.getLanguageCode());
    },
    requestSubDetail: function(id)
    {
      DWRHandler.executeDWRService(
        dwrExploreTheTruckDetailService.updateSubDetail, id, microsite.core.getLanguageCode());
    },
    showDetail: function(detailUpdateBean)
    {
      $("#detailBackground").css({
        display:'block',
        background:'url("layout/explore-detail-background.png") no-repeat'});
      $("#detailCloseButton").unbind("click");
      $("#detailCloseButton").click(function()
      {
        microsite.explore.hideDetail()
      });
      $("#detailContentLeftTitle").html(detailUpdateBean.title);
      $("#detailContentLeftText").html(detailUpdateBean.text);
      $("#detailContentLeftThumbs").empty();
      $.each(detailUpdateBean.thumbs, function(i)
      {
        clazzName = i == 0 ? "detailContentLeftThumbs_thumb_selected" : "detailContentLeftThumbs_thumb";
        $("#detailContentLeftThumbs").appendDom([
          {id:'thumb_' + this.id,
            dataId:this.id, tagName:'img', src:'resources/content/' + this.imageName, className:clazzName}
        ]);
        $("#thumb_" + this.id).click(function()
        {
          microsite.explore.selectThumb($(this).attr("dataId"))
        });
      });
      $("#detailContainer").css({display:'block'});
    },
    selectThumb: function(id)
    {
      $("#detailContentLeftThumbs img").attr("class", "detailContentLeftThumbs_thumb");
      $("#thumb_" + id).attr("class", "detailContentLeftThumbs_thumb_selected");
      $("#detailContentRightFade").fadeOut(200, function(){microsite.explore.requestSubDetail(id)});
    },
    updateSubDetail: function(subDetailUpdateBean)
    {
      $("#detailContentRightTitle").html(subDetailUpdateBean.title);
      $("#detailContentRightText").html(subDetailUpdateBean.text);
      $("#detailContentRightMedia").empty();
      if(subDetailUpdateBean.media.mediaType == "video")
      {
        $.fn.media.defaults.flvPlayer = "player_flv_mini.swf";
        $.fn.media.defaults.flashvars = {flv:'resources/content/' + subDetailUpdateBean.media.mediaName, autoplay: "1"};
        $("#detailContentRightMedia").appendDom([
            {id:'detail_video', tagName:'a', href:'resources/content/' + subDetailUpdateBean.media.mediaName}
          ]);
        $("#detail_video").media({ width: 434, height:300, autoplay: true });
      }
      else
      {
        $("#detailContentRightMedia").appendDom([
            {tagName:'img', src:'resources/content/' + subDetailUpdateBean.media.mediaName}
          ]);
      }
      $("#detailContentRightFade").fadeIn();
    },
    stopDetailVideo: function()
    {
      if($("#detail_video").length > 0)
      {
        $("#detail_video").remove();
      }
    },
    hideDetail: function()
    {
      microsite.explore.stopDetailVideo();
      $("#detailBackground").css({display:'none'});
      $("#detailContainer").css({display:'none'});
    }
  }
}();