/* 
 * @param Object Literal p
 * @autor Tomáš Ticháček
 * @copyright Česká Kancelář Pojistitelů
 *
 * Navigační lišta pro progázení seznamových prvků ve stránce
 * s využitím jQuery a AJAX
 *
 * @param Object Literal p:
 *  
 */
var jsNavigator = {
    imgs: 'images/navig/',
    settings: {
        wrapp: {
            tag: '<span></span>',
            css: {
                margin: '0px 10px',
                float: 'left'
            }
        },
        navig: {
            tag: '<img />',
            css:{
                cursor: 'pointer', 
                float: 'left',
                margin: '4px 0px 0px 0px',
                padding: '0px 0px 0px 0px'
            }
        },
        box: {
            tag: '<span></span>',
            classN: 'box',
            css: { 
                float: 'left',
                margin: '0px 0px 0px 0px', 
                padding: '1px 0px',
                width: '50px',
                textAlign: 'center',
                background: '#fff',
                cursor: 'pointer'
            }
        },
        list: {
            ul: {
                tag: '<ul></ul>',
                css: { 
                    listStyle: 'none',
                    display: 'none',
                    marginTop: jQuery.browser.msie ? '-2px' : '0px' ,
                    marginRight: '0px',
                    marginBottom: '0px',
                    marginLeft: jQuery.browser.msie ? '-1px' : '1px' ,
                    paddingTop: '0px',
                    paddingRight: '0px',
                    paddingBottom: '0px',
                    paddingLeft: '0px',
                    position: 'absolute'
                }
            },
            li: {
                tag: '<li></li>',
                css: {
                    width: '50px',
                    textAlign: 'center',
                    marginTop: '0px',
                    marginRight: '0px',
                    marginBottom: '0px',
                    marginLeft: '0px',
                    paddingTop: '0px',
                    paddingRight: '0px',
                    paddingBottom: '0px',
                    paddingLeft: '0px',
                    height: '20px',
                    background: '#fafafa',
                    cursor: 'pointer'
                }
            }
        }
    },
    /*
     * p
     *  selected
     *  list
     *  target
     */
    createLists: function(p) {
        var target = p.target +'_navigator';
        var upList = $('.' + target + '_up');
        var downList =  $('.' + target + '_down');
        var pos = $(this).position();
        var h = $(this).outerHeight();
        var li = jsNavigator.settings.list.li;
        var liH = parseInt(li.css.height) + parseInt(li.css.paddingTop) + parseInt(li.css.paddingBottom) + parseInt(li.css.marginBottom) + parseInt(li.css.marginTop);   
         
        upList.empty();
        downList.empty();
        var shoda = false; 
        for(var i = 0; i < p.list.length; i++) {
            var row = $(li.tag);
            if(i == p.selected)
                shoda = i;
            
            row.click(function() {  
                var box = $('#' + target + ' .' + jsNavigator.settings.box.classN);
                    box.text($(this).text()).data('item', $(this).data('item'));
                    
                jsNavigator.createLists.call(box, {target: target, list: p.list, selected: $(this).data('item'), callback: p.callback });
                p.callback.call(this, {sekce: p.target, list: p.list, selected: $(this).data('item')});
                
                var upList = $('.' + target + '_up');
                var downList =  $('.' + target + '_down');
                    upList.css('display', 'none');
                    downList.css('display', 'none');
                    
            }).css(li.css).html(p.list[i]).data('item', i);
            
            if(shoda === false)
                upList.append(row)
            else if(i > shoda)
                downList.append(row)
        }
        
        upList.css({
            top: (pos.top - shoda * liH) + 'px', 
            left: pos.left + 'px',
            display: 'none'
        });
        downList.css({
            top: h + pos.top + 'px', 
            left: pos.left + 'px',
            display: 'none'
        });
     },
    /*
     * @param Object Literal p
     *  navig:
     *  box: 
     *    html: 
     *      selected: mixed
     *      list: []
     *  target: 
     */
    create: function(p) {
        var showNavig = p.box.html.list.length > 1;
        var target = p.target + '_navigator';
        // navigator wrapper
        var wrappSets = jsNavigator.settings.wrapp;
        var wrapp = $(wrappSets.tag);
            wrapp.css(wrappSets.css);
            
        // navig settings
        var navigSets = jsNavigator.settings.navig;
        var navig = {
            f: {
                operand: -p.box.html.list.length,
                img: new Object
            }, 
            p: {
                operand: -1,
                img: new Object
            }, 
            n: {
                operand: 1,
                img: new Object
            }, 
            l: {
                operand: p.box.html.list.length,
                img: new Object
               }
            };
        
        for(var i in navig) {
            navig[i].img = $(navigSets.tag);
            navig[i].img.attr({src: jsNavigator.imgs + i + '.png', operand: navig[i].operand, alt: showNavig ? '' : 'Není k dispozici'})
                    .css(navigSets.css)
                    .addClass(i)
                    .hover(
                        function() { 
                            $(this).attr('src', jsNavigator.imgs + this.className + 'H.png'); 
                        }, 
                        function() { 
                            $(this).attr('src', jsNavigator.imgs + this.className + '.png'); 
                    });
                    
            if( showNavig ) {
                navig[i].img.click(function() {    
                    var box = $('#' + target + ' .' + jsNavigator.settings.box.classN);
                    var index = Number(box.data('item')) - Number($(this).attr('operand'));
                    
                    if( index >= p.box.html.list.length )
                        index = p.box.html.list.length - 1;
                   
                    else if( index < 0)
                        index = 0;
                    
                    box.text(p.box.html.list[index]);
                    box.data('item', index);
                        
                    jsNavigator.createLists.call(box, {target: p.target, list: p.box.html.list, selected: index, callback: p.callback });
                    p.callback.call(this, {sekce: p.target, list: p.box.html.list, selected: index});
                });
            }
        }
        
        
        // list box
        var shoda = false;
        var list = jsNavigator.settings.list;
        var ulUp = $(list.ul.tag);
        var ulDown = $(list.ul.tag);
            ulUp.css(list.ul.css).addClass(target + '_up').css({borderTop: '1px solid #f7f7f7'});
            ulDown.css(list.ul.css).addClass(target + '_down').css({borderBottom: '1px solid #f7f7f7'});
            
        // box settings
        var boxSets = jsNavigator.settings.box;
        var box = $(boxSets.tag);
            box.css(boxSets.css)
               .addClass(boxSets.classN)
               .text(p.box.html.list[p.box.html.selected])
               .data('item', p.box.html.selected)
               .click(function(event) {
                    jsNavigator.createLists.call(this, { target: p.target, list: p.box.html.list, selected: $(this).data('item'), callback: p.callback });
                    
                    var upList = $('.' + target + '_up');
                    var downList =  $('.' + target + '_down');
                        upList.css('display', 'block');
                        downList.css('display', 'block');
                    event.stopPropagation();
                });
        
        // create navigator
        
        wrapp.append(navig.f.img);
        wrapp.append(navig.p.img);
        wrapp.append(ulUp);
        wrapp.append(box);
        wrapp.append(ulDown);
        wrapp.append(navig.n.img);
        wrapp.append(navig.l.img);
        
        // append wrapp into DOM
        $('#' + target).html(wrapp);
        $(document).click(function() {
            var upList = $('.' + target + '_up');
            var downList =  $('.' + target + '_down');
            if(upList.css('display') != 'none' && downList.css('display') != 'none') {
                upList.css('display', 'none');
                downList.css('display', 'none');
            } 
        });
    }
}