// MindmadeStoryPages copyright(c) 2005 by Andrew Hock, www.mindmade.com
// This javascript is copyrighted per above.  You are free to use this as long as you notify 
// me at andyhock@mindmade.com, keep this copyright notice here, and add a link to 
// www.mindmade.com and ewriters.org as a courtesy acknowledging where you procured it.  
//
// If you are using this for a DotNetNuke project, please be advised I have a module, which you
// can purchase which already does whatever you are thinking about doing.  Please purchase the
// the module instead, as you'd be in copyright violation of the DotNetNuke module.  
//
// Since it would be pointless to reproduce this and try to call it your own...please don't go there.  
// My best friend is an attorney who drools.  Kindly just do the right thing, and give credit where 
// due, and display links to www.mindmade.com and www.ewriters.org.  Exactly as follows, 
// between the quotes:
//
// "MindmadeStoryPages courtesy of Andrew Hock, http://www.mindmade.com and http://www.ewriters.org." 
// on the same webpage MagicStoryPages is in use.
//
// As a hint, you might want to remove the moduleid I've added to all globals and functions.  
// It's how I made it possible to have more than one instance on a webpage.
//
// As long as you've contacted me, and I've replied, and follow the above instructions, you can make
// any changes to this file desired.  If you have questions, please feel free to email me at the
// above email address.  Also, if you don't want to go through and clean out the module id, email
// me, and I will send you a demo zip with the mindmadestorypages.js file, an html test file, and the 
// stylesheet file w/o the DNN specific things, and also multi-browser.  I have tested this for 
// Firefox 1.x, Mozilla 1.x, Internet Explorer 5.0+, Safari, and even the dreaded IE 5.2.3 for Mac,
// though percentagewidth does not work for Mac IE 5.2.3.  Also verified as working on Opera by the 
// famous and uniquely named, Tarquin Wilton-Jones, who has an excellent cross-browser set of css 
// tutorials at his site at http://www.howtocreate.co.uk. If you find any errors or improvements 
// please contact me.
////////////////////////////////////////////////////////////////////////////////////////////////////////

//Identify IE (mainly for Mac IE support.
var bisIE = document.all;

// START dynamic initial values changed by settings
var inumColumns = 1;
var szstoryFontSize = "12";
var istoryWidth = 700;
var istoryPercent = 99;
var icolumnPointer = 0;
var imaxMenuDigits = 7;
var iminColLines = 10;
var ifontIncrement = 1;
var ifontMaxSize = 20;
var ifontMinSize = 10;
var iminColumns = 1;
var imaxColumns = 5;
var ispaceBetweenColumns = 16;

// specify the number of lines to display.  This can be lines, pixels or a percent (1-100)
// depending on the booleans below.
var iheightUnitsValue = 99;

// if this is 0, use lines, if 1 use percent, as units, the istorywidth holds the pixels value, the 
// istorypercent holds the percent value
// not the actual number of lines
var iUSEWIDTHPERCENTUNITS = 0;
var iUSEWIDTHPIXELUNITS = 1;

// if this is 0, use lines, if 1 use percent, if 2, use pixels, as units, the iheightUnitsValue holds the value to use,var buseFixedHeight = false;
var iUSEHEIGHTPIXELUNITS = 2;
var iUSEHEIGHTPERCENTUNITS = 1;
var iUSEHEIGHTLINEUNITS = 0;

// set the height and width units
// HERE IS HOW ONE CONTROLS THE HEIGHT AND WIDTH DISPLAY
var iwidthUnits = iUSEWIDTHPERCENTUNITS;
var iheightUnits = iUSEHEIGHTPERCENTUNITS;

// booleans to show/hide the column, font and page x of y buttons.
var ballowChangeColumns = true;
var ballowChangeFonts = true;
var ballowPageDisplay = true;
//END dynamic initial values changed by settings

//divs that need to be generalized by adding moduleid to them.
var szstoryParentDiv = "storyPagesColumnsParent";
var szstoryColumnDiv = "storyColumn";
var szstoryStartDiv = "storyStart";
var szstoryParentColDiv = "stoclo";
var szstoryColDiv = "mmcol";
var szstoryTable = "storyTable";
var szstoryTools = "storyTools";
var szgotoPageMenu = "gotoPageMenu";
var szpageNumberClass = "CommandButton";

