/*
    tabSlideOUt v1.3
    
    By William Paoli: http://wpaoli.building58.com

    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
                imageHeight: '133px',                         //height of tab image
                imageWidth: '44px',                           //width of tab image   
        });

    or you can leave out these options
    and set the image properties using css
    
*/


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



        settings.tabHandle = $(settings.tabHandle);
        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',
            'textIndent': '-99999px',
            'outline': 'none',
            'position': 'absolute'
        });

        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'
        };

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

        if (settings.tabLocation === 'top') {
            obj.css({ 'top': '-' + properties.containerHeight });
            settings.tabHandle.css({ 'bottom': '-' + properties.tabHeight });
        }

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

        }

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

            settings.tabHandle.css({ 'top': -8 });

        }

        if (settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth });
            // settings.tabHandle.css({ 'right': '-' + properties.tabWidth });
            var posX = parseInt(settings.tabHandle.outerWidth(), 10);
            posX = (posX - 5) + 'px';

            settings.tabHandle.css({ 'right': '-' + posX });
        }

        if (settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth });
            //settings.tabHandle.css({ 'left': '-' + properties.tabWidth });
            var posX = parseInt(settings.tabHandle.outerWidth(), 10);
            posX = (posX - 5) + 'px';
           
            settings.tabHandle.css({ 'left': '-' + posX });

            $('html').css('overflow-x', 'hidden');
        }

        //functions for animation events

        settings.tabHandle.click(function(event) {
            event.preventDefault();
        });

        var slideIn = function() {
            if (settings.pathToTabImage == 'images/closeboxicon.png') {
                if (settings.pathToTabImage != null) {
                    settings.tabHandle.css({
                        'background': 'url(' + 'images/arrowright.png' + ') no-repeat',
                        'width': settings.imageWidth,
                        'height': settings.imageHeight
                    });
                }
            }

            if (settings.pathToTabImage == 'images/arrowright.png') {
                if (settings.pathToTabImage != null) {
                    settings.tabHandle.css({
                        'background': 'url(' + 'images/arrowleft.png' + ') no-repeat',
                        'width': settings.imageWidth,
                        'height': settings.imageHeight
                    });
                }
            }
            
            if (settings.contenttohide != null) {


                document.getElementById(settings.contenttohide).style.visibility = 'visible';
            }
            if (settings.divtohide != null) {
                document.getElementById(settings.divtohide).style.visibility = 'hidden';
                if (settings.divtohide === 'HomeRotator') {

                    photolinks = document.getElementById('HomeRotator').getElementsByTagName('a');

                    var alink;
                    for (i = 0; i < photolinks.length; i++) {


                        //mylink = photolinks[i].getElementsByTagName('a')[0];

                        photolinks[i].style.visibility = "hidden";
                    }
                }

            }

            if (settings.tabLocation === 'top') {
                obj.animate({ top: '-' + properties.containerHeight }, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({ left: '-' + properties.containerWidth }, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({ right: '-' + properties.containerWidth }, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({ bottom: '-' + properties.containerHeight }, settings.speed).removeClass('open');
            }

        };




        var slideOut = function() {
            if (settings.pathToTabImage == 'images/closeboxicon.png') {
                if (settings.pathToTabImage != null) {
                    settings.tabHandle.css({
                        'background': 'url(' + 'images/arrowleft.png' + ') no-repeat',
                        'width': settings.imageWidth,
                        'height': settings.imageHeight
                    });
                }
            }
            if (settings.pathToTabImage == 'images/arrowright.png') {
                if (settings.pathToTabImage != null) {
                    settings.tabHandle.css({
                        'background': 'url(' + 'images/arrowright.png' + ') no-repeat',
                        'width': settings.imageWidth,
                        'height': settings.imageHeight
                    });
                }
            }
            if (settings.contenttohide != null) {


                document.getElementById(settings.contenttohide).style.visibility = 'hidden';
            }
            if (settings.divtohide != null) {
                document.getElementById(settings.divtohide).style.visibility = 'visible';
                if (settings.divtohide === 'HomeRotator') {

                    photolinks = document.getElementById('HomeRotator').getElementsByTagName('a');

                    var alink;
                    for (i = 0; i < photolinks.length; i++) {


                        //mylink = photolinks[i].getElementsByTagName('a')[0];

                        photolinks[i].style.visibility = "visible";
                    }
                }
            }
            if (settings.tabLocation == 'top') {
                obj.animate({ top: '-3px' }, settings.speed).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({ left: '-3px' }, settings.speed).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({ right: '-3px' }, settings.speed).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({ bottom: '-0px' }, settings.speed).addClass('open'); //was -3
            }
        };

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

            $(document).click(function() {
                slideIn();
            });
        };

        var clickAction = function() {
            settings.tabHandle.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);