# Tran... classes

import os.path

from dullpencil import DpTranslator


# TranFamily
class TranFamily(DpTranslator):

  def __init__( self, baseDir, isRealTime ):
    self.site = 'family'
    self.rootDir = baseDir
    
    #print( 'TranFamily__init__' )
    
    super(TranFamily,self).__init__( self.site, self.rootDir, isRealTime )


  # preamble(), provides site specific HTML preamble.
  def preamble( self, path ):
    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '<head>\n'
      '  <meta charset="UTF-8">\n'
      '  <title>' + self.site + '</title>\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '<body>\n'
      '\n'
      '<!-- Side navigation -->\n'
      '<div class="sidenav">\n' )
    
    # build menu
    
    # todo:...
    
    s += '<p> Hello World! </p>\n'

    a = path[len(self.rootDir):].split('/')
    
    #print( a )
    
    html = ''
    if len(a) > 2:
      s3 = '..'
      for i in range(1, len(a)-2):
        s3 += '/..'
      for i in range(1, len(a)-1):
        html += '<a href="' + self.maybeHtml(s3) + '">'+a[i]+'</a>\n'
        s3 = s3[:-3]
      html += '<a href="'+self.maybeHtml('.')+'">'+a[-1]+'</a>\n'
    s += html


    # close menu, start main
    s += (
      '</div>\n'
      '\n'
      '<!-- Page content -->\n'
      '<div class="main">\n' )
    #
    # Put a nav-path across the top right of the main page
    html = ''
    a = path[len(self.rootDir)+1:].split('/')
    if len(a) > 0:
      html = '<div style="float:right;">\n'
      if len(a) > 1:
        s3 = '..'
        for i in range(0, len(a)-2):
          s3 += '/..'
        for i in range(0, len(a)-1):
          html += '/ <a href="' + self.maybeHtml(s3) + '">' + a[i] + '</a>\n'
          s3 = s3[:-3]
      html += '</div>\n'
      s += html
    #
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '</div>\n'
      '\n</body>\n</html>\n' )
    return s


# TranMoodSwings
class TranMoodSwings(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'moodswingsband'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir
    
    #print( 'TranMoodSwings__init__' )
    
    super(TranMoodSwings,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), override, provides site specific HTML preamble.
  def preamble( self, path ):
    a = path.split('/')
    page = a[-1]
    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '\n'
      '<head>\n'
      '  <title>Mood Swings Band - Music For All Occasions</title>\n'
      '  <meta charset="utf-8">\n'
      '  <meta name="Mood Swings Band">\n'
      '  <meta content="All womans band for all occations. Home in Provicence, Utah, we serve Logan, and Cache Valley.">\n'
      '\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '\n'
      '\n'
      '<body>\n'
      '\n'
      '<header>\n'
      '  <h1>Mood Swings Band</h1>\n'
      '</header>\n'
      '\n'
      '<nav>\n'
      '  <table id="nav1">\n'
      '    <tr>\n' )
    if page == 'moodswingsband':
      s += (
      '<td id="nav3">Home</td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('./songs')+('">Songs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('music')+('">Music</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('gigs')+('">Our Gigs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('about')+('">About Us</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('layout')+('">Layout</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('contact')+('">Contact</a></td>\n' )
    else:
      a = [
      '<td><a id="nav2" href="'+self.maybeHtml('..')+'">Home</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../songs')+'">Songs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../music')+'">Music</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../gigs')+'">Our Gigs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../about')+'">About Us</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../layout')+'">Layout</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('../contact')+'">Contact</a></td>' ]
      if page == 'songs': a[1] = '<td id="nav3">Songs</td>'
      elif page == 'music': a[2] = '<td id="nav3">Music</td>'
      elif page == 'gigs': a[3] = '<td id="nav3">Our Gigs</td>'
      elif page == 'about': a[4] = '<td id="nav3">About Us</td>'
      elif page == 'layout': a[5] = '<td id="nav3">Layout</td>'
      elif page == 'contact': a[6] = '<td id="nav3">Contact</td>'
      s += ''.join(a)
    s += (
      '    </tr>\n'
      '  </table>\n'
      '</nav>\n'
      '\n' )
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n'
      '\n'
      '<footer>\n'
      '<!--\n'
      '  <img src="images/MoodSwingsCollage.jpg" alt="Smiley face" width="100%"><br>\n'
      '-->\n'
      '  Copyright, MoodSwingsBand.com\n'
      '</footer>\n'
      '\n'
      '</body>\n'
      '</html>\n' )
    return s