//calculated vars
var ilineHeight = parseInt(szstoryFontSize) + Math.round(.25 * (parseInt(szstoryFontSize) / ifontMinSize) * parseInt(szstoryFontSize));
var icolumnWidth = ((istoryWidth / inumColumns) - (2 * ispaceBetweenColumns));

// returns the height of the current window
function getHeight(oelement)
{
  if (oelement == "window")
  {
    if (window.innerHeight)
    {
      return window.innerHeight;
    } 
    else 
    {
      return document.getElementById("Body").offsetHeight;
    }
  } 
  else 
    {
    oelement = document.getElementById(oelement);
    if (oelement.offsetHeight)
    {
      return oelement.offsetHeight;
    }
  }
}
  
// makes the columns and copies the text node into the newly
// created columns ac is the div holding the cloned node - at
function storySetup()
{
  var ifontsize = parseInt(szstoryFontSize);
  var oparentdiv = document.getElementById(szstoryParentDiv);
  var icolumnPointer = 0;
  for (var i = 0; i < imaxColumns; i++)
  {
    var ostoryparent = document.createElement("div");
    ostoryparent.setAttribute("id", "" + szstoryParentColDiv + "" + i);
    ostoryparent.setAttribute("className", szstoryColumnDiv);
    oparentdiv.appendChild(ostoryparent);
    var oelement = document.getElementById(szstoryStartDiv);
    var ostorytext = oelement.cloneNode(true);
    ostorytext.setAttribute("id", szstoryColDiv + i + "");
    ostorytext.style.display = "block";
    ostorytext.style.top = "0px";
    ostorytext.style.width = "400px";
    ostorytext.style.fontSize = ifontsize + "px";
    ostorytext.style.lineHeight = ilineHeight + "px";
    ostoryparent.appendChild(ostorytext);   
  }
}

// moves the columns into position, but adjust the top
function layoutStory()
{ 
  var iparentheight = getHeight(szstoryParentDiv);
  for (var i = 0; i < inumColumns; i++)
  {
    var oelement = document.getElementById(szstoryColDiv + i + "");
    //make sure at least 2 rows of story text are available 
    if (iparentheight > (2 * ilineHeight))
    {
      oelement.style.top = -1 * (iparentheight * (i + icolumnPointer));
    }
  }
  storyPages();
}

// Calculate the number of column lines to display.  Minum number of rows to display is iminColLines
function linesToDisplay(ilines)
{
  if ((ilines == null) || (ilines < iminColLines))
  {
    ilines = iminColLines;
  }
  var itotalspace = ilineHeight * Math.round((getHeight("window") - (5 * ilineHeight)) / ilineHeight);
  itotallines = Math.round(itotalspace / ilineHeight);
  if (iheightUnits == iUSEHEIGHTPIXELUNITS)
  {
    ilines = Math.round(ilines / ilineHeight);
  }
  else if (iheightUnits == iUSEHEIGHTPERCENTUNITS)
  {
    ilines = Math.round((itotallines * ilines) / 100);
  }
  if (ilines > itotallines)
  {
    ilines = itotallines;
  }
  if (ilines < iminColLines)
  {
    ilines = iminColLines;
    if (window.scrollTo)
    {
      window.scrollTo(0, 75);
    }
  }
  else if (window.scrollTo)
  {
    window.scrollTo(0, 0);
  }
  return (ilines * ilineHeight);
}

// clips the parent layer to the defined visible area
// if space allows include bottom, otherwise clip out most of bottom
function setStoryHeight()
{
  if (inumColumns > 0) 
  {
    if (document.getElementById(szstoryStartDiv) != null)
    {
      document.getElementById(szstoryParentDiv).style.height = linesToDisplay(iheightUnitsValue);
      var szcoldiv = szstoryColDiv + "0";
      var iheight = getHeight(szcoldiv);
      iparentheight = getHeight(szstoryParentDiv);
      //check to make sure page is still visible
      while ((iparentheight * (icolumnPointer + (inumColumns - 1))) > iheight && icolumnPointer > 0)
      {
        icolumnPointer = icolumnPointer - 1;
      }
    }
  }
}

