#documented extra.dm macro file for Greenstone CSS/style demo collection

package Style

# we override the default cssheader macro here so we don't get the
# hard-coded background images. This is the place to make your customisations
# This collection has a copy of the default CSS in _httpcstyle_ 
# (_httpcollection_/style) instead of _httpimages_

_cssheader_ {
<link rel="stylesheet" href="_httpcstyle_/gs.css" type="text/css" 
   title="Default Greenstone Style" charset="UTF-8">
<link rel="alternate stylesheet" href="_httpcstyle_/style-blue.css"
    type="text/css" title="Ocean Blue" charset="UTF-8" media="screen">
<link rel="alternate stylesheet" href="_httpcstyle_/style-red.css"
    type="text/css" title="Fire Red" charset="UTF-8" media="screen">
<link rel="alternate stylesheet" href="_httpimages_/style-print.css"
    type="text/css" title="Printer" charset="UTF-8" media="print, screen">
<link rel="stylesheet" href="_httpimages_/style-print.css"
    type="text/css" charset="UTF-8" media="print">
}

#### extra code to allow changing stylesheet

# extra javascript, for our demo toggle buttons
# go through all styles and disable them all except the wanted one
# For some reason, this macro overrides the _query:pagescriptextra_ even
# though it's for the Style package only, so we need a defined initialize()
# function or else we get a javascript error.

_pagescriptextra_ {

function SetStyle(stylename) \{
  var body = document.getElementsByTagName('body')[0];
  body.style.backgroundImage = "";
  
  styles = document.styleSheets;
  var i;
  for (i=0;i<styles.length;i++) \{
    style = styles[i];
    if (style.title == stylename)
      style.disabled = false;
    else
      style.disabled = true;
  \}
\}

function initialize() \{ \}

}

_navbarspacer_ {<span class="spaceextra"></span>}

# override the default navigation bar to add demo style toggle buttons

_optnavigationbar_ {
<p class="choose_style">
Choose a style: <a href="#" onclick="SetStyle('Default Greenstone Style');return false;">Default Greenstone</a>,
<a href="#" onclick="SetStyle('Ocean Blue');return false;">Blue</a>,
<a href="#" onclick="SetStyle('Fire Red');return false;">Red</a>,
<a href="#" onclick="SetStyle('Printer');return false;">Printer</a>,
<a href="#" onclick="SetStyle('');return false;">None</a>
</p>
<div class="navbar">
<p class="navbar">
_navigationbar_
</p>
</div>
}

#### some text strings 
#_choosestyle_ "Choose a style"
#_choosestyle_ [l=fr] "choisissez un style"