/*
    tabSlideOUt v1.4.2
    
    By William Paoli: http://wpaoli.building58.com
    Modified by Florian Simeth: http://florian-simeth.de

    To use you must have an image ready to go as your tab
    Make sure to pass in at minimum the path to the image and its dimensions:
    
    example:
    
        $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
                pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
                imageHeight: '133px',                         //height of tab image *required*
                imageWidth: '44px',                           //width of tab image *required*    
        },
	function(){
		// callback after the opening-animation
	},
	function(){
		// callback after the close-animation
	});
*/

(function($){
    $.fn.tabSlideOut = function(callerSettings, callbackFknOpen, callbackFknClose) {
        var settings = $.extend({
            	tabHandle: '.handle',
		toggleButton: '.button',
            	speed: 300, 
            	action: 'click',
            	tabLocation: 'left',
            	topPos: '100px',
            	leftPos: '20px',
            	fixedPosition: false,
            	positioning: 'absolute',
            	pathToTabImage: null,
            	imageHeight: null,
            	imageWidth: null,
            	onLoadSlideOut: false
        }, callerSettings||{});

		if(!jQuery.isFunction(callbackFknOpen)){
			callbackFknOpen = null;
		}
		if(!jQuery.isFunction(callbackFknClose)){
			callbackFknClose = null;
		}
		
        settings.tabHandle = $(settings.tabHandle);
        settings.toggleButton = $(settings.toggleButton);

        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
        
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
               
        //set initial tabHandle css
        
        if (settings.pathToTabImage != null) {
            settings.tabHandle.css({
            'background' : 'url('+settings.pathToTabImage+') no-repeat',
            'width' : settings.imageWidth,
            'height': settings.imageHeight
            });
        }
        
 settings.tabHandle.css({ 
            	'display'		: 'block',
		'color'  		: '#ffffff',
		'font-weight'		: 'bold',
		'textAlign' 		: 'center',
		'vertical-align'	: 'middle',
		'backgroundColor' 	: '#ff9933',
		'border' 		: '2px solid #29216d',
		'padding-top'		: '3px',
            	'position' 		: 'absolute'
         	//'textIndent' 	: '0px',
		//'textIndent' 	: '-99999px',
            	//'outline' 		: 'none',
		//'white-space'	: 'nowrap',
        });
               
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });
 
        var properties = {
                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                };

	// browser detection
	var browserName=navigator.appName;
       
	//set calculated css
        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
            obj.css({'left' : settings.leftPos});
            settings.tabHandle.css({'right' : 0});
        }
              

      
 if (browserName=="Microsoft Internet Explorer")
 {

        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
            settings.tabHandle.css({'top' : 0});
        }

        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth,		
		'width'  		: '20px',
		'height' 		: '220px',
		'left'			: '1020px',	
		'writing-mode'	: 'tb-rl'
	});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth,
		'width'  		: '20px',
		'height' 		: '220px',
		'left'			: '-24px',	
		'writing-mode'	: 'bt-rl',
		'filter'		: 'flipv fliph'
	});       
            $('html').css('overflow-x', 'hidden');
        }

        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight,
		'width'  		: '220px',
		'height' 		: '20px',
		'top'			: '530px'
	});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight,
		'width'  		: '220px',
		'height' 		: '20px',
		'top'			: '-27px'
	});
        }

 }
 else
 {

        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
            settings.tabHandle.css({'top' : 97});
        }

        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth,
		'width'  		: '220px',
		'height' 		: '20px',
		'left'			: '922px',	
		'-webkit-transform'	: 'rotate(90deg)',
		'-moz-transform'	: 'rotate(90deg)'
	});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth,
		'width'  		: '220px',
		'height' 		: '20px',
		'left'			: '-125px',	
		'-webkit-transform'	: 'rotate(270deg)',
		'-moz-transform'	: 'rotate(270deg)'
	});   
            $('html').css('overflow-x', 'hidden');
        }

        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight,
		'width'  		: '220px',
		'height' 		: '20px',
		'top'			: '530px'
	});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight,
		'width'  		: '220px',
		'height' 		: '20px',
		'top'			: '-27px'
	});
        }
}

        //functions for animation events 
        settings.tabHandle.click(function(event){
            event.preventDefault();
        });
        settings.toggleButton.click(function(event){
            event.preventDefault();
        });
        
        var slideIn = function() {
            
            if (settings.tabLocation === 'top') {
                obj.animate({top:'-' + properties.containerHeight}, settings.speed, '', callbackFknClose).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({left: '-' + properties.containerWidth}, settings.speed, '', callbackFknClose).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({right: '-' + properties.containerWidth}, settings.speed, '', callbackFknClose).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed, '', callbackFknClose).removeClass('open');
            }        
        };
        
        var slideOut = function() {
            
            if (settings.tabLocation == 'top') {
                obj.animate({top:'-3px'},  settings.speed, '', callbackFknOpen).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({left:'-3px'},  settings.speed, '', callbackFknOpen).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({right:'-3px'},  settings.speed, '', callbackFknOpen).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({bottom:'-3px'},  settings.speed, '', callbackFknOpen).addClass('open');
            }
        };

        var clickScreenToClose = function() {
            obj.click(function(event){
                event.stopPropagation();
            });

			settings.toggleButton.click(function(event){
                event.stopPropagation();
            });
			           
            $(document).click(function(){
                slideIn();
            });
        };
        
        var clickAction = function(){
            settings.tabHandle.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();
                } else {
                    slideOut();
                }
            });
            settings.toggleButton.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();
                } else {
                    slideOut();
                }
            });
            clickScreenToClose();
        };
        
        var hoverAction = function(){
            obj.hover(
                function(){
                    slideOut();
                },
                
                function(){
                    slideIn();
                });
                
                settings.tabHandle.click(function(event){
                    if (obj.hasClass('open')) {
                        slideIn();
                    }
                });
                clickScreenToClose();
                
        };
        
        var slideOutOnLoad = function(){
            slideIn();
            setTimeout(slideOut, 500);
        };
        
        //choose which type of action to bind
        if (settings.action === 'click') {
            clickAction();
        }
        
        if (settings.action === 'hover') {
            hoverAction();
        }
        
        if (settings.onLoadSlideOut) {
            slideOutOnLoad();
        };
        
    };
})(jQuery);