// returns the number of screens an story spans, ie the number of pages
function storyPages()
{
  var iparentheight = getHeight(szstoryParentDiv);
  var szcoldiv = szstoryColDiv + "0";
  var iheight = getHeight(szcoldiv);
  var itotalcolumns = iheight / iparentheight;
  var itotalcolpages = Math.ceil(itotalcolumns);
  var icurrentpos = (icolumnPointer + inumColumns) / inumColumns;
  var itotalpages = Math.ceil(itotalcolpages / inumColumns);
  var icurrentpage = Math.round(icurrentpos);
  var oelement = document.getElementById(szstoryTools);
  var szstorytools = "";
  if (ballowChangeFonts)
  {
    szstorytools += getFontSizes();
  }
  if (ballowPageDisplay)
  {
    szstorytools += getPageNumbers(icurrentpage, itotalpages);
  }
  if (ballowChangeColumns)
  {
    szstorytools += getColumns();
  }
  oelement.innerHTML = szstorytools;
  displayGotoPageMenu(icurrentpage, itotalpages);
}

//STORY TOOLS: get page x of y
function getPageNumbers(icurpage, itotalpages)
{
  var szpageinfo = "::&nbsp;&nbsp;Page " + icurpage + " of " + itotalpages + "&nbsp;&nbsp;::";
  return(szpageinfo);
}

//STORY TOOLS: get SMALLER FONT  LARGER FONT
function getFontSizes()
{
  var szfontinfo = "::&nbsp;&nbsp;<a href='javascript:incrementFont(-";
  szfontinfo += "" + ifontIncrement + ");' class='";
  szfontinfo += "" + szpageNumberClass + "'>SMALLER FONT</a>&nbsp;&nbsp;";
  szfontinfo += "<a href='javascript:incrementFont(" + ifontIncrement + ");' class='";
  szfontinfo += "" + szpageNumberClass + "'>LARGER FONT</a>&nbsp;&nbsp;";
  return(szfontinfo);
}

//STORY TOOLS: get LESSCOLUMNS MORECOLUMNS
function getColumns()
{
  var szcolumninfo = "&nbsp;&nbsp;<a href='javascript:storyColumns(-1);' class='";
  szcolumninfo += "" + szpageNumberClass + "'>LESS COLUMNS</a>&nbsp;&nbsp;";
  szcolumninfo += "<a href='javascript:storyColumns(1);' class='";
  szcolumninfo += "" + szpageNumberClass + "'>MORE COLUMNS</a>&nbsp;&nbsp;::";
  return(szcolumninfo);
}

//go directly to a specific page
function displayGotoPageMenu(icurrentpage, itotalpages)
{
  var oelement = document.getElementById(szgotoPageMenu);
  var szpagemenu = createGotoPageMenuDisplay(icurrentpage, itotalpages);
  oelement.innerHTML = szpagemenu;
}

