$(document).ready(function() { main() });


function main() {

initializePicPosition();



// ---------------------- opens pic -----------------------------------------------------

$('.thumbnail').click(function() { initializePicPosition();
                                   $('*').css('visibility','hidden');$('body').css('visibility','visible').css('background','#333333');
                                   $('#piccontainer').empty().css('visibility','visible').show().addClass('loading');
                                   var pattern1 = /\d/;
                                   var pattern2 = /gif/;
                                   var xxx      = $(this).children().children().attr('src');
                                   var bigpic = 'images/pics/' + xxx.slice(xxx.search(pattern1),xxx.search(pattern2)) + 'jpg';var image1 = $('<img>').attr('src', bigpic);

                                   var img = new Image();
                                   $(img).load(function() { $('#piccontainer').removeClass('loading').append(this).prepend('<div id="close"></div>');
                                                            $(this).show(); })
                                         .attr('src', bigpic);

});

// ----------------------------------------------------------------------------------------





// ---------------------- closes pic -----------------------------------------------------

$('#piccontainer').click(function() { $('#piccontainer').hide();$('*').css('visibility','visible');$('body').css('background','#ffffff'); });

// ----------------------------------------------------------------------------------------



// ---------------------- next page -------------------------------------------------------

$('#next').click(function() { $('#page1pics').hide();
                              $('#next').hide();
                              $('#previous').show();
                              $('#page2pics').show();
});

// ----------------------------------------------------------------------------------------



// ---------------------- previous page ---------------------------------------------------

$('#previous').click(function() { $('#page2pics').hide();
                                  $('#previous').hide();
                                  $('#next').show();
                                  $('#page1pics').show();
});

// ----------------------------------------------------------------------------------------




}

// ---------------------------------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------- end main function -----------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------------------------------------------





// ------------------------ initializes pic position ---------------------------------------------------------------------
function initializePicPosition() {
var centerX  = parseInt((($('body').outerWidth())/2)-400);

var amountscrolled = 0;
if (document.body && document.body.scrollTop) { amountscrolled = document.body.scrollTop;}
if (document.documentElement && document.documentElement.scrollTop) { amountscrolled = document.documentElement.scrollTop; }
if (window.pageYOffset) { amountscrolled = window.pageYOffset; }

document.getElementById('piccontainer').style.left = centerX+'px';
document.getElementById('piccontainer').style.top  = 100 + amountscrolled +'px';
}
// -----------------------------------------------------------------------------------------------------------------------