function CPageWork(library, styles)
{
  this.prototype = new CPage();
  CPage.call(this, library);

  var thisPtr = this;

  this.library = library;
  this.styles = styles;

  this.navDestId;
  this.navResources;
  this.navParams;

  this.listPage = 0;
  this.maxListPage = 0;


  this.renderNavigation = function(destId, resources, params)
  {
    this.navDestId = destId;
    this.navResources = resources;
    this.navParams = params;

    var oTable = document.createElement("Table");
    oTable.border = "0";
    oTable.cellSpacing = "0";
    oTable.cellPadding = "0";

    var rowCount = oTable.rows.length;
    var oRow = oTable.insertRow(rowCount);


    var collection = new Array();
    var length = thisPtr.categoryCollection(resources.Portfolio, params.cgr, collection);

    if (thisPtr.maxListPage == 0)
    {
      thisPtr.listPage = thisPtr.calcListPage(params.idx, collection, length);
      thisPtr.maxListPage = Math.ceil(collection.length / length) - 1;
    }

    var showLeftNavButton = true;
    var showRightNavButton = true;

    if (thisPtr.listPage <= 0 || collection.length == length)
    {
      showLeftNavButton = false;
    }
    thisPtr.insertListButton(oRow, 0, true, showLeftNavButton);


    var lastColumn = thisPtr.createList(oRow, collection, length);


    if (thisPtr.listPage >= thisPtr.maxListPage || collection.length == length)
    {
      showRightNavButton = false;
    }
    thisPtr.insertListButton(oRow, lastColumn, false, showRightNavButton);


    var node = oLibrary.getElementByIdEx(destId.List);
    thisPtr.library.cleanNode(node);
    node.appendChild(oTable);
  }


  this.insertListButton = function(row, index, isLeft, isShow)
  {
    var oCol = row.insertCell(index);

    oCol.vAlign = "top";
    oCol.align = "left";
    oCol.style.margin = "0px";
    oCol.style.padding = "5px";


    if (isLeft)
    {
      if (isShow)
      {
        oCol.innerHTML = "<button class=\"aha-nav-button\" onClick=\"leftButtonClicked();\"><img src=\"images/arrow_left.gif\" alt=\"&lt;\" title=\"left\"/></button>";
      }
      else
      {
        oCol.innerHTML = "<button disabled=true class=\"aha-nav-disabled-button\"></button>";
      }
    }
    else
    {
      if (isShow)
      {
        oCol.innerHTML = "<button class=\"aha-nav-button\" onClick=\"rightButtonClicked();\"><img src=\"images/arrow_right.gif\" alt=\"&gt;\" title=\"right\"/></button>";
      }
      else
      {
        oCol.innerHTML = "<button disabled=true class=\"aha-nav-disabled-button\"></button>";
      }
    }
  }


  this.createList = function(node, collection, length)
  {
    var firstIndex = thisPtr.listPage * length;
    var lastIndex = firstIndex + length;

    if (lastIndex > collection.length)
    {
      firstIndex = collection.length - length;
      lastIndex = collection.length;      
    }

    var colCount = 1;

    for (i = firstIndex; i < lastIndex; i++)
    {
      var oCol = node.insertCell(colCount);
      oCol.vAlign = "top";
      oCol.align = "left";
      oCol.style.margin = "0px";
      oCol.style.padding = "5px";
      colCount++;

      var isSelected = false;

      if (collection[i].Idx == thisPtr.navParams.idx)
      {
        isSelected = true;
      }

      thisPtr.createLinkWithPreview(oCol, collection[i], isSelected);
    }

    return colCount;
  }


  this.calcListPage = function(currentIndex, collection, length)
  {
    var listPage = 0
    for (i = 0; i < collection.length; i++)
    {
      if (collection[i].Idx == currentIndex)
      {
        listPage = Math.floor(i / length);
      }
    }

    return listPage;
  }


  this.categoryCollection = function(data, category, destCollection)
  {
    var count = 0;
    var length = DEF_NAVIGATOR_LENGTH;

    for (var j = 0; j < data.length; j++)
    {
      if ((data[j].Category == category) || (category == g_enumCategory.AllWorks))
      {
        destCollection[count] = data[j];
        count++;
      }
    }

    if (count < length)
    {
      length = count;
    }

    return length;
  }


  leftButtonClicked = function()
  {
    if (thisPtr.listPage > 0)
    {
      thisPtr.listPage--;
      thisPtr.renderNavigation(thisPtr.navDestId, thisPtr.navResources, thisPtr.navParams);
    }
  }


  rightButtonClicked = function()
  {
    if (thisPtr.listPage < thisPtr.maxListPage)
    {
      thisPtr.listPage++;
      thisPtr.renderNavigation(thisPtr.navDestId, thisPtr.navResources, thisPtr.navParams);
    }
  }


  this.createLinkWithPreview = function(node, data, isSelected)
  {
    var oDiv;
    var oImage;
    var workTitle     = data.Title[thisPtr.library.getLanguage()];

    oDiv      = thisPtr.library.createElementEx("div");
    oImage  = thisPtr.library.createElementEx("img");

    oImage.src        = DEF_PATH_THUMBNAIL + data.Source.Thumbnail[0];
    oImage.alt        = thisPtr.library.formatString(workTitle);
    oImage.width      = DEF_NAVIGATOR_PREVIEW_SIZE;
    oImage.height     = DEF_NAVIGATOR_PREVIEW_SIZE;
    oImage.className  = styles.NavThumbImage;

    var oLink;
    var params        = thisPtr.library.createParams(data.Idx, "0", thisPtr.navParams.cgr);

    oLink             = thisPtr.library.createElementEx("a");
    oLink.href        = thisPtr.library.createURL(null, params, null);
    oLink.title       = workTitle;
    oLink.onfocus     = function() { this.blur(); };
                    
    if (isSelected)
    {
      oDiv.className = thisPtr.styles.NavThumbBorderSelected;
      oDiv.appendChild(oImage);
    }
    else
    {
      oLink.appendChild(oImage);
      oDiv.className = thisPtr.styles.NavThumbBorderLink;
      oDiv.appendChild(oLink);
    }

    node.appendChild(oDiv);
  }


  this.renderInformation = function(destIds, resources, params)
  {
    var title = null;

    if (params != null)
    {
      var node;
      var idxWork;
      var idxCustomer;
      var language;

      var year;
      var customer;
      var description;
      var download;

      idxWork = thisPtr.library.findInResource(resources.Portfolio, "Idx", params.idx);
      language = thisPtr.library.getLanguage();

      // Title
      title = resources.Portfolio[idxWork].Title[language];
      oLibrary.getElementByIdEx(destIds.Title).innerHTML = title;

      // Year
      year = resources.Portfolio[idxWork].Year.toString();
      oLibrary.getElementByIdEx(destIds.YearText).innerHTML = year.substr(0, 4);

      // Customer
      if (resources.Portfolio[idxWork].Customer == g_enumCustomer.NA)
      {
        oLibrary.getElementByIdEx(destIds.CustomerPart).style.display = "none";
      }
      else
      {
        oLibrary.getElementByIdEx(destIds.CustomerPart).style.display = "inline";

        idxCustomer = thisPtr.library.findInResource(resources.Customers, "Id", resources.Portfolio[idxWork].Customer);
        oLibrary.getElementByIdEx(destIds.CustomerText).innerHTML = resources.Customers[idxCustomer].Description[language];
      }

      // Description
      description = resources.Portfolio[idxWork].Description[language];
      if (thisPtr.library.isEmpty(description))
      {
        oLibrary.getElementByIdEx(destIds.Description).style.display = "none";
      }
      else
      {
        oLibrary.getElementByIdEx(destIds.Description).style.display = "block";
        oLibrary.getElementByIdEx(destIds.Description).innerHTML = description;
      }

      var referencesPart;
      if (destIds.ReferencesPart)
      {
        referencesPart = oLibrary.getElementByIdEx(destIds.ReferencesPart);
        referencesPart.style.display = "none";
      }
      if (resources.Portfolio[idxWork].Url)
      {
        var len;
        var node = oLibrary.getElementByIdEx(destIds.ReferencesText);

        len = resources.Portfolio[idxWork].Url.length;

        for (var i = 0; i < len; i++)
        {
          idxCustomer = thisPtr.library.findInResource(resources.Customers, "Id", resources.Portfolio[idxWork].Url[i].Name);

          var title   = thisPtr.library.formatString( resources.Customers[idxCustomer].Description[language] );
          var oLink   = thisPtr.library.createElementEx("a");

          oLink.title     = title;
          oLink.innerHTML = title;
          oLink.href      = resources.Customers[idxCustomer].Url + resources.Portfolio[idxWork].Url[i].Link;
          oLink.target    = "_blank";
          oLink.onfocus   = function() { this.blur(); };          
  
          node.appendChild(oLink);

          if (i < len - 1)
          {
            node.innerHTML += ", ";
          }
        }

        referencesPart.style.display = "block";
      }
    }
    return title;
  }


  this.renderPictures = function(destId, resources, params, worksInLine, worksSpacer, pageId)
  {
    var node;

    if (params != null)
    {
      node = oLibrary.getElementByIdEx(destId);
      node.innerHTML = "";     

      var idx;
      idx = oLibrary.findInResource(resources, "Idx", params.idx);

      if (resources[idx].Source.Picture != null)
      {
        if (resources[idx].Source.IsImagesOpened == true)
        {
          thisPtr.renderOpenedImages(node, idx, resources, params, worksInLine, worksSpacer, pageId);
        }
        else
        {
          thisPtr.renderPicturesWithThumbnails(node, idx, resources, params, worksInLine, worksSpacer, pageId);
        }
      }
    }
  }


  this.renderPicturesWithThumbnails = function(node, idx, resources, params, worksInLine, worksSpacer, pageId)
  {
    var len = resources[idx].Source.Picture.length;
    var numOfColls = worksInLine * 2 - 1;

    var oTableTop;
    var oTableBottom;
    var rowCount;
    var oRow;
    var oColTop;
    var oColBottom;
    var oCol;

    oTableTop = document.createElement("Table");
    oTableTop.border = "0";
    oTableTop.cellSpacing = "0";
    oTableTop.cellPadding = "0";

    rowCount = oTableTop.rows.length;
    oRow = oTableTop.insertRow(rowCount);

    oColTop = oRow.insertCell(0);
    oColTop.vAlign = "top";
    oColTop.align = "left";
    oColTop.style.margin = "0px";
    oColTop.style.padding = "0px";
    oColTop.colSpan = "" + numOfColls;

    oTableBottom = document.createElement("Table");
    oTableBottom.border = "0";
    oTableBottom.cellSpacing = "0";
    oTableBottom.cellPadding = "0";

    rowCount = oTableBottom.rows.length;
    oRow = oTableBottom.insertRow(rowCount);

    var count = 0;
    var rowNum = 0;

    for (var i = 0; i < len; i++)
    {
      if (i == params.img)
      {
        thisPtr.createThumb(oColTop, resources[idx], thisPtr.styles, i, true, false, pageId);
      }

      if (len > 1)
      {
        if (count == numOfColls || count == 0)
        {
          count = 0;
          rowNum++;

          rowCount = oTableBottom.rows.length;
          oRow = oTableBottom.insertRow(rowCount);
        }

        oColBottom = oRow.insertCell(count);
        oColBottom.vAlign = "top";
        oColBottom.align = "left";
        oColBottom.style.margin = "0px";
        oColBottom.style.padding = "21px 0px 0px 0px";
      
        var isSelected = false;

        if (i == params.img)
        {
          isSelected = true;
        }

        thisPtr.createThumb(oColBottom, resources[idx], thisPtr.styles, i, false, isSelected, pageId);

        count++;
      
        if (count < numOfColls - 1 && i != len - 1)
        {
          oCol = oRow.insertCell(count);
          oCol.vAlign = "top";
          oCol.align = "left";
          oCol.width = "" + worksSpacer;
          oCol.style.margin = "0px";
          oCol.style.padding = "21px 0px 0px 0px";
          count++;
        }          
      }
    }

    node.appendChild(oTableTop);
    node.appendChild(oTableBottom);
  }


  this.renderOpenedImages = function(node, idx, resources, params, worksInLine, worksSpacer, pageId)
  {
    var len = resources[idx].Source.Picture.length;

    var oTable;
    var oCol;
    var paddingTop = "0px";

    oTable = document.createElement("Table");
    oTable.border = "0";
    oTable.cellSpacing = "0";
    oTable.cellPadding = "0";

    for (var i = 0; i < len; i++)
    {
      if (i > 0)
      {
        paddingTop = "21px";
      }
      
      oCol = thisPtr.insertColumn(oTable, paddingTop);
      thisPtr.createThumb(oCol, resources[idx], thisPtr.styles, i, true, false, pageId);      
    }

    node.appendChild(oTable);
  }

  
  this.insertColumn = function(table, paddingTop)
  {
    var rowCount = table.rows.length;
    var oRow = table.insertRow(rowCount);

    column = oRow.insertCell(0);
    column.vAlign = "top";
    column.align = "left";
    column.style.margin = "0px";
    column.style.padding = "0px";
    column.style.paddingTop = paddingTop;

    return column;
  }
}