(function($) {
    $.fn.customPopup = function(config) {
        config = jQuery.extend({
            id: "custom-popup",
            backGroundPopup: true,
            selfCreate: true,
            layOver: true,
            animate: false,
            center: true,
            overLayBGColor: '#000', 
            overLayOpacity: 0.8,
            getHTMLByAJAX: false,
            onReadyFunction: null,
            closeButton: true
        }, config);
        
        function show(event) {
            event.preventDefault();

            if (config.layOver)
                _insertLayOver();
            
            var remoteHTML;
            
            if (config.getHTMLByAJAX) {
                $.ajax({
                    url: $(this).attr('href'),
                    type: "GET",
                    dataType: 'html',
                    success: function(html) {
                        //$('#custom-popup-content').html(html);
                        remoteHTML = html;
                        _insertLightBox(remoteHTML);
                        // Set event handlers
                        _doEvents();
                        //$(this).trigger('ready');
                    }
                });
            }
            return false;
        };
        
        function _doEvents() {
            //alert('doing events')
            $(window).resize(_windowResize);
            $('#custom-overlay,#custom-lightbox').click(_finish);
            if (config.onReadyFunction != null) {
                //eval(config.onReadyFunction);
                //$(this).bind('ready', eval(config.onReadyFunction));
                if (config.onReadyFunction != null)
                    var func = eval (config.onReadyFunction);
                    func();
            } else {
                alert('don\'t do that crap')
            }
            if (config.closeButton) {
                $('#custom-popup-btnClose').click(function(){
                    _finish();
                });
            }
            jQuery("#custom-popup-btnClose").bind("click", _finish);
        }
        
        function _windowResize() {
            //$('body').prepend('<div>' + jQuery(window).width() + '</div>');
            
            // Get page sizes
			var arrPageSizes = _getPageSize();
			// Style overlay and show it
			$('#custom-overlay').css({
				width:		arrPageSizes[0],
				height:		arrPageSizes[1]
			});
			// Get page scroll
			var arrPageScroll = _getPageScroll();
			// Calculate top and left offset for the jquery-lightbox div object and show it
			$('#custom-lightbox').css({
				top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
				left:	arrPageScroll[0]
			});
        }
        
        function _insertLayOver() {
            $('body').append('<div id="custom-overlay"></div>');
            $('custom-overlay').css("opacity", 0);
            var arrPageSizes = _getPageSize();
            $('#custom-overlay').css({
				backgroundColor:	config.overLayBGColor,
				opacity:			config.overLayOpacity,
				width:				arrPageSizes[0],
				height:				arrPageSizes[1]
			}).fadeIn('4000');            
        }
        
        function _insertLightBox(html) {
            var closeBar = '';
            if (config.closeButton)
                closeBar = '<div id="custom-popup-close-bar"><a id="custom-popup-btnClose" href="javascript:;">SLUITEN</a></div>'; 
            $('body').append('<div id="custom-lightbox"><div id="custom-popup-content" style="display: inline-block;">' + closeBar  + html + '</div></div>');
            var arrPageSizes = _getPageSize();
            var arrPageScroll = _getPageScroll();
            
			// Calculate top and left offset for the jquery-lightbox div object and show it
			$('#custom-lightbox').css({
				top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
				left:	arrPageScroll[0]
			}).show();
			// Assigning click events in elements to close overlay
        }
        
        function _finish(event) {
            if (event == null || $(event.target).parents('#custom-popup-content').attr('id') == undefined) {        
                $("#custom-overlay").remove();
                $("#custom-lightbox").remove();
            }
        }
        
        /**
		 / THIRD FUNCTION
		 * getPageSize() by quirksmode.com
		 *
		 * @return Array Return an array with page width, height and window width, height
		 */
		function _getPageSize() {
			var xScroll, yScroll;
			if (window.innerHeight && window.scrollMaxY) {	
				xScroll = window.innerWidth + window.scrollMaxX;
				yScroll = window.innerHeight + window.scrollMaxY;
			} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
				xScroll = document.body.scrollWidth;
				yScroll = document.body.scrollHeight;
			} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				xScroll = document.body.offsetWidth;
				yScroll = document.body.offsetHeight;
			}
			var windowWidth, windowHeight;
			if (self.innerHeight) {	// all except Explorer
				if(document.documentElement.clientWidth){
					windowWidth = document.documentElement.clientWidth; 
				} else {
					windowWidth = self.innerWidth;
				}
				windowHeight = self.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
				windowWidth = document.documentElement.clientWidth;
				windowHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other Explorers
				windowWidth = document.body.clientWidth;
				windowHeight = document.body.clientHeight;
			}	
			// for small pages with total height less then height of the viewport
			if(yScroll < windowHeight){
				pageHeight = windowHeight;
			} else { 
				pageHeight = yScroll;
			}
			// for small pages with total width less then width of the viewport
			if(xScroll < windowWidth){	
				pageWidth = xScroll;		
			} else {
				pageWidth = windowWidth;
			}
			arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
			return arrayPageSize;
		};
		/**
		 / THIRD FUNCTION
		 * getPageScroll() by quirksmode.com
		 *
		 * @return Array Return an array with x,y page scroll values.
		 */
		function _getPageScroll() {
			var xScroll, yScroll;
			if (self.pageYOffset) {
				yScroll = self.pageYOffset;
				xScroll = self.pageXOffset;
			} else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
				yScroll = document.documentElement.scrollTop;
				xScroll = document.documentElement.scrollLeft;
			} else if (document.body) {// all other Explorers
				yScroll = document.body.scrollTop;
				xScroll = document.body.scrollLeft;	
			}
			arrayPageScroll = new Array(xScroll,yScroll);
			return arrayPageScroll;
		};
        
        return this.unbind('click').click(show);
    };
})(jQuery);