# TranLocalGrown
class TranLocalGrown(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'localgrown'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir
    
    #print( 'TranLocalGrown__init__' )
    
    super(TranLocalGrown,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), override, provides site specific HTML preamble.
  def preamble( self, path ):
    s2 = self.rootDir + '/' + self.site + '/'
    s3 = path[len(s2):]
    pageDir = self.relPrefix()+'/'+self.site
    pageAft = ''
    if len(s3) > 0:
      a = s3.split('/')
      page = a[0]
      pageDir += '/' + page
      pageAft = s3[len(page):]
    else:
      page = self.site

    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '\n'
      '<head>\n'
      '  <title>Localgrown</title>\n'
      '  <meta charset="utf-8">\n'
      '  <meta name="Localgrown">\n'
      '  <meta content="All woman band for all occasions. Home in Providence, Utah, we serve Logan, and Cache Valley.">\n'
      '\n'
      '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
      '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">\n'
      '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\n'
      '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>\n'
      '\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '\n'
      '\n'
      '<body>\n'
      '\n'
      '<header>\n'
      )
    if page == 'localgrown':
      s += (
        '<div class="container-fluid" style="padding:0;">\n'
        '  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">\n'
        '    <!-- Indicators -->\n'
        '    <ol class="carousel-indicators">\n'
        '      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="1"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="2"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="3"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="4"></li>\n'
        '    </ol>\n'
        '    <!-- Wrapper for slides -->\n'
        '    <div class="carousel-inner">\n'
        '      <div class="item active">\n'
        '        <img src="Band-1.jpg" alt="Band-1" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="Band-2.jpg" alt="Band-2" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="Band-3.jpg" alt="Band-3" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="Band-4.jpg" alt="Band-4" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="Band-5.jpg" alt="Band-5" style="width:100%;">\n'
        '      </div>\n'
        '    </div>\n'
        '    <!-- Left and right controls -->\n'
        '    <a class="left carousel-control" href="#myCarousel" data-slide="prev">\n'
        '      <span class="glyphicon glyphicon-chevron-left"></span>\n'
        '      <span class="sr-only">Previous</span>\n'
        '    </a>\n'
        '    <a class="right carousel-control" href="#myCarousel" data-slide="next">\n'
        '      <span class="glyphicon glyphicon-chevron-right"></span>\n'
        '      <span class="sr-only">Next</span>\n'
        '    </a>\n'
        '  </div>\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/localgrown')+(
        '" style="color: inherit;text-decoration:none;">\n'
        '    <em>Localgrown</em>\n'
        '    </a>\n'
        '  </h1>\n'
        '</div>\n'
        )
    else:
      s += (
        '<div style="height:200px; overflow:hidden;">\n'
        '  <img src="')+pageDir+('/banner-band.jpg" alt="banner-band.jpg" style="width:100%;">\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%; height:200px;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/localgrown')+(
        '" style="color: inherit;text-decoration:none;">\n'
        '    <em>Localgrown</em>\n'
        '    </a>\n'
        '  </h1>\n'
        '  <div style="position:absolute; bottom:10px;">\n'
        '  <h2>'
        )
      if page == 'bios': s += 'Bios' + pageAft
      elif page == 'contact': s += 'Contact' + pageAft
      elif page == 'music':   s += 'Music' + pageAft
      elif page == 'layout':   s += 'Layout' + pageAft
      elif page == 'songs':   s += 'Songs' + pageAft
      else: s += '(' + page + ')'
      s += (
        '  </h2>\n'
        '  </div>\n'
        '</div>\n'
        )
    s += (
      '</header>\n'
      '\n'
      '<nav>\n'
      '  <table id="nav1">\n'
      '    <tr>\n' )
    if page == 'bleachedblondes':
      s += (
      '<td id="nav3">Home</td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('bios')+('">Bios</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('songs')+('">Songs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('layout')+('">Layout</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('contact')+('">Contact</a></td>\n' )
    else:
      a = [
      '<td><a id="nav2" href="'+self.maybeHtml('/localgrown')+'">Home</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/localgrown/bios')+'">Bios</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/localgrown/songs')+ '">Songs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/localgrown/layout')+'">Layout</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/localgrown/contact')+'">Contact</a></td>' ]
      if len(pageAft) <= 0:
        if page == 'bios': a[1] = '<td id="nav3">Bios</td>'
        elif page == 'songs': a[2] = '<td id="nav3">Songs</td>'
        elif page == 'layout': a[3] = '<td id="nav3">Layout</td>'
        elif page == 'contact': a[4] = '<td id="nav3">Contact</td>'
      s += ''.join(a)
    s += (
      '    </tr>\n'
      '  </table>\n'
      '</nav>\n'
      #
      '\n'
      )
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n'
      '<footer>\n'
      '<!--\n'
      '  <img src="images/BandCollage.jpg" alt="Smiley face" width="100%"><br>\n'
      '-->\n'
      '  Copyright, Localgrown.rocks\n'
      '</footer>\n'
      '\n'
      '</body>\n'
      '</html>\n' )
    return s