function createGotoPageMenuDisplay (icurpage, itotalpages)
{
  var szmenu = "";
  var ifirstmenupage = 1;
  var inextsetpage = 0;
  var iprevsetpage = 0;
  if ((itotalpages > 1) && icurpage > 1)
  {
    szmenu += "<a href='#' class='" + szpageNumberClass + "";
    szmenu += "' onClick=javascript:prevPage()>PREVIOUS</a>&nbsp;&nbsp;&nbsp;&nbsp;";
  }
  if (itotalpages > imaxMenuDigits)
  {
    if ((itotalpages - icurpage > imaxMenuDigits) && (icurpage > imaxMenuDigits))
    {
      ifirstmenupage = Math.round(icurpage - imaxMenuDigits / 2);
      iprevsetpage = icurpage - imaxMenuDigits;
      szmenu += "<a href='#' class='" + szpageNumberClass + "";
      szmenu += "' onClick=javascript:gotoStoryPage(1)>1</a>&nbsp;&nbsp;";
      szmenu += "<a href='#' class='" + szpageNumberClass + "";
      szmenu += "' onClick=javascript:gotoStoryPage(" + iprevsetpage + "";
      szmenu += ")>PREVIOUS " + imaxMenuDigits + "</a>&nbsp;&nbsp;";
    }
    else if (icurpage > imaxMenuDigits)
    {
      ifirstmenupage = Math.round(icurpage - imaxMenuDigits / 2);
      if (ifirstmenupage + imaxMenuDigits > itotalpages)
      {
        ifirstmenupage = Math.round(itotalpages - imaxMenuDigits + 1);
      }
      iprevsetpage = icurpage - imaxMenuDigits;
      szmenu += "<a href='#' class='" + szpageNumberClass 
      szmenu += "' onClick=javascript:gotoStoryPage(1)>1</a>&nbsp;&nbsp;";
      szmenu += "<a href='#' class='" + szpageNumberClass + "";
      szmenu += "' onClick=javascript:gotoStoryPage(";
      szmenu += "" + iprevsetpage + ")>PREVIOUS " + imaxMenuDigits + "</a>&nbsp;&nbsp;";
    }
  }
  var bdone = false;
  var ipage = ifirstmenupage;
  while (bdone == false)
  {
    if (icurpage != ipage)
    {
      szmenu += "" + "<a href='#' class='" + szpageNumberClass  + "";
      szmenu += "' onClick=javascript:gotoStoryPage(";
      szmenu += "" + ipage + ")>" + ipage + "</a>" + "&nbsp;&nbsp;";
    }
    else
    {
      szmenu += "<span class='" + szpageNumberClass + "'>" + ipage + "</span>&nbsp;&nbsp;";
    }
    if ((ipage == ifirstmenupage + imaxMenuDigits - 1)  || (ipage == itotalpages))
    {
      bdone = true;
    }
    ipage++;
  }
  if (ipage - 1 < itotalpages)
  {
    if (ipage < itotalpages)
    {
      var inextpagesetcount = imaxMenuDigits;
      inextsetpage = icurpage + imaxMenuDigits;
      if (inextsetpage > itotalpages)
      {
        inextpagesetcount = imaxMenuDigits - (inextsetpage - itotalpages);
        inextsetpage = itotalpages;
      }
      szmenu += "<a href='#' class='" + szpageNumberClass + "";
      szmenu += "' onClick=javascript:gotoStoryPage(" + inextsetpage + "";
      szmenu += ")>NEXT " + inextpagesetcount + "</a>&nbsp;&nbsp;";
    }
    szmenu += "" + "<a href='#' class='" + szpageNumberClass + "";
    szmenu += "' onClick=javascript:gotoStoryPage(";
    szmenu += "" + itotalpages + ")>" + itotalpages + "</a>" +  "&nbsp;&nbsp;";
  }  
  if ((icurpage < itotalpages) && (itotalpages > 1))
  {
    szmenu += "&nbsp;&nbsp;<a href='#' class='";
    szmenu += "" + szpageNumberClass + "' onClick=javascript:nextPage()>NEXT</a>";
  }
  return (szmenu);
}

//goes to a specific page
function gotoStoryPage(ipage)
{
  ipage -= 1;
  var szcoldiv = szstoryColDiv + "0";
  iheight = getHeight(szcoldiv);
  var iparentheight = getHeight(szstoryParentDiv);

  // check to make sure page is still visible 
  if ((iparentheight * (ipage * inumColumns)) < iheight)
  {
    icolumnPointer = ipage * inumColumns;
  }
  layoutStory();
}

// adjusts the story to display the next page
function nextPage()
{
  var szcoldiv = szstoryColDiv + "0";
  iheight = getHeight(szcoldiv);
  var iparentheight = getHeight(szstoryParentDiv);
  // check to make sure page is still visible 
  if ((iparentheight * (icolumnPointer + inumColumns)) < iheight)
  {
    icolumnPointer = icolumnPointer + inumColumns;
  }
  layoutStory();
}

// adjusts the story to display the previous page
function prevPage()
{
  icolumnPointer = icolumnPointer - inumColumns;
  if (icolumnPointer < 0)
  {
    icolumnPointer = 0;
  }
  layoutStory();
}

