﻿/*
usage example:
$.showFlyout(true, 1, {
    width: 900,
    height: 600,
    css: {
      background: 'white',
      border: ($.browser.msie ? '2px solid #333333' : '0px')
    },
    translucentBorder: !($.browser.msie),
    darkModal: true,
    showCloseButton: true}, uploadelem);
    $('<iframe></iframe>').attr('src', '/path/to/page.aspx');
*/

jQuery.showFlyout = function()
{

    // // Begin Setup
    var htmlContent;
    var jQContent;
    var userOptions;
    var opacity;
    var options;
    var modal;
	var showDropShadow;
	var showTranslucentBorder;
    
    for (i = 0; i < arguments.length; i++)
    {    
		// arg htmlContent
        if (typeof arguments[i] == 'string' && typeof htmlContent == 'undefined')
        {
            htmlContent = arguments[i];
            continue;
        }
            
		// arg options
        if (typeof arguments[i] == 'object' && typeof userOptions == 'undefined')
        {
            userOptions = arguments[i];
            continue;
        }
        
		// arg opacity
        if (typeof arguments[i] == 'number' && typeof opacity == 'undefined')
        {
            opacity = arguments[i];
            continue;
        }
        
		// arg modal
        if (typeof arguments[i] == 'boolean' && typeof modal == 'undefined')
            modal = arguments[i];
    }
    
    if (typeof modal == 'undefined')
        modal = false;
    
	// arg jqueryContent
    if (typeof arguments[arguments.length - 1] == 'object' && typeof arguments[arguments.length - 1].jquery != 'undefined')
        jQContent = arguments[arguments.length - 1];
    
    var defaults = {
        width: 500,
        height: 350,
        css: {
            background: 'black',
            color: 'white'
        },
		dropShadow: false,
		translucentBorder: false,
		darkModal: false,
		showCloseButton: true
    };
    
    if (typeof htmlContent == 'undefined' && typeof jQContent == 'undefined')
        htmlContent = "<p>It Works!</p>";
        
    if (typeof opacity == 'undefined')
        opacity = .7;
        
	// ======= Validate UserOptions if supplied =======	
    if (typeof userOptions == 'undefined')
        options = defaults;
    else
        options = userOptions;		
		
    if (typeof userOptions != 'undefined' && typeof userOptions.css == 'undefined')
	{
		if (typeof userOptions.css == 'undefined')		
        	options.css = defaults.css;
		
		if (typeof userOptions.width == 'undefined')
			options.width = defaults.width
			
		if (typeof userOptions.height == 'undefined')
			options.height = defaults.height
			
		if (typeof userOptions.dropShadow == 'undefined')
			options.dropShadow = defaults.dropShadow
			
		if (typeof userOptions.translucentBorder == 'undefined' && options.dropShadow == false)
			options.translucentBorder = defaults.translucentBorder
			
		if (typeof userOptions.darkModal == 'undefined')
			options.darkModal = defaults.darkModal;
			
		if (typeof userOptions.showCloseButton == 'undefined')
			options.showCloseButton = defaults.showCloseButton;
	}
    
	// ======= End Validate UserOptions if supplied =======
	
	showTranslucentBorder = userOptions.translucentBorder;
	
    // \\ End Setup
    
    // // Define Plugin Functions
    
    jQuery.positionFlyout = function()
    {        
        var dims = getWindowDims();
		if (dims.height < options.height) return;
        errorBox.css({
            left: dims.width / 2 - errorBox.width() / 2 + 'px'
        });
        
		if (showTranslucentBorder)
			transBorder.css({
				left: dims.width / 2 - transBorder.width() / 2 + 'px'
			});
			
        if (!(modal)) 
        {
			errorBox.css({
				top: dims.height / 2 - errorBox.height() / 2 + $(window).scrollTop() + 'px'
			});
			
			if (showTranslucentBorder)
				transBorder.css({
					top: dims.height / 2 - transBorder.height() / 2 + $(window).scrollTop() + 'px'
				});
		}
		else 
		{
			wrapper.css({
				width: dims.documentWidth - ($.browser.msie || $.browser.mozilla ? 0 : 16) + 'px',
				height: dims.documentHeight + 'px',
				top: '0px'
			});
			
			errorBox.css({
				top: wrapper.height() / 2 - errorBox.height() / 2 + 'px'
			});
			
			if (showTranslucentBorder)
				transBorder.css({
					top: wrapper.height() / 2 - transBorder.height() / 2 + 'px'
				});
		}
    }
    
    function getWindowDims()
    {
        if ($.browser.msie)
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight,
                documentWidth: jQuery(document).width(),
                documentHeight: jQuery(document).height()
            };
        }
        else
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight,
                documentWidth: jQuery(document).width(),
                documentHeight: jQuery(document).height()
            };
        }
    }    
    
    // \\ End Define Plugin Functions
    
    
    // // Init flyout Box
    
    var dims = getWindowDims();
    
    var wrapper = $('<div></div>').css({
        position: 'absolute',
        top: '0',
        left: '0',
        width: dims.width - 16 + 'px',
        height: dims.height + 'px'
    }).click(function(e)
    {
        // flash error box if the user tries to click outside the modal window
        if (e.target.id != 'ebWrapper') return;
        var intervalCount = 0;
        var iVal = setInterval(function()
        {
            if (intervalCount < 4)
            {
                if (intervalCount % 2 == 0)
                    errorBox.fadeTo(50, .88);
                else    
                    errorBox.fadeTo(50, 1);
                intervalCount++;
                
            }
            else
            {
                clearInterval(iVal);
            }
            
        }, 100);
    }).attr('id', 'ebWrapper');
	
	if (modal && options.darkModal)
		wrapper.addClass('jqueryFlyoutModal');
    
    var errorBox = $('<div class="flyout_body"></div>').css(options.css).css({
        position: 'absolute',
        width: options.width + 'px',
        minHeight: options.height + 'px',
		zIndex: 3000
    }).fadeTo('fast', opacity);
	
	var transBorder = $('<div></div>').css({
		width: options.width + 30 + 'px',
		height: options.height + 30 + 'px',
		position: 'absolute',
		background: 'black',
		zIndex: 100
	}).fadeTo('fast', .7).attr('class', 'transborder');
	
	var closeButton;
	if (options.showCloseButton)
	{
		closeButton = $('<div></div>').addClass('jqueryFlyoutClose').css({
			position: 'absolute',
			left: options.width - ($.browser.msie ? 25 : 14) + 'px',
			top: ($.browser.msie ? '1px' : '-10px'),
			zIndex: '4000'
		}).attr('id', 'flyoutCloseButton').appendTo(errorBox);/*.click(function(){
			if (modal)
				wrapper.remove();
			else
			{
				if (options.translucentBorder)
					transBorder.remove();
				errorBox.remove();
			}
		});*/
	}
	
	if (typeof jQuery.fn.corner != 'undefined' && !($.browser.msie))
	{
		transBorder.corner({
			tl: {radius: 8},
			tr: {radius: 8},
			bl: {radius: 8},
			br:  {radius: 8},
			antiAlias: true,
			autoPad: true
		}).css('height', options.height + 30 - 16 + 'px');
	}
	
	if (showTranslucentBorder && modal)
		transBorder.appendTo(wrapper);
    
    if (modal)
        errorBox.appendTo(wrapper);
    
    if (typeof htmlContent != undefined)
        errorBox.append(htmlContent);
        
    if (typeof jQContent != 'undefined')
        errorBox.append(jQContent);
    
    if ($(document).find('form').length > 0)
    {
        if (modal)
            $(document.forms[0]).append(wrapper); 
        else    
		{
			$(document.forms[0]).append(errorBox); 
			if (showTranslucentBorder)
	            $(document.forms[0]).append(transBorder); 
		}            
    }
    else
    {
        if (modal)
            $(document).find('body').append(wrapper);
        else
		{
            $(document).find('body').append(errorBox);
			if (showTranslucentBorder)
	            $(document).find('body').append(transBorder);
		}
    }
        
    jQuery.positionFlyout();
    
	var returnObj;
	if (modal)
        returnObj = wrapper;
	else
	{
		if (showTranslucentBorder)
			errorBox.add(wrapper[0]);
		else
			errorBox;
	}	
	
	returnObj.removeFlyout = function() 
	{ 
		$(this).trigger('remove');
		$(this).remove();
	};
	
	if (typeof closeButton != 'undefined')
		closeButton.click(function(){
			returnObj.removeFlyout();
		});
    return returnObj;
    
    // \\ End Init Error Message Box
}

jQuery(function()
{
    $(window).resize(function()
    {
        if (typeof jQuery.positionFlyout != 'undefined')
            jQuery.positionFlyout();
    });
    
    /*
    $(window).scroll(function()
    {
        if (typeof jQuery.positionFlyout != 'undefined')
            jQuery.positionFlyout();
    });
    */
});