# TranBlondes2020
class TranBlondes2020(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'bleachedblondes-2020'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir

    #print( 'TranBlondes__init__' )

    super(TranBlondes2020,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), override, provides site specific HTML preamble.
  def preamble( self, path ):
    s2 = self.rootDir + '/' + self.site + '/'
    s3 = path[len(s2):]
    pageDir = self.relPrefix()+'/'+self.site
    pageAft = ''
    if len(s3) > 0:
      a = s3.split('/')
      page = a[0]
      pageDir += '/' + page
      pageAft = s3[len(page):]
    else:
      page = self.site

    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '\n'
      '<head>\n'
      '  <title>Bleached Blondes</title>\n'
      '  <meta charset="utf-8">\n'
      '  <meta name="Bleached Blondes Band">\n'
      '  <meta content="All womans band for all occations. Home in Provicence, Utah, we serve Logan, and Cache Valley.">\n'
      '\n'
      '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
      '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">\n'
      '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\n'
      '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>\n'
      '\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '\n'
      '\n'
      '<body>\n'
      '\n'
      '<header>\n'
      )
    if page == 'bleachedblondes-2020':
      s += (
        '<div class="container-fluid" style="padding:0;">\n'
        '  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">\n'
        '    <!-- Indicators -->\n'
        '    <ol class="carousel-indicators">\n'
        '      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="1"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="2"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="3"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="4"></li>\n'
        '    </ol>\n'
        '    <!-- Wrapper for slides -->\n'
        '    <div class="carousel-inner">\n'
        '      <div class="item active">\n'
        '        <img src="BlondesBand-1.jpg" alt="BlondesBand-1" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-2.jpg" alt="BlondesBand-2" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-3.jpg" alt="BlondesBand-3" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-4.jpg" alt="BlondesBand-4" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-5.jpg" alt="BlondesBand-5" style="width:100%;">\n'
        '      </div>\n'
        '    </div>\n'
        '    <!-- Left and right controls -->\n'
        '    <a class="left carousel-control" href="#myCarousel" data-slide="prev">\n'
        '      <span class="glyphicon glyphicon-chevron-left"></span>\n'
        '      <span class="sr-only">Previous</span>\n'
        '    </a>\n'
        '    <a class="right carousel-control" href="#myCarousel" data-slide="next">\n'
        '      <span class="glyphicon glyphicon-chevron-right"></span>\n'
        '      <span class="sr-only">Next</span>\n'
        '    </a>\n'
        '  </div>\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2020')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '</div>\n'
        )
    else:
      s += (
        '<div style="height:200px; overflow:hidden;">\n'
        '  <img src="')+pageDir+('/banner-band.jpg" alt="banner-band.jpg" style="width:100%;">\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%; height:200px;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2020')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '  <div style="position:absolute; bottom:10px;">\n'
        '  <h2>'
        )
      if page == 'band': s += 'Band' + pageAft
      elif page == 'songs':   s += 'Songs' + pageAft
      elif page == 'music':   s += 'Music' + pageAft
      elif page == 'clips':  s += 'Clips' + pageAft
      elif page == 'layout':   s += 'Layout' + pageAft
      else: s += '(' + page + ')'
      s += (
        '  </h2>\n'
        '  </div>\n'
        '</div>\n'
        )
    s += (
      '</header>\n'
      '\n'
      '<nav>\n'
      '  <table id="nav1">\n'
      '    <tr>\n' )
    if page == 'bleachedblondes-2020':
      s += (
      '<td id="nav3">Home</td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('band')+('">Band</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('songs')+('">Songs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('music')+('">Music</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('clips')+('">Clips</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('layout')+('">Layout</a></td>\n')
    else:
      a = [
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020')+'">Home</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020/band')+'">Band</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020/songs')+'">Songs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020/music')+'">Music</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020/clips')+'">Clips</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2020/layout')+'">Layout</a></td>' ]
      if len(pageAft) <= 0:
        if page == 'band': a[1] = '<td id="nav3">Band</td>'
        elif page == 'songs': a[2] = '<td id="nav3">Songs</td>'
        elif page == 'music': a[3] = '<td id="nav3">Music</td>'
        elif page == 'clips': a[4] = '<td id="nav3">Clips</td>'
        elif page == 'layout': a[5] = '<td id="nav3">Layout</td>'
      s += ''.join(a)
    s += (
      '    </tr>\n'
      '  </table>\n'
      '</nav>\n'
      #
      '\n'
      )
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n'
      '<footer>\n'
      '<!--\n'
      '  <img src="images/MoodSwingsCollage.jpg" alt="Smiley face" width="100%"><br>\n'
      '-->\n'
      '  Copyright, BleachedBlondesBand.com\n'
      '</footer>\n'
      '\n'
      '</body>\n'
      '</html>\n' )
    return s


# TranBlondes2021
class TranBlondes2021(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'bleachedblondes-2021'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir
    
    #print( 'TranBlondes__init__' )
    
    super(TranBlondes2021,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), override, provides site specific HTML preamble.
  def preamble( self, path ):
    s2 = self.rootDir + '/' + self.site + '/'
    s3 = path[len(s2):]
    pageDir = self.relPrefix()+'/'+self.site
    pageAft = ''
    if len(s3) > 0:
      a = s3.split('/')
      page = a[0]
      pageDir += '/' + page
      pageAft = s3[len(page):]
    else:
      page = self.site

    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '\n'
      '<head>\n'
      '  <title>Bleached Blondes</title>\n'
      '  <meta charset="utf-8">\n'
      '  <meta name="Bleached Blondes Band">\n'
      '  <meta content="All womans band for all occations. Home in Provicence, Utah, we serve Logan, and Cache Valley.">\n'
      '\n'
      '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
      '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">\n'
      '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\n'
      '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>\n'
      '\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '\n'
      '\n'
      '<body>\n'
      '\n'
      '<header>\n'
      )
    if page == 'bleachedblondes-2021':
      s += (
        '<div class="container-fluid" style="padding:0;">\n'
        '  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">\n'
        '    <!-- Indicators -->\n'
        '    <ol class="carousel-indicators">\n'
        '      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="1"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="2"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="3"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="4"></li>\n'
        '    </ol>\n'
        '    <!-- Wrapper for slides -->\n'
        '    <div class="carousel-inner">\n'
        '      <div class="item active">\n'
        '        <img src="BlondesBand-1.jpg" alt="BlondesBand-1" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-2.jpg" alt="BlondesBand-2" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-3.jpg" alt="BlondesBand-3" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-4.jpg" alt="BlondesBand-4" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-5.jpg" alt="BlondesBand-5" style="width:100%;">\n'
        '      </div>\n'
        '    </div>\n'
        '    <!-- Left and right controls -->\n'
        '    <a class="left carousel-control" href="#myCarousel" data-slide="prev">\n'
        '      <span class="glyphicon glyphicon-chevron-left"></span>\n'
        '      <span class="sr-only">Previous</span>\n'
        '    </a>\n'
        '    <a class="right carousel-control" href="#myCarousel" data-slide="next">\n'
        '      <span class="glyphicon glyphicon-chevron-right"></span>\n'
        '      <span class="sr-only">Next</span>\n'
        '    </a>\n'
        '  </div>\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2021')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '</div>\n'
        )
    else:
      s += (
        '<div style="height:200px; overflow:hidden;">\n'
        '  <img src="')+pageDir+('/banner-band.jpg" alt="banner-band.jpg" style="width:100%;">\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%; height:200px;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2021')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '  <div style="position:absolute; bottom:10px;">\n'
        '  <h2>'
        )
      if page == 'bios': s += 'Bios' + pageAft
      elif page == 'music':   s += 'Music' + pageAft
      elif page == 'songs':   s += 'Songs' + pageAft
      else: s += '(' + page + ')'
      s += (
        '  </h2>\n'
        '  </div>\n'
        '</div>\n'
        )
    s += (
      '</header>\n'
      '\n'
      '<nav>\n'
      '  <table id="nav1">\n'
      '    <tr>\n' )
    if page == 'bleachedblondes-2021':
      s += (
      '<td id="nav3">Home</td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('bios')+('">Bios</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('songs')+('">Songs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('music')+('">Music</a></td>\n' )
    else:
      a = [
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2021')+'">Home</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2021/bios')+'">Bios</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2021/songs')+'">Songs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2021/music')+'">Music</a></td>' ]
      if len(pageAft) <= 0:
        if page == 'bios': a[1] = '<td id="nav3">Bios</td>'
        elif page == 'songs': a[2] = '<td id="nav3">Songs</td>'
        elif page == 'music': a[3] = '<td id="nav3">Music</td>'
      s += ''.join(a)
    s += (
      '    </tr>\n'
      '  </table>\n'
      '</nav>\n'
      #
      '\n'
      )
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n'
      '<footer>\n'
      '<!--\n'
      '  <img src="images/MoodSwingsCollage.jpg" alt="Smiley face" width="100%"><br>\n'
      '-->\n'
      '  Copyright, BleachedBlondesBand.com\n'
      '</footer>\n'
      '\n'
      '</body>\n'
      '</html>\n' )
    return s


# TranBlondes2023
class TranBlondes2023(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'bleachedblondes-2022-23'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir
    
    #print( 'TranBlondes__init__' )
    
    super(TranBlondes2023,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), override, provides site specific HTML preamble.
  def preamble( self, path ):
    s2 = self.rootDir + '/' + self.site + '/'
    s3 = path[len(s2):]
    pageDir = self.relPrefix()+'/'+self.site
    pageAft = ''
    if len(s3) > 0:
      a = s3.split('/')
      page = a[0]
      pageDir += '/' + page
      pageAft = s3[len(page):]
    else:
      page = self.site

    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '\n'
      '<head>\n'
      '  <title>Bleached Blondes</title>\n'
      '  <meta charset="utf-8">\n'
      '  <meta name="Bleached Blondes Band">\n'
      '  <meta content="All womans band for all occations. Home in Provicence, Utah, we serve Logan, and Cache Valley.">\n'
      '\n'
      '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
      '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">\n'
      '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\n'
      '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>\n'
      '\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '\n'
      '\n'
      '<body>\n'
      '\n'
      '<header>\n'
      )
    if page == 'bleachedblondes-2022-23':
      s += (
        '<div class="container-fluid" style="padding:0;">\n'
        '  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">\n'
        '    <!-- Indicators -->\n'
        '    <ol class="carousel-indicators">\n'
        '      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="1"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="2"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="3"></li>\n'
        '      <li data-target="#myCarousel" data-slide-to="4"></li>\n'
        '    </ol>\n'
        '    <!-- Wrapper for slides -->\n'
        '    <div class="carousel-inner">\n'
        '      <div class="item active">\n'
        '        <img src="BlondesBand-1.jpg" alt="BlondesBand-1" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-2.jpg" alt="BlondesBand-2" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-3.jpg" alt="BlondesBand-3" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-4.jpg" alt="BlondesBand-4" style="width:100%;">\n'
        '      </div>\n'
        '      <div class="item">\n'
        '        <img src="BlondesBand-5.jpg" alt="BlondesBand-5" style="width:100%;">\n'
        '      </div>\n'
        '    </div>\n'
        '    <!-- Left and right controls -->\n'
        '    <a class="left carousel-control" href="#myCarousel" data-slide="prev">\n'
        '      <span class="glyphicon glyphicon-chevron-left"></span>\n'
        '      <span class="sr-only">Previous</span>\n'
        '    </a>\n'
        '    <a class="right carousel-control" href="#myCarousel" data-slide="next">\n'
        '      <span class="glyphicon glyphicon-chevron-right"></span>\n'
        '      <span class="sr-only">Next</span>\n'
        '    </a>\n'
        '  </div>\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2022-23')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '</div>\n'
        )
    else:
      s += (
        '<div style="height:200px; overflow:hidden;">\n'
        '  <img src="' )+pageDir+('/banner-band.jpg" alt="banner-band.jpg" style="width:100%;">\n'
        '</div>\n'
        '<div style="position:absolute; top:0; padding:0px 20px; width:100%; height:200px;">\n'
        '  <h1>\n'
        '    <a href="')+self.maybeHtml('/bleachedblondes-2022-23')+('" style="color: inherit;text-decoration:none;">\n'
        '    Bleached Blondes Band\n'
        '    </a>\n'
        '  </h1>\n'
        '  <div style="position:absolute; bottom:10px;">\n'
        '  <h2>'
        )
      if page == 'bios': s += 'Bios' + pageAft
      elif page == 'music':   s += 'Music' + pageAft
      elif page == 'songs':   s += 'Songs' + pageAft
      else: s += '(' + page + ')'
      s += (
        '  </h2>\n'
        '  </div>\n'
        '</div>\n'
        )
    s += (
      '</header>\n'
      '\n'
      '<nav>\n'
      '  <table id="nav1">\n'
      '    <tr>\n' )
    if page == 'bleachedblondes-2022-23':
      s += (
      '<td id="nav3">Home</td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('bios')+('">Bios</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('songs')+('">Songs</a></td>\n'
      '<td><a id="nav2" href="')+self.maybeHtml('music')+('">Music</a></td>\n' )
    else:
      a = [
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2022-23')+'">Home</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2022-23/bios')+'">Bios</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2022-23/songs')+'">Songs</a></td>',
      '<td><a id="nav2" href="'+self.maybeHtml('/bleachedblondes-2022-23/music')+'">Music</a></td>' ]
      if len(pageAft) <= 0:
        if page == 'bios': a[1] = '<td id="nav3">Bios</td>'
        elif page == 'songs': a[2] = '<td id="nav3">Songs</td>'
        elif page == 'music': a[3] = '<td id="nav3">Music</td>'
      s += ''.join(a)
    s += (
      '    </tr>\n'
      '  </table>\n'
      '</nav>\n'
      #
      '\n'
      )
    return s

  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n'
      '<footer>\n'
      '<!--\n'
      '  <img src="images/MoodSwingsCollage.jpg" alt="Smiley face" width="100%"><br>\n'
      '-->\n'
      '  Copyright, BleachedBlondesBand.com\n'
      '</footer>\n'
      '\n'
      '</body>\n'
      '</html>\n' )
    return s