// user event to trigger the three column change
function eventColumns(icolumns)
{
  if (window.scrollTo)
  {
    window.scrollTo(0,0);
  }
  //AAH AJAX these new settings

  makeColumns(icolumns);
  setStoryHeight();
  layoutStory();
  storyPages();
}

function makeColumns(icolumns)
{
  icolumnPointer = 0;
  inumColumns = icolumns;
  if (iwidthUnits == iUSEWIDTHPERCENTUNITS)
  {
    var ostorytable = document.getElementById(szstoryTable);
    if (bisIE)
    {
      istoryWidth = Math.round(ostorytable.offsetWidth * (istoryPercent / 100));
    }
    else
    {
      istoryWidth = Math.round((window.innerWidth - 50) * (istoryPercent / 100));
      //alert(istoryWidth);
    }
  }
  icolumnWidth = ((istoryWidth / inumColumns) - (2 * ispaceBetweenColumns));
  var szleft = "";
  var szelement = "";
  var icolumn = 0;
  var ocolumn = null;
  for (icolumn = 0;icolumn < inumColumns; icolumn++)
  {
    szelement = szstoryColDiv + icolumn + "";
    ocolumn = document.getElementById(szelement);
    ocolumn.style.cursor = "default";
    ocolumn.style.zIndex = 5;
    ocolumn.style.display = "block";
    ocolumn.style.width = "" + icolumnWidth + "px";
    //alert(ocolumn.style.width);

    if (inumColumns == 1)
    {
      szleft = "" + (2 * ispaceBetweenColumns) + "px";
    }
    else
    {
      szleft = "" + (icolumn * (icolumnWidth + ispaceBetweenColumns)) + "px";
    }
    ocolumn.style.left = szleft;
    ocolumn.onmousemove = null;
    ocolumn.onmouseout = null;
    ocolumn.onmousedown = null;
    ocolumn.onmouseup = null;
  }
  while (icolumn < imaxColumns)
  {
    szelement = szstoryColDiv + icolumn + "";
    ocolumn = document.getElementById(szelement);
    ocolumn.style.display = "none";
    icolumn += 1;
  }

  document.getElementById(szstoryTools).style.display = "block";
  document.getElementById(szgotoPageMenu).style.display = "block";
  if (!bisIE)
  {
    document.getElementById(szstoryTools).style.width = "" + istoryWidth + "px";
    document.getElementById(szgotoPageMenu).style.width = "" + istoryWidth + "px";
  }
}

function startStoryReader()
{
  if (document.getElementById(szstoryStartDiv) != null)
  {
    storySetup();
    setStoryHeight();
    makeColumns(inumColumns);
    layoutStory();
  } 
}

// increases the font and adjusts the story layout
function incrementFont(iincrement)
{
  var icurrentfontsize = parseInt(szstoryFontSize);
  var inewfontsize = icurrentfontsize + iincrement;
  if (inewfontsize < ifontMinSize)
  {
    inewfontsize = ifontMinSize;
  }
  if (inewfontsize > ifontMaxSize)
  {
    inewfontsize = ifontMaxSize;
  }
  //AAH AJAX these new settings
  var nlineadjustment = .25 * ((inewfontsize / ifontMinSize));
  ilineHeight = inewfontsize + Math.round(nlineadjustment * inewfontsize);
  for (var i = 0; i < imaxColumns; i++)
  {
    oelement = document.getElementById(szstoryColDiv + i + "");
    oelement.style.fontSize = inewfontsize + "px";
    oelement.style.lineHeight = ilineHeight + "px";
  }     
  szstoryFontSize = "" + inewfontsize;
  setStoryHeight();
  layoutStory();
}

// adjust story layout when the window is resized
function windowResize()
{
  if (iwidthUnits == iUSEWIDTHPERCENTUNITS)
  {
    eventColumns(inumColumns);
  }
  setStoryHeight();
  layoutStory();
}

window.onresize = windowResize;

// this reduces or increased the format between one and three column layouts
function storyColumns(iincrement)
{
  inumColumns = inumColumns + iincrement;
  if (inumColumns < iminColumns)
  {
    inumColumns = iminColumns;
  }
  if (inumColumns > imaxColumns)
  {
    inumColumns = imaxColumns;
  }
  eventColumns(inumColumns);
}