﻿/* 
Copyright 2008 Safetec Compliance Systems, Inc. 
*/
/// <reference path="~/App_Javascript/jquery.min.js" />


// Drop button image
// ie li will not display block on first drop
//ie6 iframe

(function($) {

    var ie6 = $.browser.msie && parseInt($.browser.version) == 6 && !window['XMLHttpRequest'];

    var defaults = {
        options: {
            droptextClass: 'drop-text',
            containerClass: 'drop-container',
            selectedClass: 'selected-item',
            buttonClass: 'drop-button'
        },
        droptextCSS: {
    },
    droptextAttr: {
        type: 'text',
        autocomplete: 'off',
        readonly: 'readonly'
    },
    containerCSS: {
        display: 'none',
        backgroundColor: 'white',
        borderStyle: 'inset',
        maxHeight: '260px',
        overflowY: 'scroll',
        overflowX: 'hidden',
        padding: '0',
        position: 'absolute',
        textAlign: 'left',
        zIndex: '1000',
        border: 'solid 1px gray',
        color: 'black',
        height: '260px'
    },
    containerAttr: {},
    ulCSS: {
        listStyleType: 'none',
        zIndex: '1002',
        margin: '0',
        padding: '0',
        display: 'block'
    },
    liCSS: {
        cursor: 'pointer',
        display: 'block',
        listStyleType: 'none',
        margin: '0',
        padding: '2px',
        backgroundColor: 'Window',
        color: 'WindowText',
        height: '14px',
        width: '100%'
    },
    selectedItemCSS: {
        backgroundColor: 'Highlight',
        color: 'HighlightText'
    },
    buttonCSS: {
},
iframeCSS: {
    display: 'none',
    opacity: '10',
    position: 'absolute',
    zIndex: '1'
}
}

$.fn.dropdown = function(options) {
    return this.each(function() {
        return create(this, options);
    });
};

function create(obj, options) { //(select, options)
    var instance = obj;
    var select = $(obj);
    var options = $.extend(defaults.options, options);

    /*  instance.selectedIndex = -1; */
    instance.containerHasFocus = false;
    select.hide();

    // Create Dropdown Container
    instance.container = $(document.createElement("div"));
    instance.container.attr("id", instance.id + "_container");
    instance.container.addClass(options.containerClass);
    instance.container.css(defaults.containerCSS);
    instance.container.mouseover(function(event) { instance.containerHasFocus = true; });
    instance.container.mouseout(function(event) { instance.containerHasFocus = false; });
    instance.container.keydown(function(event) { keyboardHandler(event); })
    //if (jQuery.browser.msie) { instance.container.css('padding-right', '16px'); }
    select.before(instance.container);

    // Create Dropdown
    instance.droptext = $(document.createElement("input"));
    instance.droptext.attr(defaults.droptextAttr);
    instance.droptext.attr("id", instance.id + "_dropdown");
    instance.droptext.attr("tabIndex", select.attr("tabindex"));
    instance.droptext.addClass(options.droptextClass);
    instance.droptext.css(defaults.droptextCSS);
    instance.droptext.click(function(event) { clickHandler(event); });
    instance.droptext.keydown(function(event) { keyboardHandler(event); })
    instance.container.before(instance.droptext);

    // Create Image Button Wrapper
    instance.dropbutton = $(document.createElement('div'));
    instance.dropbutton.addClass(options.buttonClass);
    instance.dropbutton.css(defaults.buttonCSS);
    instance.dropbutton.click(function(event) { clickHandler(event); })
    instance.container.before(instance.dropbutton);

    // Finalize Control
    instance.droptext.blur(function(event) { if (instance.container.is(':visible') && !instance.containerHasFocus) { collapse() } });
    instance.container.blur(function(event) { if (instance.container.is(':visible') && !instance.containerHasFocus) { collapse() } }); /*IE scroll bar Fix*/
    instance.dropbutton.blur(function(event) { if (instance.container.is(':visible') && !instance.containerHasFocus) { collapse() } }); /*IE scroll bar Fix*/
    buildOptions();
    selectItem($($("li", instance.container)[instance.selectedIndex]));

    if (ie6) {
        instance.iframe = $(document.createElement('iframe'));
        instance.iframe.addClass(options.iframeCSSClass);
        instance.iframe.css(defaults.iframeCSS);
        instance.iframe.attr("src", "App_UnsecuredMethods/ie6iframefix.html");
        select.before(instance.iframe);
    }

    // Helper Methods
    function expand() {
        myPos = findPos(instance.droptext[0]);
        instance.container.css('left', myPos[0]);
        instance.container.css('top', myPos[1] + instance.droptext[0].offsetHeight);
        instance.container.show();

        var dropdownWidth = instance.droptext.attr('scrollWidth');
        var containerWidth = instance.container.attr('scrollWidth');
        if (dropdownWidth > containerWidth) {
            instance.container.css('width', dropdownWidth);
        }

        if (ie6) {
            instance.iframe.css('left', myPos[0]);
            instance.iframe.css('top', myPos[1] + instance.droptext[0].offsetHeight);
            instance.iframe.css('height', instance.container[0].offsetHeight);
            instance.iframe.css('width', instance.container[0].offsetWidth);
            instance.iframe.show();
        }

        var items = $("li", instance.container);
        var li = items[instance.selectedIndex];

        hilight($(li));
        makeItemVisible(li);
    }

    function collapse() {
        instance.containerHasFocus = false;
        instance.container.hide();
        if (ie6) { instance.iframe.hide(); }
    }

    function makeItemVisible(li) {
        var top_x = instance.container[0].scrollTop;
        var bottom_x = instance.container[0].scrollTop + instance.container[0].offsetHeight - (2 * instance.container[0].clientTop);
        var item_top_x = li.offsetTop;
        var item_bottom_x = li.offsetTop + li.offsetHeight;
        if (li.offsetTop < top_x) { // Scroll up to show item
            instance.container[0].scrollTop = li.offsetTop;
        } else if (item_bottom_x > bottom_x) { // Scroll down to show item
            instance.container[0].scrollTop = instance.container[0].scrollTop + (item_bottom_x - bottom_x)
        }
    }

    function stepSelect(step) {
        var items = $("li", instance.container);
        if (!items) return;

        if (step == 1 && instance.selectedIndex >= items.size() - 1) return;
        instance.selectedIndex += step;

        if (instance.selectedIndex < 0) {
            instance.selectedIndex = 0;
        } else if (instance.selectedIndex >= items.size()) {
            instance.selectedIndex = items.size() - 1;
        }

        var li = $(items[instance.selectedIndex])

        selectItem(li);
        makeItemVisible(li);
    }

    function selectItem(li) {
        select.val(li.attr('id'));
        instance.droptext.val(li.html());
        hilight(li);
        return true;
    }

    function hilight(li) {
        li.parent().children("li").removeClass(options.selectedClass).css(defaults.liCSS);
        li.addClass(options.selectedClass);
        li.css(defaults.selectedItemCSS);
    }

    function dropToggle() {
        if (!instance.container.is(":visible")) {
            expand();
        } else {
            collapse();
        }
    }

    // Event Handlers

    function clickHandler(event) {
        dropToggle();
    }

    function keyboardHandler(event) {
        switch (event.keyCode) {
            case 27: // esc
                event.preventDefault();
                collapse();
                break;
            case 37: // left                    
            case 38: // up
                event.preventDefault();
                stepSelect(-1);
                break;
            case 39: // right	
            case 40: // down
                event.preventDefault();
                stepSelect(1);
                break;
            //case 9:  // tab                                                 
            case 13: // return
                event.preventDefault();
                collapse();
                break;
            case 32: // spacebar
                if (event.ctrlKey) { dropToggle(); }
        }
    }

    function buildOptions() {
        var ul = $(document.createElement('ul'));
        ul.css(defaults.ulCSS);

        select.children('option').each(function() {
            var option = $(this);
            var li = $(document.createElement('li'));
            li.css(defaults.liCSS);
            li.mouseover(function() { hilight(li) });
            /*li.hover(
            function() { $(this).css({backgroundColor:'#eeeeee'}) },
            function() { $(this).css({backgroundColor:'white'}) }
            );*/
            li.attr('id', option.val());
            li.html(option.html());

            if (option.is(':selected')) {
                instance.droptext.val(option.html());
            }

            li.click(function(event) { selectItem($(this)); collapse(); });

            ul.append(li);
        });

        instance.container.append(ul);
    }

    function findPos(obj) {
        var curleft = curtop = 0;
        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;
            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            }
        }
        return [curleft, curtop];
    }
}

})(jQuery);


$(document).ready(function() {
$(".dropdown select").dropdown();
});