# TranWiki
class TranWiki(DpTranslator):
  def __init__( self, baseDir, isRealTime ):
    self.site = 'wiki'
    #self.rootDir = baseDir + '/' + self.site
    self.rootDir = baseDir
    
    #print( 'TranWiki__init__' )
    
    super(TranWiki,self).__init__( self.site, self.rootDir, isRealTime )

  # preamble(), provides site specific HTML preamble.
  def preamble( self, path ):
    s = (
      '<!DOCTYPE html>\n'
      '<html>\n'
      '<head>\n'
      '  <meta charset="UTF-8">\n'
      '  <title>' + self.site + '</title>\n'
      '  <link rel="stylesheet" href="' + self.cssfile + '">\n'
      '</head>\n'
      '<body>\n'
      '\n'
      '<!-- Side navigation -->\n'
      '<div class="sidenav">\n' )
    # Menu items
    a = path[len(self.rootDir):].split('/')
    
    #print( a )
    
    html = ''    
    html += '<a href="'+self.maybeHtml(self.relPrefix())+'">(home)</a>\n'
    
    if len(a) > 1:
      s3 = '..'
      for i in range(1, len(a)-2):
        s3 += '/..'
      for i in range(1, len(a)-1):
        html += '<a href="' + self.maybeHtml(s3) + '">' + a[i] + '</a>\n'
        s3 = s3[:-3]
      html += '<a href="'+self.maybeHtml('.')+'">' + a[-1] + '</a>\n'
    s += html
    #
    s += (
      '</div>\n'
      '\n'
      '<!-- Page content -->\n'
      '<div class="main">\n\n' )
    #
    # Put a nav-path across the top right of the main page
    html = ''
    a = path[len(self.rootDir)+1:].split('/')
    if len(a) > 0:
      html = '<div style="float:right;">\n'
      if len(a) > 1:
        s3 = '..'
        for i in range(0, len(a)-2):
          s3 += '/..'
        for i in range(0, len(a)-1):
          html += '/ <a href="' + self.maybeHtml(s3) + '">' + a[i] + '</a>\n'
          s3 = s3[:-3]
      html += '</div>\n'
      s += html
    #
    return s
  
  # postamble(), override, provides site specific HTML postamble.
  def postamble( self ):
    s = (
      '\n\n</div><!-- "main" -->\n'
      '</body>\n</html>\n' )
    return s

