var showHighlights = function(dealerId, type, range, ippId, highlightIndex, locale)
{
  page.contentDiv.animate({opacity:"hide"}, {duration:page.speed / 2, queue:"content"});
  $("#editlink").animate({opacity:"hide"}, {duration:page.speed / 2, queue:"editlink"});
  dwrService.getHighlights(dealerId, type, range, ippId, highlightIndex, locale, DWRResultProcessor.processDWRResult);
};

$(document).ready(function()
{
  var processHighlightsUpdateBean = function(highlightsUpdateBean)
  {
    // remove old highlights div
    var rangeContainerDiv = $("div.content_range_container");
    rangeContainerDiv.remove();

    // construct new highlights div
    rangeContainerDiv = $("<div class=\"content_range_container\"/>");
    rangeContainerDiv.css("display", "none");
    $("div.content_container").append(rangeContainerDiv);

    // add content column
    var contentColumnDiv = $("<div class=\"content_column_container\"/>");
    rangeContainerDiv.append(contentColumnDiv);

    var titleDiv = $("<div class=\"title\"/>");
    titleDiv.text(highlightsUpdateBean.title);
    contentColumnDiv.append(titleDiv);

    var highlightImageDiv = $("<div class=\"highlight_image\"/>");
    contentColumnDiv.append(highlightImageDiv);
    if(highlightsUpdateBean.titleImageURL != null)
    {
      var titleImage = $("<img alt=\"\"/>");
      titleImage.attr("src", highlightsUpdateBean.titleImageURL);
    }
    highlightImageDiv.append(titleImage);

    var headlineDiv = $("<div class=\"headline\"/>");
    headlineDiv.text(highlightsUpdateBean.headline);
    contentColumnDiv.append(headlineDiv);

    var textDiv = $("<div class=\"text\"/>");
    textDiv.text(highlightsUpdateBean.text);
    contentColumnDiv.append(textDiv);

    // add marginal column
    var marginalColumnDiv = $("<div class=\"marginal_column_container\"/>");
    rangeContainerDiv.append(marginalColumnDiv);

    var thumbDiv = $("<div class=\"thumb\"/>");
    marginalColumnDiv.append(thumbDiv);
    var thumbImage = $("<img alt=\"\"/>");
    thumbImage.attr("src", highlightsUpdateBean.titleThumbURL);
    thumbDiv.append(thumbImage);

    if(highlightsUpdateBean.highlights != null)
    {
      var highlightContainerDiv = $("<div class=\"highlight_container\"/>");
      marginalColumnDiv.append(highlightContainerDiv);

      for(var i = 0; i < highlightsUpdateBean.highlights.length; i++)
      {
        var highlight = highlightsUpdateBean.highlights[i];
        var highlightDiv = $("<div class=\"highlight\"/>");
        highlightContainerDiv.append(highlightDiv);

        var a;
        var labelImage = null;
        if(highlight.separator)
        {
          a = $("<br/>");
        }
        else if(highlight.download)
        {
          a = $("<a class=\"downloadlink\"/>");
        }
        else if(highlight.imageLabel)
        {
          a = $("<a/>");
        }
        else
        {
          a = $("<a class=\"link\"/>");
        }

        var url;
        if(highlight.extern)
        {
          url = highlight.url;
          a.attr("target", "_blank");
        }
        else
        {
          url = "javascript:showHighlights(\"" + page.dealerId + "\", \"" + highlightsUpdateBean.type + "\", \"" + highlightsUpdateBean.range
              + "\", \"" + highlightsUpdateBean.ippId + "\", " + i + ", \"" + page.locale + "\");";
        }

        a.attr("href", url);
        if(highlight.imageLabel)
        {
          a.append("<img class=\"labellink\" src=\"images/buttons/" + highlight.label + "\"/>");
        }
        else
        {
          a.text(highlight.label);
        }
        highlightDiv.append(a);
      }
    }

    // change edit link
    if(highlightsUpdateBean.editLink != null)
    {
      var editLink = $("#editlink");
      if(editLink.length == 0)
      {
        editLink = $("<a id=\"editlink\" class=\"metanavigation\" target=\"netcontent\"/>");
        editLink.text(highlightsUpdateBean.editLink.label);
        editLink.css("display", "none");
        $("div.metanavigation_container").append(editLink);
      }
      editLink.attr("href", highlightsUpdateBean.editLink.href);
      // show edit link
      editLink.animate({opacity:"show"}, {duration:page.speed / 2, queue:"editlink"});
    }

    // show highlights div
    rangeContainerDiv.animate({opacity:"show"}, {duration:page.speed / 2, queue:"content",
                                                 complete:function(){page.contentDiv.pngFix();}});

    // register active content page
    page.contentDiv = rangeContainerDiv;
  };

  DWRResultProcessor.registerResultFunction("highlightsUpdateBean", processHighlightsUpdateBean);
});

/*
 <div class="content_container">

 <div class="content_range_container">
 <div class="content_column_container">
 <div class="title">${content.rangeContent.title}</div>
 <div class="highlight_image"><img src="${content.rangeContent.titleImageURL}" alt=""/></div>
 <div class="headline">${content.rangeContent.headline}</div>
 <div class="text">${content.rangeContent.text}</div>
 </div>
 <div class="marginal_column_container">
 <div class="thumb"><img src="${content.rangeContent.titleThumbURL}" alt=""/></div>
 <div class="highlight_container">
 <c:forEach items="${content.rangeContent.highlights}" var="highlight">
 <div class="highlight">
 <a class="link" href="${highlight.url}">${highlight.label}</a>
 </div>
 </c:forEach>
 </div>
 </div>
 </div>

 </div>
 */