function showImage(url){
    url = url.src.replace('/thumbs', '');
    $('#load').fadeIn('normal');

    if($('#image1').attr('name') == ''){
        $('#image1').attr('src', url);
        $('#image1').attr('name', 'old')
        $('#image2').attr('name', '')
        $('#image2').fadeOut('normal')
    } else {
        $('#image2').attr('src', url);
        $('#image2').attr('name', 'old')
        $('#image1').attr('name', '')
        $('#image1').fadeOut('normal')
    }
}

function loadedImage(){
    $('#load').fadeOut('normal');
    if($('#image1').attr('name') == ''){
        $('#image2').fadeIn('normal')
    } else {
        $('#image1').fadeIn('normal')
        
    }
}


$(function(){

    var conWidth = 2412;
    $('#pages').width(conWidth+"px");

    var pagewidth = $('.page').width()+8;

    $('#home').click(function() {
        $('#pages').animate({
            "left" : "0"
        }, "slow")

    })

    $('#gallery').click(function() {
        $('#pages').animate({
            "left" : "-"+pagewidth+"px"
        }, "slow")
    })

    $('#contact').click(function() {
        $('#pages').animate({
            "left" : "-"+(pagewidth*2)+"px"
        }, "slow")
    })

    $("#nav-home")
        .mouseover(function() {
            var src = $(this).attr("src").match(/[^\.]+/) + "-ovr.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-ovr", "");
            $(this).attr("src", src);
        });

    $("#nav-gallery")
        .mouseover(function() {
            var src = $(this).attr("src").match(/[^\.]+/) + "-ovr.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-ovr", "");
            $(this).attr("src", src);
        });

    $("#nav-contact")
        .mouseover(function() {
            var src = $(this).attr("src").match(/[^\.]+/) + "-ovr.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-ovr", "");
            $(this).attr("src", src);
        });

   // $('#gal-nav li img').attr("onclick", "showImage(this)")

    //show calendar
    $("#arrival").datepicker({showOn: 'button', buttonImage: 'images/calendar.png', buttonImageOnly: true});
    $("#departure").datepicker({showOn: 'button', buttonImage: 'images/calendar.png', buttonImageOnly: true});

    //form validator
    $('#booking-form-frm').FormValidate({
            phpFile:"send.php",
            ajax:true,
            validCheck: false
    });


    // Gallery Sliding

    var imagesCnt = $('#gal-nav-list ul li').length;
    var imgWidth = parseInt($('#gal-nav-list ul li').width());
    var imgMarginL = parseInt($('#gal-nav-list ul li').css('margin-left'));
    var imgMarginR = parseInt($('#gal-nav-list ul li').css('margin-right'));

    var totalImgWidth = imgWidth+imgMarginL+imgMarginR+2; // total width +2px border
    var totalListWidth = (totalImgWidth*imagesCnt);

    var visibleArea = totalImgWidth*6;

    $('#gal-nav-list ul').css('width', '505px');


    $('#btn-next').click(function(){
        
        var currentPos = parseInt($('#gal-nav-list').css('left'));
        var newPos = currentPos - visibleArea;

        if(Math.abs(newPos) > totalListWidth) newPos = 0;

        $('#gal-nav-list').animate({
            'left' : newPos+'px'
        });
    });

    $('#btn-prev').click(function(){

        var currentPos = parseInt($('#gal-nav-list').css('left'));
        var newPos = currentPos + visibleArea;

        if(newPos > 0) newPos = 0;

        $('#gal-nav-list').animate({
            'left' : newPos+'px'
        });
    });


    // Accordion
  $(document).ready(function(){
    $("#welcome-txt").accordion({ autoHeight: false});
  });


})