/*
 * Title: Timeliner (jQuery plugin)
 * Author: Berend de Jong, Frique
 * Author URI: http://www.frique.me/
 * Version: 1.2 (20110725.1)
 */

(function($) {
    jQuery.fn.timeliner = function(n) {
        var o = $.extend({
            containerwidth: 450,
            containerheight: 100,
            showpauseplay: true,
            showprevnext: true,
            controls_always_visible: true,
            timelinewidth: 420,
            timelineheight: 8,
            timelinehorizontalmargin: 'auto',
            timelineverticalmargin: 22,
            timelineposition: 'bottom',
            showtimedisplay: false,
            timedisplayposition: 'below',
            showtotaltime: false,
            showtooltip: true,
            showtooltiptime: false,
            tooltipposition: 'below',
            interval: 1,
            repeat: false,
            autoplay: false,
            keyboard: true,
            transition: 'slide'
        },
        n);
        $(this).each(function() {
            function getdisplaytime(a) {
                var b = Math.floor(a / 60);
                a = (a - (b * 60));
                if (a < 10) {
                    a = '0' + a
                }
                return b + ':' + a
            }
            var c, prenodepos = [0],
            nodepos = [0, 0],
            nodesec = [0, 0],
            nodeinterval = [0],
            targetpos,
            x = 1,
            activenode = 1,
            seconds = 0,
            timeinterval,
            totaltime = 0,
            playing = false,
            started = false,
            timeremaining,
            animationtime,
            $container = $(this).show(),
            $slides = $container.find('> li'),
            $timeline = $('<li class="timeline"></li>').prependTo($container),
            $innertimeline = $('<div class="innertimeline">&nbsp;</div>').prependTo($timeline),
            nodes = $slides.length;
            if (o.showtimedisplay) {
                var d = $('<div class="timedisplay">0:00</div>').prependTo($timeline);
                if (o.showtotaltime) {
                    d.append(' / 0:00')
                }
                var f = Math.round(d.outerWidth(true) / 2)
            }
            if (o.showpauseplay) {
                var g = $('<li class="play"></li>').prependTo($container).animate({
                    opacity: 0
                },
                0);
                if (o.showprevnext) {
                    var h = $('<li class="previous"></li>').prependTo($container).animate({
                        opacity: 0
                    },
                    0);
                    var i = $('<li class="next"></li>').prependTo($container).animate({
                        opacity: 0
                    },
                    0)
                }
            }
            $slides.each(function() {
                var a = $(this);
                a.addClass('slide').addClass('slide' + x).data('title', a.attr('title')).removeAttr('title').animate({
                    opacity: 0
                },
                0);
                if (x < nodes || o.repeat) {
                    if (a.attr('lang')) {
                        nodeinterval[x] = parseInt(a.attr('lang'), 10)
                    } else {
                        nodeinterval[x] = o.interval
                    }
                    totaltime = +totaltime + nodeinterval[x]
                } else {
                    nodeinterval[x] = 0
                }
                nodesec[x] = +nodesec[(x - 1)] + nodeinterval[(x - 1)];
                x++
            });
            x = 1;
            if (o.timelinehorizontalmargin == 'auto') {
                c = (o.containerwidth - o.timelinewidth) / 2
            } else {
                c = o.timelinehorizontalmargin
            }
            var j = getdisplaytime(totaltime);
            for (x = 1; x < (nodes + 1); x++) {
                $('<div class="node node' + x + '"></div>').appendTo($timeline).data('id', x)
            }
            var k = $timeline.find('.node');
            x = 1;
            var l = k.outerWidth(true),
            nodeheight = k.outerHeight(true),
            halfnodewidth = Math.round(l / 2);
            k.each(function() {
                var a = $(this);
                prenodepos[x] = ((nodeinterval[(x - 1)] / totaltime) * 100).toFixed(4);
                nodepos[x] = +nodepos[(x - 1)] + Math.round(o.timelinewidth * (prenodepos[x] / 100));
                a.css({
                    left: (nodepos[x] - halfnodewidth),
                    top: -(Math.round(nodeheight / 2) - Math.round(o.timelineheight / 2))
                });
                if (o.showtooltip) {
                    var b = $container.find('.slide' + x).data('title');
                    if (b) {
                        a.prepend('<div class="tooltip1">' + b + '</div>')
                    }
                }
                if (o.showtooltiptime) {
                    a.find('.tooltip1').prepend('<label class="tooltiptime">' + getdisplaytime(nodesec[x]) + '</label><br>')
                }
                x++
            });
            if (o.showtooltip) {
                var m = $container.find('.tooltip1')
            }
            $container.css({
                width: o.containerwidth,
                height: o.containerheight
            });
            if (o.transition == 'slide' || o.transition == 'reveal' || o.transition == 'cover') {
                $container.css({
                    overflow: 'hidden'
                })
            }
            $slides.css({
                width: o.containerwidth,
                height: o.containerheight
            });
            $timeline.css({
                width: o.timelinewidth,
                height: o.timelineheight,
                margin: 15,
                marginTop: o.timelineverticalmargin,
                marginBottom: o.timelineverticalmargin
            }).css(o.timelineposition, 0);
            $innertimeline.css({
                height: o.timelineheight
            });
            if (o.showtimedisplay && o.timedisplayposition == 'below') {
                d.css({
                    top: (o.timelineheight + 5),
                    left: -f
                })
            } else if (o.showtimedisplay) {
                d.css({
                    bottom: (o.timelineheight + 5),
                    left: -f
                })
            }
            if (o.showtooltip) {
                if (o.tooltipposition == 'below') {
                    m.css({
                        top: nodeheight + 5
                    })
                } else {
                    m.css({
                        bottom: nodeheight + 5
                    })
                }
                m.each(function() {
                    var a = $(this);
                    a.css({
                        left: -(Math.round(a.outerWidth(true) / 2) - halfnodewidth)
                    })
                })
            }
            if (o.showpauseplay) {
                g.css({
                   top: 10,
                    left: (Math.round(o.containerwidth / 2) - Math.round(g.outerWidth(true) / 2))+3
                });
                if (o.showprevnext) {
                    h.css({
                        //top: (Math.round(o.containerheight / 2) - Math.round(h.outerHeight(true) / 2)),
                        right: (Math.round(o.containerwidth / 2) + Math.round(g.outerWidth(true) / 2))+10,
                    });
                    i.css({
                        //top: (Math.round(o.containerheight / 2) - Math.round(i.outerHeight(true) / 2)),
                        left: (Math.round(o.containerwidth / 2) + Math.round(g.outerWidth(true) / 2))+8
                    })
                }
            }
            $slides.each(function() {
                var a = $(this);
                if (a.outerWidth() > o.containerwidth) {
                    a.width((a.width() - parseInt(a.css('paddingLeft'), 10) - parseInt(a.css('paddingRight'), 10)))
                }
                if (a.outerHeight() > o.containerheight) {
                    a.height((a.height() - parseInt(a.css('paddingTop'), 10) - parseInt(a.css('paddingBottom'), 10)))
                }
            });
            function dtime(a) {
                d.html(getdisplaytime(a));
                if (o.showtotaltime) {
                    d.append(' / ' + j)
                }
            }
            function time_start(a) {
                dtime(a);
                timeinterval = setInterval(function() {
                    seconds++;
                    dtime(seconds)
                },
                1000)
            }
            function time_stop() {
                clearInterval(timeinterval)
            }
            function stop() {
                $innertimeline.stop();
                if (o.showtimedisplay) {
                    time_stop();
                    d.stop()
                }
                playing = false;
                if (o.showpauseplay) {
                    g.attr('class', 'play')
                }
            }
            function start(a, b) {
//            	alert(a+"--"+b+"--"+o.times[a-1].name);
                 var lay=o.times;
                 for ( var y = 0; y <lay.length; y++) {
                 	o.map.removeLayer(lay[y].layer);
 				 }
                 //if(!o.times[a-1].init){
             		o.map.addLayer(o.times[a-1].layer);
             	 //}
                if (a < 2 && !b && !started) {
                    the_start_callback()
                }
                if (!b) {
                    seconds = nodesec[a]
                }
                if (o.showtimedisplay) {
                    time_start(seconds)
                }
                if (!b) {
                    $innertimeline.css({
                        width: nodepos[a]
                    });
                    if (o.showtimedisplay) {
                        d.css({
                            left: nodepos[a] - f
                        })
                    }
                }
                if (b) {
                    animationtime = (b * 1000)
                } else {
                    animationtime = (nodeinterval[a] * 1000)
                }
                if (a < nodes) {
                    targetpos = nodepos[(a + 1)]
                } else {
                    targetpos = o.timelinewidth
                }
                if (o.showtimedisplay) {
                    d.animate({
                        left: (targetpos - f)
                    },
                    animationtime, 'linear')
                }
                $innertimeline.animate({
                    width: targetpos
                },
                animationtime, 'linear',
                function() {
                    if (o.showtimedisplay) {
                        time_stop()
                    }
                    if (a < nodes) {
                        start((a + 1))
                    } else {
                        the_end_callback();
                        started = false;
                        if (o.repeat) {
                            start(1)
                        }
                    }
                });
                if (a != activenode) {
                    $container.find('.slide:not(.slide' + a + '):not(.slide' + activenode + ')').stop().animate({
                        opacity: 0
                    },
                    0).css({
                        'z-index': 0
                    });
                    if (o.transition == 'fade') {
                        $container.find('.slide' + activenode).stop().animate({
                            opacity: 0
                        },
                        300,
                        function() {
                            $(this).css({
                                'z-index': 0
                            })
                        });
                        $container.find('.slide' + a).stop().animate({
                            opacity: 1
                        },
                        300,
                        function() {
                            $(this).css({
                                'z-index': 1
                            })
                        })
                    }
                    if (o.transition == 'slide' || o.transition == 'reveal') {
                        $container.find('.slide' + activenode).css({
                            'z-index': 1
                        }).stop(true, true).animate({
                            left: -o.containerwidth
                        },
                        600,
                        function() {
                            $(this).css({
                                'z-index': 0,
                                left: 0
                            }).animate({
                                opacity: 0
                            },
                            0)
                        })
                    }
                    if (o.transition == 'reveal') {
                        $container.find('.slide' + a).css({
                            'z-index': 0
                        }).stop(true, true).animate({
                            opacity: 1
                        },
                        0)
                    }
                    if (o.transition == 'slide') {
                        $container.find('.slide' + a).css({
                            'z-index': 1,
                            left: o.containerwidth
                        }).stop(true, true).animate({
                            opacity: 1
                        },
                        0).animate({
                            left: 0
                        },
                        600)
                    }
                    if (o.transition == 'instant') {
                        $container.find('.slide' + activenode).animate({
                            opacity: 0
                        },
                        0);
                        $container.find('.slide' + a).animate({
                            opacity: 1
                        },
                        0)
                    }
                }
                $container.find('.node' + activenode).removeClass('node_active');
                $container.find('.node' + a).addClass('node_active');
                activenode = a;
                playing = true;
                if (o.showpauseplay) {
                    g.attr('class', 'pause')
                }
                if (o.showpauseplay && (a == nodes && !o.repeat)) {
                    stop()
                }
                if (!b && started) {
                    the_newslide_callback()
                }
                if (!started) {
                    started = true
                }
            }
            $.fn.timeliner.pauseplay = function() {
                g.click()
            };
            $.fn.timeliner.play = function() {
                if (!playing) {
                    g.click()
                }
            };
            $.fn.timeliner.pause = function() {
                if (playing) {
                    g.click()
                }
            };
            $.fn.timeliner.next = function() {
                i.click()
            };
            $.fn.timeliner.inityear = function(index) {
                start(index);
            };
            $.fn.timeliner.prev = function() {
                h.click()
            };
            function the_start_callback() {
                if (typeof start_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    start_callback(a)
                }
            };
            function the_newslide_callback() {
                if (typeof newslide_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    newslide_callback(a, activenode)
                }
            };
            function the_end_callback() {
                if (typeof end_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    end_callback(a)
                }
            };
            function the_paused_callback() {
                if (typeof paused_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    paused_callback(a, activenode)
                }
            };
            function the_resumed_callback() {
                if (typeof resumed_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    resumed_callback(a, activenode)
                }
            };
            function the_click_callback() {
                if (typeof click_callback == 'function') {
                    var a = $container.attr('id');
                    if (a == undefined || !a) {
                        a = '[no id]'
                    }
                    click_callback(a, activenode)
                }
            };
            k.click(function() {
                stop();
                start($(this).data('id'));
                if (!o.autoplay) {
                    g.click()
                }
            })
            if (o.showpauseplay) {
                if (o.controls_always_visible) {
                    g.stop().animate({
                        opacity: 0.5
                    },
                    300);
                    if (o.showprevnext) {
                        h.stop().animate({
                            opacity: 0.5
                        },
                        300);
                        i.stop().animate({
                            opacity: 0.5
                        },
                        300)
                    }
                } else {
                    $container.hover(function() {
                        g.stop().animate({
                            opacity: 0.5
                        },
                        300);
                        if (o.showprevnext) {
                            h.stop().animate({
                                opacity: 0.5
                            },
                            300);
                            i.stop().animate({
                                opacity: 0.5
                            },
                            300)
                        }
                    },
                    function() {
                        g.stop().animate({
                            opacity: 0
                        },
                        200);
                        if (o.showprevnext) {
                            h.stop().animate({
                                opacity: 0
                            },
                            200);
                            i.stop().animate({
                                opacity: 0
                            },
                            200)
                        }
                    })
                }
                g.click(function() {
                    if (playing) {
                        stop();
                        timeremaining = (nodeinterval[activenode] - seconds + nodesec[activenode]);
                        the_paused_callback()
                    } else {
                        if (activenode == nodes && !o.repeat) {
                            start(1)
                        } else {
                            start(activenode, timeremaining)
                        }
                        the_resumed_callback()
                    }
                }).hover(function() {
                    $(this).stop().animate({
                        opacity: 0.9
                    },
                    200)
                },
                function() {
                    $(this).stop().animate({
                        opacity: 0.5
                    },
                    400)
                });
                if (o.showprevnext) {
                    h.click(function() {
                        if (activenode == 1) {
                            $container.find('.node' + nodes).click()
                        } else {
                            $container.find('.node' + (activenode - 1)).click()
                        }
                    }).hover(function() {
                        $(this).stop().animate({
                            opacity: 0.9
                        },
                        200)
                    },
                    function() {
                        $(this).stop().animate({
                            opacity: 0.5
                        },
                        400)
                    });
                    i.click(function() {
                        if (activenode == nodes) {
                            $container.find('.node1').click()
                        } else {
                            $container.find('.node' + (activenode + 1)).click()
                        }
                    }).hover(function() {
                        $(this).stop().animate({
                            opacity: 0.9
                        },
                        200)
                    },
                    function() {
                        $(this).stop().animate({
                            opacity: 0.5
                        },
                        400)
                    })
                }
            }
            $timeline.click(function(e) {
                var a = ((e.pageX - $(this).offset().left) + halfnodewidth);
                var b;
                x = 1;
                for (x in nodepos) {
                    if (x > 0 && x < nodes) {
                        if ((nodepos[x] < a) && (nodepos[( + x + 1)] > a)) {
                            b = x
                        }
                    }
                }
                if (a > nodepos[nodes]) {
                    b = nodes
                }
                if (a < 0) {
                    b = 1
                }
                if (b != activenode) {
                    $timeline.find('.node' + b).click()
                }
            });
            $slides.click(function() {
                the_click_callback()
            });
            if (o.keyboard) {
                $(document).keydown(function(e) {
                    if (e.keyCode == 32) {
                        e.preventDefault();
                        g.click()
                    }
                })
            }
            $container.find('.slide1').animate({
                opacity: 1
            },
            0).css({
                'z-index': 1
            });
            if (o.autoplay) {
                start(1)
            }
        })
    }
})(jQuery);