/*
===   MODAL   ===
*/
function getWindowHeight() {
    var windowHeight;
    if (window.innerHeight && window.scrollMaxY) {
        windowHeight = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) {
        windowHeight = document.body.scrollHeight;
    } else {
        windowHeight = document.body.offsetHeight;
    }
    return windowHeight;
}



function clientHeight() {
    var y = 0;
    if (self.pageYOffset) {
        y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {

        y = document.documentElement.scrollTop;
    }

    if (y == getWindowHeight())
    { return 0; }
    else
    { return y; }


}



//Main function , assigns behaiviors to different elements , when document is ready
$(document).ready(function () {

    var sideHeight;
    var mainHeight;

    sideHeight = $('#side').height();
    mainHeight = $('#main').height();

    if (sideHeight > mainHeight) {
        $('#main').css('height', sideHeight + 'px');
    }
    else {
        $('#side').css('height', mainHeight + 'px');
    }

     if (($('#side').height()) > $('#main').height()) {
        $('#main').css({ height: $('#side').height() + 85 + 'px' });
        $('#side').css({ height: $('#side').height() + 25 + 'px' });
    }
    else {
        $('#side').css({ height: $('#main').height() + 'px' });
    }

    $('#gallery>ul>li>div>a').click(function (e) {

        e.preventDefault();
        var id = $(this).attr('id');
        var a = $(this);
        var count = $('#gallery>ul>li').size();

        var objName = $('#name_' + id)
        var imgName = objName.html()


        $('body').append('<div id="mask"></div>');
        $('#mask').css({ position: 'absolute', display: 'none', zIndex: '10', opacity: '0.5', backgroundColor: '#000', top: '0px', left: '0px' });
        $('body').append('<div id="popup"></div>');      
        
        $('#popup').append('<div id="close">x</div>');
        $('#popup').css('backgroundImage', 'url(' + $(this).attr('href') + ')');
        $('#popup').css({ position: 'absolute', zIndex: '12', display: 'block', backgroundColor: '#fff', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', width: '780px', height: '600px', border: '2px #8DC9E4 solid' });
        $('#close').css({ position: 'absolute', color: '#fff', fontWeight: 'bold', cursor: 'pointer', display: 'block', top: '0px', right: '0px', width: '20px', height: '18px', paddingTop: '2px', textAlign: 'center', backgroundColor: '#fcb84b', borderLeft: '2px solid #8DC9E4', borderBottom: '2px solid #8DC9E4' });
        $('#popup').append('<div id="next">></div>');
        $('#next').css({ position: 'absolute', color: '#fff', fontWeight: 'bold', cursor: 'pointer', display: 'block', top: '290px', right: '0px', width: '30px', height: '25px', paddingTop: '5px', textAlign: 'center', backgroundColor: '#fcb84b', borderTop: '2px solid #8DC9E4', borderLeft: '2px solid #8DC9E4', borderBottom: '2px solid #8DC9E4' });
        $('#popup').append('<div id="prev"><</div>');
        $('#prev').css({ position: 'absolute', color: '#fff', fontWeight: 'bold', cursor: 'pointer', display: 'block', top: '290px', left: '0px', width: '30px', height: '25px', paddingTop: '5px', textAlign: 'center', backgroundColor: '#fcb84b', borderTop: '2px solid #8DC9E4', borderRight: '2px solid #8DC9E4', borderBottom: '2px solid #8DC9E4' });

        //$('#popup').append('<div id="imgDesc">'+ imgName +'</div>');
        //$('#imgDesc').css({color: '#000000', fontWeight: 'bold',paddingTop: '15px', textAlign: 'center' });
        
        if (id == 0) { $('#prev').hide(); }
        if (id == count - 1) { $('#next').hide(); }
        var url = $(this).attr('href');

        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        $('#mask').click(function () {
            $(this).remove();
            $('#popup').remove();
        });
        $('#close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();
            $('#mask, #popup').remove();
        });

        $('#next').click(function (e) {
            $('#popup').css('backgroundImage', 'url(' + $('#' + (parseInt(id) + 1)).attr('href') + ')');
            id = parseInt(id) + 1;

            var objName = $('#name_' + id)
            var imgName = objName.html()
            $('#imgDesc').text(imgName)
          
            if (id == 1) { $('#prev').show(); }
            if (id == count - 1) { $('#next').hide(); }
        });
        $('#prev').click(function (e) {
            $('#popup').css('backgroundImage', 'url(' + $('#' + (parseInt(id) - 1)).attr('href') + ')');
            id = parseInt(id) - 1;

            var objName = $('#name_' + id)
            var imgName = objName.html()
            $('#imgDesc').text(imgName)

            if (id < count) { $('#next').show(); }
            if (id == 0) { $(this).hide(); }
        });
        //transition effect		
        $('#mask').fadeIn(500);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $('#popup').css('top', (clientHeight() + 20));
        $('#popup').css('left', winW / 2 - $('#popup').width() / 2);


    });


});