$(document).ready(function() {
  /* STYLING */
  //images
  //<div class="img-outer">
  //  <img src="" /><div class="img-alt">test</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 */
  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"}).fadeIn(500);
  }).mouseout(function() {
    var current = $(this).attr('class');
    $('div.nav-' + current).fadeOut(300, 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);
  });
});