$(document).ready(function() {

    //Execute the slideShow
    slideShow();

});

$(window).load(function() {
    var next = $('#gallery a:first');

    next.find('img').ready(function() {
        var next1 = $('#gallery a:first');
        var IE = /*@cc_on!@*/false;
        if (IE)
            next1.find('img').css("display", "block");
        else
            next1.find('img').css("display", "");
        var strH = next1.find('img').height();
        strH = parseInt(strH) / 2;
        var strW = next1.find('img').width();
        strW = parseInt(strW) / 2;
        strH = strH + 2;
        strW = strW + 2;
        next1.css("margin-top", "-" + strH + "px");
        next1.css("margin-left", "-" + strW + "px");

        if (next1.css("margin-top") != "-" + strH + "px") {
            //alert(strH + ' ' + strW);
            next1.css("margin-top", "-" + strH + "px");
            next1.css("margin-left", "-" + strW + "px");
        }
    });

    var next = $('#gallery1 a:first');

    next.find('img').ready(function() {
        //alert('sa');
        var next1 = $('#gallery1 a:first');
        var IE = /*@cc_on!@*/false;
        if (IE)
            next1.find('img').css("display", "block");
        else
            next1.find('img').css("display", "");
        var strH = next1.find('img').height();
        strH = parseInt(strH) / 2;
        var strW = next1.find('img').width();
        strW = parseInt(strW) / 2;
        strH = strH + 2;
        strW = strW + 2;
        next1.css("margin-top", "-" + strH + "px");
        next1.css("margin-left", "-" + strW + "px");

        if (next1.css("margin-top") != "-" + strH + "px") {
            //alert(strH + ' ' + strW);
            next1.css("margin-top", "-" + strH + "px");
            next1.css("margin-left", "-" + strW + "px");
        }
    });
});

function slideShow() {

    if ($('#gallery a').length > 0) {
        
        //Set the opacity of all images to 0
        $('#gallery a').css({ opacity: 0.0 });
        $('#gallery a').css('display','none');
        
        //Get the first image and display it (set it to full opacity)
        $('#gallery a:first').css({ opacity: 1.0 });
        $('#gallery a:first').css('display','block');
        
        var next = $('#gallery a:first');

        next.find('img').ready(function() {
            var next1 = $('#gallery a:first');
            var strH = next1.find('img').height();
            strH = parseInt(strH) / 2;
            if (strH < 25) {
                next1.find('img').css("display", "none");
            }
            var strW = next1.find('img').width();
            strW = parseInt(strW) / 2;
            strH = strH + 2;
            strW = strW + 2;
            next1.css("margin-top", "-" + strH + "px");
            next1.css("margin-left", "-" + strW + "px");

            if (next1.css("margin-top") != "-" + strH + "px") {
                //alert(strH + ' ' + strW);
                next1.css("margin-top", "-" + strH + "px");
                next1.css("margin-left", "-" + strW + "px");
            }
        });
        
        //Resize the width of the caption according to the image width
        $('#gallery .caption').css({ width: '100%' });

        //Get the caption of the first image from alt attribute and display it
        $('#gallery .content').html($('#gallery a:first').find('img').attr('alt')).animate({ opacity: 0.7 }, 400);
        $('#gallery .content').html($('#gallery a:first').find('img').attr('alt')).animate({ opacity: 0.7 }, 400);
        
        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery()', 6000);
    }
    
    if ($('#gallery1 a').length > 0) {
        //Set the opacity of all images to 0
        $('#gallery1 a').css({ opacity: 0.0 });

        $('#gallery1 a').css('display','none');
        //Get the first image and display it (set it to full opacity)
        $('#gallery1 a:first').css({ opacity: 1.0 });
        $('#gallery1 a:first').css('display','block');
        

        var next = $('#gallery1 a:first');

        next.find('img').ready(function() {
            //alert('sa');
            var next1 = $('#gallery1 a:first');
            var strH = next1.find('img').height();
            strH = parseInt(strH) / 2;
            if (strH < 25) {
                next1.find('img').css("display", "none");
            }
            var strW = next1.find('img').width();
            strW = parseInt(strW) / 2;
            strH = strH + 2;
            strW = strW + 2;
            next1.css("margin-top", "-" + strH + "px");
            next1.css("margin-left", "-" + strW + "px");

            if (next1.css("margin-top") != "-" + strH + "px") {
                //alert(strH + ' ' + strW);
                next1.css("margin-top", "-" + strH + "px");
                next1.css("margin-left", "-" + strW + "px");
            }
        });

        //Set the caption background to semi-transparent
        //$('#gallery .caption').css({ opacity: 0.7 });
        //$('#gallery1 .caption').css({ opacity: 0.7 });

        //Resize the width of the caption according to the image width
        $('#gallery1 .caption').css({ width: '100%' });

        //Get the caption of the first image from alt attribute and display it
        $('#gallery1 .content').html($('#gallery1 a:first').find('img').attr('alt')).animate({ opacity: 0.7 }, 400);
        $('#gallery1 .content').html($('#gallery1 a:first').find('img').attr('alt')).animate({ opacity: 0.7 }, 400);

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery1()', 6200);
    }
}

function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
    
    $('#gallery a').css('display','none');
    next.css('display','block');

    var strH = next.find('img').height();
    strH = parseInt(strH) / 2;
    var strW = next.find('img').width();
    strW = parseInt(strW) / 2;
    strH = strH + 2;
    strW = strW + 2;
    next.css("margin-top", "-" + strH + "px");
    next.css("margin-left", "-" + strW + "px");

    //Get next image caption
    var caption = next.find('img').attr('alt');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');

    //Set the opacity to 0 and height to 1px
    //$('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    //$('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '30px' }, 500);

    //Display the content
    $('#gallery .content').html(caption);


}

function gallery1() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery1 a.show') ? $('#gallery1 a.show') : $('#gallery1 a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery1 a:first') : current.next()) : $('#gallery1 a:first'));
    
    $('#gallery1 a').css('display','none');
    next.css('display','block');

    var strH = next.find('img').height();
    strH = parseInt(strH) / 2;
    var strW = next.find('img').width();
    strW = parseInt(strW) / 2;
    strH = strH + 2;
    strW = strW + 2;
    next.css("margin-top", "-" + strH + "px");
    next.css("margin-left", "-" + strW + "px");

    //Get next image caption
    var caption = next.find('img').attr('alt');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');

    //Set the opacity to 0 and height to 1px
    //$('#gallery1 .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    //$('#gallery1 .caption').animate({ opacity: 0.7 }, 100).animate({ height: '30px' }, 500);

    //Display the content
    $('#gallery1 .content').html(caption);


}