/*
jquery popbox - A html-popup that doesn't suck.
Assuming $ is jquery.

Carl Persson, Treron AB


Example:
--------
$('.pages').popbox({...})

<!-- the links -->
<div class="pages">
    <a href="#slide1">Slide 1</a>
    <a href="#slide2">Slide 2</a>
</div>
<div class="pages">
    <a class="popup" href="#slide3">Slide 3</a>
    <a class="popup" href="#slide4">Slide 4</a>
</div>

<!-- the hidden divs -->
<div class="hide_me" id="slide1">content....</div>
<div class="hide_me" id="slide2">content....</div>


*/


$.fn.center = function(args) {
    
    var args = $.extend({
        // defaults
        top: null  // center horizontally, manually specify top
    }, args || {})
    
    this.each(function() {
		var self = $(this);
        coords = $.get_center(self.outerWidth(), self.outerHeight())
        var left = coords[0], top = coords[1]
		
		if(args.top !== null) {
		    top = args.top
		}
		
    	self.css({top: top, left: left});
   });
};

$.get_center = function(width, height) {        
    var winHeight = $(window).height()
    var winWidth = $(window).width()		
    var top = ((winHeight - height) / 2) + $(window).scrollTop()
    var left = ((winWidth - width) / 2) + $(window).scrollLeft()
    return [left, top]
};

$.fn.outerHTML = function(s) {
        return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();
};


