$(document).ready(function () {

if ($('#slider')) {
//$('.panel').addClass('highlight');
   var $panels = $('#slider .scrollContainer > .panel');
	  //alert($('area').length);
	  
    var $container = $('#slider .scrollContainer');
    var vetical = true;
    if (vetical) {
        $panels.css({
      //      'float' : 'left',
            'position' : 'relative'
        });


       $container.css('height', $panels[0].offsetHeight * $panels.length);
	//   console.log($panels.length); 
    }
   // console.log($panels.offsetHeight * $panels.length);
    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
//     $scroll
//         .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
//         .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

    // handle nav selection
    function selectNav() {
           
 //       $(this).addClass('selected').siblings(this).removeClass('selected');


                 $(this)
            .parents('map:first')
                .find('area')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
  //      console.log(this); 
      var idpan = $(this).attr("href").replace('#block', ''); 
             
   //   console.log(idpan);  
 //    var elpan = $('.scrollContainer').find('.panel[id$="' + idpan + '"]');
 //     $('.scrollContainer').css('bottom', (-2418 + (403 * idpan)));
 $('.scrollContainer').animate({'bottom': (-2418 + (403 * idpan))}, 1);
// .animate({opacity: 0.1}, 1)
 
// .animate({opacity: 1}, 1)
 
 //     console.log(elpan);
    // $('.scrollContainer', elpan);   
    }
     
    $('area').mouseover(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#m_dom1').find('area[href$="' + data.id + '"]').get(0);
    //     var elpan = $('.scrollContainer').find('.panel[id$="' + data.id + '"]').get(0);
         selectNav.call(el); 
   //   console.log(el);
        
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
         $('area:first').click();
    }
     else {
        $('area:first').mouseover();
    }
  
    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
          

//     // apply serialScroll to the slider - we chose this plugin because it 
//     // supports// the indexed next and previous scroll along with hooking 
//     // in to our navigation.
//     $('#slider').serialScroll(scrollOptions);
// 
//     // now apply localScroll to hook any other arbitrary links to trigger 
//     // the effect
//     $.localScroll(scrollOptions);
// 
//     // finally, if the URL has a hash, move the slider in to position, 
//     // setting the duration to 1 because I don't want it to scroll in the
//     // very first page load.  We don't always need this, but it ensures
//     // the positioning is absolutely spot on when the pages loads.
//     scrollOptions.duration = 1;
//     $.localScroll.hash(scrollOptions);
}
});