$(document).ready(function() {

    //prepare the paging position
    $("#paging").show();
    $("#paging a:first").addClass("active");
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({
        opacity: 0.85
    });
    //Set the caption background to semi-transparent
    $('#gallery .caption .content').css({
        opacity: 1
    });

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

    //Execute the slideShow
    slideShow();
    //On Click
    $("#paging a").click(function() {
        clearInterval(play); //Stop the rotation
        $("#paging a").removeClass("active");
        $(this).addClass("active"); //Activate the clicked paging
        slideShow(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });

    $("#radio_direction_0").click(function(){
        $("#text_return_date").parent().show()
    })
    $("#radio_direction_1").click(function(){
        $("#text_return_date").parent().hide()
    })
});

function slideShow() {
    var currentlink = $('#paging a.active');
    var current_idx = parseInt(currentlink.attr("rel")) - 1;
    var current = $("#gallery a:eq(" + current_idx + ")");

    //Set the opacity of all images to 0
    $('#gallery a').css({
        opacity: 0.0
    });

    //Get the current image and display it (set it to full opacity)
    current.css({
        opacity: 1.0
    });

    $("#gallery").unbind("click")
    $("#gallery").click(function(){
        var currentlink = $('#paging a.active');
        var current_idx = parseInt(currentlink.attr("rel")) - 1;
        var current = $("#gallery a:eq(" + current_idx + ")");
        if (current.attr("href") != "javascript:void(0)"){
            window.location = current.attr("href")
        }
        return false;
    })

    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html(current.find('img').attr('rel'));
    //Show the paging and activate its first link

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

function gallery() {
    var currentlink = $('#paging a.active');
    //Get next link, if it reached the end of the slideshow, rotate it back to the first image
    var nextlink = (currentlink.next().length) ? currentlink.next() : $('#paging a:first');

    //Get image index
    var current_idx = parseInt(currentlink.attr("rel")) - 1;
    var next_idx = parseInt(nextlink.attr("rel")) - 1;

    var current = $("#gallery a:eq(" + current_idx + ")");

    $("#gallery").unbind("click")
    $("#gallery").click(function(){
        var currentlink = $('#paging a.active');
        var current_idx = parseInt(currentlink.attr("rel")) - 1;
        var current = $("#gallery a:eq(" + current_idx + ")");
        if (current.attr("href") != "javascript:void(0)") {
            window.location = current.attr("href")
        }
        return false;
    })
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = $("#gallery a:eq(" + next_idx + ")");

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

    //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({
        height: '1px'
    }, {
        queue:true,
        duration:300
    });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({
        height: '100px'
    },500 );
    //Set the caption background to semi-transparent
    $('#gallery .caption .content').css({
        opacity: 1
    });

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

    $("#paging a").removeClass("active");
    nextlink.addClass("active");
}