$(document).ready(function() {
  /**
   * 
   * Auto image styler 
   * Takes a standard image item in the body with a class of 'styled-image' and styles it.  Example output below:
   * 
   * 1.  Image in body - <img src="" vspace="" hspace="" width="" align="right|left" />
   * 
   * 2.  Converts: vspace to top and bottom margin, hspace to left and right margins, align to float left or right...
   * 
   * 3.  Output as below:
   * 
   * <div class="img-outer">
       <img src="[img src]" /><div class="img-alt">[img alt text]</div>
     </div>
   */  
  $('img.styled-image').each(function () {
    var img_src = $(this).attr('src');
    var img_alt = $(this).attr('alt');
    var img_width = ($(this).attr('width') > 0)?'width: ' + $(this).attr('width') + 'px; ':'';
    var img_align = (($(this).attr('align') == 'right' || $(this).attr('align') == 'left'))?'float: '+$(this).attr('align'):'float: left'; //we can only work with align left or right
    var img_hspace = ($(this).attr('hspace') != -1)?$(this).attr('hspace'):0; //this would affect left, right margin
    var img_vspace = ($(this).attr('vspace') != -1)?$(this).attr('vspace'):0;; //this would affect top, bottom margin
    $(this).replaceWith('<div class="img-outer" style="' + img_width + img_align + '; margin:' + 
      img_vspace + 'px ' + //top
      (($(this).attr('align') == 'right')?0:img_hspace) + 'px ' + //right
      img_vspace + 'px ' + //bottom
      (($(this).attr('align') == 'left')?0:img_hspace) + 'px;' + //left
      '"><img src="' + img_src + '" alt="' + img_alt + '" /><div class="img-alt">' + img_alt + '</div></div>');    
  });
  
  /**
   * Navigation Animation Script
   * 
   * 1. HTML setup example
   * <ul class="nav current-home">
       <li title="Home" class="home"><a href="http://192.168.0.100/pariscues-v2/index.php?page=home" class="" title="Home">Home</a></li>
       <li title="About Us" class="about-us"><a href="http://192.168.0.100/pariscues-v2/index.php?page=about-us" class="" title="About Us">About Us</a></li>
     </ul>

   * 
   * 2. CSS setup example - for Home
   * NOTE: navigation image needs to be setup carefully.
   *  .nav .home a:link,
      .nav .home a:visited,
      .nav-home
      { left:0px; width:207px; }
      
      .nav-home, 
      .nav-home-click
      { 
          height:33px; 
          width:207px; 
          position:absolute; 
          top:0;
          left:0; 
          background:url('../images/nav/nav.jpg') no-repeat 0px -33px; 
      }
      
      .nav .home a:hover,
      .nav .home a:focus
      { background:url('../images/nav/nav.jpg') no-repeat 0px -33px; }
      
      .nav .home a:active,
      .nav.current-home .home a,
      .nav-home-click,
      .nav .home .selected
      { background:url('../images/nav/nav.jpg') no-repeat 0px -66px; }
   */
  var parent = $('.nav').attr('class');
  $('.nav li').each(function() {
    var current = "nav current-" + $(this).attr('class');
    if (parent != current) {
      $(this).children('a').css({backgroundImage:"none"});  //disables default css rollovers since we will use the jquery version.  If jscript isn't available then this will not activate and the default css nav will function
    }
  });
  
  $('.nav li').mouseover(function() {
    var current = $(this).attr('class');
    $(this).before('<div class="nav-'+ current +'"></div>');
    $('div.nav-' + current).css({display:"none"}).slideDown(200);
  }).mouseout(function() {
    var current = $(this).attr('class');
    $('div.nav-' + current).slideUp(100, function() {
      $(this).remove();
    });
  }).mousedown(function() {
    var current = $(this).attr('class');
    $('div.nav-' + current).attr("class", "nav-" + current + "-click");      
  }).mouseup(function() {
    var current = $(this).attr('class');
    $('div.nav-' + current + '-click').attr("class", "nav-" + current);
  });
});