(function($) {    
    var options = {}
    var overlay
    var popbox
    var pages = []    
    var page_map = {}
    var prevPage
    var curr = null
    var popbox = null
    var content = null
    var ie7 = ($.browser.msie && $.browser.version == 7)
    var showing = false
    var onshow
    var onhide
    var width, height
    var initial
    
    $(function() {
        overlay = $('<div id="popbox_overlay"></div>').appendTo(document.body)
        popbox = $('' +
              '<div id="popbox">' +
                  '<div id="popbox_t">' +
                      '<div id="popbox_tl"></div>' +
                      '<div id="popbox_tc"></div>' +
                      '<div id="popbox_tr"></div>' +
                  '</div>' +
                  '<div id="popbox_m">' +
                      '<div id="popbox_ml"></div>' +
                      '<div id="popbox_mc">' +
                          '<div id="popbox_content">' +                           
                              '<a id="popbox_prev_large" href="#"></a>' +
                              '<a id="popbox_next_large" href="#"></a>' +                          
                              '<div id="popbox_content_inner"></div>'+
                          '</div>' + 
                          '<div id="popbox_nav">' +
                              '<a href="#" id="popbox_prev">&lt; föreg</a><span id="popbox_state"></span><a href="#" id="popbox_next">nästa &gt;</a><a href="#" id="popbox_close">stäng</a>' +
                          '</div>' +
                      '</div>' +
                      '<div id="popbox_mr"></div>' +
                  '</div>' +
                  '<div id="popbox_b">' +
                      '<div id="popbox_bl"></div>' +
                      '<div id="popbox_bc"></div>' +
                      '<div id="popbox_br"></div>' +
                  '</div>' +
              '</div>').appendTo(document.body)
        $.ifixpng.pixel = '/script/jquery.ifixpng/pixel.gif'
        $('#popbox_t div, #popbox_ml, #popbox_mr, #popbox_b div').ifixpng()
        $('#popbox_prev').click(showPrev)
        $('#popbox_next').click(showNext)
        $('#popbox_next_large').click(showNext)        
        $('#popbox_prev_large').click(showPrev)
        $('#popbox_overlay, #popbox_close').mousedown(collapse)
        $(document.body).keydown(onkeydown)
    })   


    function indexOf(arr, page) {
        for(var i=0; arr[i]; i++) {
            if(page &&  arr[i] && arr[i].attr('id') == page.attr('id')) {
                return i
            }
        }
        return -1
    }
    function onkeydown(e) {
        if(showing) {
            if(e.keyCode == 39) { // arrow right 
                showNext()
            }
            else if(e.keyCode == 37) { //arrow left
                showPrev()
            }
            else if(e.keyCode == 27) { // esc
                collapse()
            }        
        }
    }
    function onclick(pages_) {
        pages = pages_

        popbox = $('#popbox')
        content = $('#popbox_content')
        overlay = $('#popbox_overlay')
    
        
        var page = page_map[$(this).attr('href')]
        var i = indexOf(pages, page)
        
        if(!page || i===-1)
            return
        curr = i
        setoverlay()            
        pos = getpos(page)
        popbox.removeClass('visible')
        popbox.css({
            width: $(this).width(), 
            height: $(this).height(), 
            left: $(this).offset().left,
            top: $(this).offset().top})
        if(!ie7)
            popbox.css({opacity: .5})
    
        popbox.addClass('visible')
    
        show(page, true)
        return false
    
        // popbox.animate({
        //         width: pos.width,
        //         height: pos.height,
        //         left: pos.left,
        //         top: pos.top,
        //         opacity: 1}, 
        //     function() {
        //         $('#popbox_content').html(page.outerHTML())
        //         setnav(i)
        //     })
    }
    function getpos(page) {
        var w = options.width || page.outerWidth() + 40
        var h = options.height || page.outerHeight() + 20
        var leftTop = $.get_center(w, h)
        var top = Math.max(leftTop[1], 0)
        return {width: w, height: h, left: leftTop[0], top: top}
    }
    function setoverlay() {
        // var w = Math.max($(document.body).width(), $(window).width()) - 20
        var h = Math.max($(document.body).height(), $(window).height())
        overlay.css({opacity: .1, width: '100%', height: h}).addClass('visible')
    }
    function setnav(i) {
        if(pages.length > 1) {
            $('#popbox_state, #popbox_next, #popbox_prev').show();
            
            $('#popbox_prev, #popbox_next').removeClass('disabled')
            if(i === 0) 
                $('#popbox_prev').addClass('disabled')
            if(i+1 == pages.length)
                $('#popbox_next').addClass('disabled')
            $('#popbox_state').html(i+1 + '/' + pages.length)
        }
        else {
            $('#popbox_state, #popbox_next, #popbox_prev').hide();
        }
    }
    function showNext() {
        show(pages[curr+1])
        return false
    }    
    function showPrev() {
        show(pages[curr-1])        
        return false
    }
    function showId(id) {
        show($('#'+id))
    }
    function showNum(i) {
        show(pages[i])
    }

    function show(page, initial_) {
        var i = indexOf(pages, page)
        if(!page || i===-1) {
            return
        }
        initial = initial_
        curr = i
        pos = getpos(page)

        if(!options.overlay_nav) {
            $('#popbox_prev_large, #popbox_next_large').css('display', 'none')
        }
        else {
            $('#popbox_prev_large').css('display', i > 0 ? 'block' : 'none')
            $('#popbox_next_large').css('display', i < pages.length-1 ? 'block' : 'none')            
        }

        if(!ie7)
            pos.opacity = 1

        setnav(i)
        
        if(options.show_when_zooming) {
            setcontent(page)
            prevPage = page
        }
        popbox.animate(pos, function() {
            $('#popbox_t div, #popbox_ml, #popbox_mr, #popbox_b div').ifixpng()
            if(!options.show_when_zooming) {
                setcontent(page)
                prevPage = page
            }
        })
        
        showing = true
    
    }
    function setcontent(page) {
        if(!initial && prevPage && options.onbeforehide) {
            options.onbeforehide.call(prevPage)
        }
        $('#popbox_content_inner').empty()
        
        $('#popbox_content_inner').append(page[0].cloneNode(true))
        $($('#popbox_content_inner')[0].firstChild).css({left: 'auto', top: 'auto', position: 'relative'})

        if(options.onshow) {
            options.onshow.call(page)            
        }
    }

    function collapse() {
        var page = pages[curr]
        if(options.onbeforehide) {
            options.onbeforehide.call(page)
        }        
        popbox.removeClass('visible')
        overlay.removeClass('visible')
        showing = false
        prevPage = false
        if(options.onhide) {
            options.onhide.call(page)
        }        
    }

    $.fn.popbox = function(_options) {
        // iterate all groups containg href="#some_id"-links
        options = $.extend({
            overlay_nav: true,
            show_when_zooming: true
        }, _options || {})
        
        var visited = []

        
        this.each(function() {
            
            pages = [] // <-- don't move this
            $(this).find('a').each(function() {
                
                var id = $(this).attr('href')
                if(id && id.substr(0,1) == '#') {
                    if($.inArray(id, visited) === -1) {
                        var page = $(id)
                        pages.push(page)
                        page_map[id] = page
                        visited.push(id)

                        // store pages in closure
                        var pages_tmp = pages
            
                        $(this).mouseup(function() {
                            return onclick.call(this, pages_tmp)
                        })
                        $(this).click(function() {  return false })          
                    }
                }
            })
        })
        
    }
    
    
    // $.fn.popbox = function() {
    //     // iterate all groups containg href="#some_id"-links
    //     this.each(function() {
    //         pages = []
    //         $(this).find('a').each(function() {
    //         
    //             var id = $(this).attr('href')
    //             if(id && id.substr(0,1) == '#') {
    //                 var page = $(id)
    //                 if(indexOf(pages, page) === -1) {
    //                     pages.push(page)
    // 
    //                     // store pages in closure
    //                     var pages_tmp = pages
    //         
    //                     $(this).mouseup(function() {
    //                         return onclick.call(this, pages_tmp)
    //                     })
    //                     $(this).click(function() {  return false })          
    //                 }
    //             }
    //         })
    //         
    //     })    
    // }
    
    
    
    
})(jQuery)