$(document).ready(function() {
   var  container= $('article#image-gallery'),
        gallery= container.find('div#gallery'),
        image= gallery.find('div.gallery-media'),
        nav= '',
        prev= '<a href="#previous-image" id="prev">Previous</a>',
        next= '<a href="#next-image" id="next">Next</a>',
        nums= [],
        numLink= '',
        links= '',
        key= '',
        height= 0;
        
    if (image.length > 1)
    {
        image.each(function(index) {
            index= index+1;
            
            if ($(this).height() > height) {
                height= $(this).height();
                gallery.css('height', height);
            }
            
            if (index == image.length - image.length + 1) {
                prev = '<span id="prev">Previous</span>';
                numLink= '<strong name="'+index+'">'+index+'</strong>';
                $(this).attr('class', 'current');
            } else {
                numLink= '<a class="numLink" href="#'+index+'">'+index+'</a>';
                $(this).css('display', 'none');
            }
            
            nums.push(' '+numLink+' ');
            
            $(this).attr('id', index);
        });
        nav= $('<div id="gallery-nav">'+ prev + nums.join('') + next +'</div>');
        container.append(nav);
    }
    
    $('a.numLink').live('click', function(event) {
        event.preventDefault();
        
        //Get the current key
        key= gallery.find('.current').attr('id').replace('#', '');
        
        //Replace the bold numeral representation of the current media box with a link
        $('strong[name="'+key+'"]').replaceWith('<a class="numLink" href="#'+key+'">'+key+'</a>');
        
        //Get the next key
        key= $(this).attr('href');
        gallery.find('.current').css('display', 'none').removeClass('current');
        gallery.find(key).css('display', 'block').addClass('current');
        
        //Replace the link to the next media box with a bold numeral representation
        key= key.replace('#', '');
        $(this).replaceWith('<strong name="'+key+'">'+key+'</strong>');
        
        if (key == image.length - image.length + 1) {
            $('a#prev').replaceWith('<span id="prev">Previous</span>');
        }
        
        if (key < image.length) {
            $('span#next').replaceWith('<a href="#next" id="next">Next</a>');
        }
        
        if (key == image.length) {
            $('a#next').replaceWith('<span id="next">Next</span>');
        }
        
        if (key > 1) {
            $('span#prev').replaceWith('<a href="#prev" id="prev">Previous</a>');
        }
    });
    
    $('a#prev').live('click', function(event) {
        event.preventDefault();
        
        //Get the current key
        key= gallery.find('.current').attr('id').replace('#', '');
        
        //Replace the bold numeral representation of the current media box with a link
        $('strong[name="'+key+'"]').replaceWith('<a class="numLink" href="#'+key+'">'+key+'</a>');
        
        //Get the next key
        key= parseFloat(key) - 1;
        gallery.find('.current').css('display', 'none').removeClass('current');
        gallery.find('#'+key).css('display', 'block').addClass('current');
        
        //Replace the link to the next media box with a bold numeral representation
        $('a[href="#'+key+'"]').replaceWith('<strong name="'+key+'">'+key+'</strong>');
        
        if (key == image.length - image.length + 1) {
            $(this).replaceWith('<span id="prev">Previous</span>');
        }
        
        if (key < image.length) {
            $('span#next').replaceWith('<a href="#next" id="next">Next</a>');
        }
    });
    
    $('a#next').live('click', function(event) {
        event.preventDefault();
        
        //Get the current key
        key= gallery.find('.current').attr('id').replace('#', '');
        
        //Replace the bold numeral representation of the current media box with a link
        $('strong[name="'+key+'"]').replaceWith('<a class="numLink" href="#'+key+'">'+key+'</a>');
        
        //Get the next key
        key= parseFloat(key) + 1;
        gallery.find('.current').css('display', 'none').removeClass('current');
        gallery.find('#'+key).css('display', 'block').addClass('current');
        
        //Replace the link to the next media box with a bold numeral representation
        $('a[href="#'+key+'"]').replaceWith('<strong name="'+key+'">'+key+'</strong>');
        
        if (key == image.length) {
            $(this).replaceWith('<span id="next">Next</span>');
        }
        
        if (key > 1) {
            $('span#prev').replaceWith('<a href="#prev" id="prev">Previous</a>');
        }
    });
});