var BouwId = {
    navIsOpen: false,
    closeNav: function () {
        $('#nav').stop().fadeTo('fast', 0, function () {
            $('#nav').hide();
        });
    },
    init: function () {
        var self = this;
        self.initSuperSized();

        if ($(window).height() < 650) {
            $('#quicklinks').addClass('two-items');
        }

        if (navigator.userAgent.indexOf('Mobile') != -1 && navigator.userAgent.indexOf('AppleWebKit') != -1) {
            self.initMobileWebKit();
        }
        else {
            $('#menu-trigger').bind('mouseover', function () {
                $('#nav').height($(document).height());
                $('#nav').stop().fadeTo('fast', 1);
            });
            $('#nav').bind('mouseleave', function () {
                self.closeNav();
            });
        }

        $('#menu-close').bind('click', function () {
            self.closeNav();
            return false;
        });

        $('.autolink').each(function (ixd, item) {
            var aTag = $('a:first', item);
            if (aTag.length > 0) {
                $(this).css({ cursor: 'pointer' }).click(function () {
                    document.location.href = aTag.attr('href');
                    return false;
                }).addClass('active');
            }
        });
        
        $('a.back').click(function(e) {
			e.preventDefault();
			history.go(-1);
        });

        $('#quicklinks-trigger').click(function () {
            var displacement = $(this).hasClass('show') ? 0 : 250;
            $('#quicklinks, #quicklink-navigation span').animate({ left: displacement }, 'slow');
            $(this).toggleClass('show');
            return false;
        });

        if ($('#quicklinks .sidelink').length > 3) {
            $('#quicklinks').scrollable({ vertical: true, prev: '.quicklinks-less', next: '.quicklinks-more' }); //.autoscroll({ interval: 4000, speed: 1000 });
            $('#quicklink-navigation span').fadeIn();
        }
        else {
            $('#quicklink-navigation').remove();
        }

        self.fixRemainder();
        $(window).smartresize(function (event) {
            // Your event handler code goes here.
            self.fixRemainder();
        });

        if ($('.mason-wall').length > 0) {
            var $container = $('.mason-wall');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '.item',
                    columnWidth: 120,
                    isRTL: true
                });
                setTimeout(function () {
                    $('.mason-wall').fadeTo(500, 1);
                }, 200);
            });

            /* CHANGE 2011-07-12 */
            // de overlay moet in de A tag komen
            $('.mason-wall .item a, .mason-wall .item:not(:has(a))').prepend('<span class="overlay">');

			/* CHANGE 2011-09-26 */
			// Fixed won't work on tablets ...
			$('.mason-wall .item a, .mason-wall .item:not(:has(a))').each(function () {
				var title = $('img', this).attr('alt');
				var id = $(this).parent().attr('id').split('thumb-');
				if (title != '') {
					// Prevent IE from showing it's own tooltip
					$('img', this).attr('alt', '');
					$('body').append('<div id="tooltip-' + id[1] + '" class="tooltip"><span>' + title + '</span></div>');
				}
			});

            var css3Support = $('html').hasClass('rgba') && $('html').hasClass('cssanimations');

            $('.item', $container).mouseover(function () {
				var id = $(this).attr('id').split('thumb-');
				var coord = {
					left: $(this).offset().left + $(this).width() / 2 - 50,
					top: $(this).offset().top + 5
				}
				if($.browser.msie) {
					$('#tooltip-' + id[1]).css(coord).show();
				} else {
					$('#tooltip-' + id[1]).css(coord).stop().fadeTo(300, 1);
				}
                if (!css3Support) {
                    $('.overlay', this).stop().fadeTo(300, 0);
                }
            }).mouseleave(function () {
				var id = $(this).attr('id').split('thumb-');
                // position the tooltip way negative, because they can trigger the mouseover of .item
				if($.browser.msie) {
					$('#tooltip-' + id[1]).css({ left: -1000, top: -1000 }).hide();
				} else {
					$('#tooltip-' + id[1]).css({ left: -1000, top: -1000 }).stop().fadeTo(300, 0);
				}
                if (!css3Support) {
                    $('.overlay', this).stop().fadeTo(300, .3);
                }
            });

            /* ADDED 2011-07-12 */
            // http://colorpowered.com/colorbox/
            $('a', $container).colorbox({ maxWidth: '80%', maxHeight: '80%', current: '', title: function(){
                return $(this).attr('data-title');
            }}); /* current: 'beeld {current} van {total}' */
        }
    },

    fixRemainder: function () {
        var newWidth = $(window).width() - $('#main').outerWidth(); //- parseInt($('#remainder').css('paddingLeft'));
        $('#remainder').css('width', newWidth);
    },

    initMobileWebKit: function () {
        $('#menu-trigger').bind('click', function () {
            $('#nav').height($(document).height()).fadeToggle(500);
            return false;
        });

        window.onorientationchange = function (e) {
            // window.orientation property contains the orientation
            //alert('Reloading page because you turned the device.');
            document.location.reload();
        };

        /* Create a new YUI instance and populate it with the required modules.
        // Wrapping in other div makes only the right part of the page scrollable - otherwise it would be the complete page
        var extraScrollableTag = $('<div id="scrollviewable">');
        extraScrollableTag.height($(window).height());
        $('#content-wrapper').wrapInner(extraScrollableTag);
        YUI().use('scrollview-base', function (Y) {
            /* http://developer.yahoo.com/yui/3/scrollview/
            var scrollView = new Y.ScrollView({
                id: "scrollview",
                srcNode: '#scrollviewable',
                //srcNode: '#content-wrapper',
                height: $(window).height()
            });

            scrollView.render();
        }); */
    },

    initSuperSized: function () {
        $(function () {
            if (typeof slides == 'undefined' || slides.length == 0) return false;
            $.supersized({
                // http://buildinternet.com/project/supersized/
                //Functionality
                slide_interval: 5000,
                transition_speed: 750,
                pause_hover: 0,
                keyboard_nav: 0,
                performance: 1, 	//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect: 1,
                image_path: 'img/',

                //Size & Position
                min_width: 0, 	//Min width allowed (in pixels)
                min_height: 0, 	//Min height allowed (in pixels)
                vertical_center: 1, 	//Vertically center background
                horizontal_center: 0, 	//Horizontally center background
                fit_portrait: 0, 	//Portrait images will not exceed browser height
                fit_landscape: 0, 	//Landscape images will not exceed browser width

                //Components
                navigation: 1, 	//Slideshow controls on/off
                thumbnail_navigation: 0, 	//Thumbnail navigation
                slide_counter: 0, 	//Display slide numbers
                slide_captions: 0, 	//Slide caption (Pull from "title" in slides array)

                slides: slides
            });

            // onload this is visible, only when there's only one slide, the element is hidden
            // to prevent FOUC we slide in this element, it's already be hidden when it's within page visibility
            setTimeout(function () {
                $('#navigation').animate({ left: 0 }, 500);
            }, 500);
        });
    }
};

$(document).ready(function(){
	BouwId.init();
});