﻿
var pointsData = [
    { location: 'Chicago', message: 'Looking forward to my upcoming trip to Chicago- staying at The James', time: '2 minutes ago' },
    { location: 'KualaLumpur', message: 'Going to Kuala Lumpur. Going green & booked Tune Hotels. Help me win freebies...', time: '4 minutes ago' }
];



Flipto = (typeof Flipto == 'undefined') ? {} : Flipto;

Flipto.map = new function() {
    var points,
        initialDelay = 2000,
        normalDelay = 8000,
        transitionSpeed = 1000;

    this.init = function() {
        $(pointsData).each(function() { createPoint(this); });
        startAnimation();
    };

    var createPoint = function(info) {
        var p = $('<div class="point">\
                        <div class="post">\
                            <div class="profile"></div>\
                            <div class="message"></div>\
                            <div class="time"></div>\
                        </div>\
                        <div class="marker"></div>\
                       </div>');

        p.attr('location', info.location);
        p.find('.message').html(info.message);
        p.find('.time').html(info.time);
        p.appendTo('#map');
    };

    var startAnimation = function() {
        points = $('#map .point');
        setTimeout(go, initialDelay);
    };

    var go = function() {
        var current = points.has(':visible');

        if (current.length == 0) {
            $('#map').switchClass('', points.eq(0).attr('location'), transitionSpeed);
            setTimeout(function() {
                points.eq(0).show();
            }, transitionSpeed);
        }
        else {
            var next = current.next();
            if (next.length == 0) {
                next = points.eq(0);
                //return;
            }

            $('#map').switchClass(points.eq(current.index()).attr('location'), points.eq(next.index()).attr('location'), transitionSpeed);
            setTimeout(function() {
                points.eq(current.index()).hide();
                points.eq(next.index()).show();
            }, transitionSpeed);
        }

        setTimeout(go, normalDelay);
    };
};

Flipto.tour = new function() {
    var tour, tourNavText, tourNavBoxes
    transitionSpeed = 500,
        activeClass = 'active';

    this.init = function() {
        tour = $('#top .tour');
        tourNav = $('#top .tour-nav .shell');
        tourNavText = $('#top .tour-nav .text a');

        tourNavText.bind('click', function(e) { e.preventDefault(); next(); });

        tourNavBoxes = $('<div class="boxes"/>');
        tourNavText.each(function() {
            $('<a href="#"/>')
            .bind('click', function(e) { e.preventDefault(); skip(this); })
            .appendTo(tourNavBoxes);
        });
        tourNavBoxes.children().first().addClass(activeClass);
        tourNavBoxes.appendTo(tourNav);
    };

    var next = function() {
        var current = tour.children(':visible');
        var next = current.next();

        if (next.length == 0) {
            next = tour.children(':first');
        }

        go(current, next);
    };

    var skip = function(el) {
        var current = tour.children(':visible');
        var next = tour.children().eq($(el).index());

        if (current.index() != next.index()) {
            go(current, next);
        }
    };

    var go = function(here, there) {
        here.fadeOut(transitionSpeed, function() {
            there.fadeIn(transitionSpeed);
        });

        tourNavText.eq(here.index()).switchClass(activeClass, '', transitionSpeed);
        tourNavText.eq(there.index()).switchClass('', activeClass, transitionSpeed);

        tourNavBoxes.children().removeClass(activeClass);
        tourNavBoxes.children().eq(there.index()).addClass(activeClass);
    };
};

Flipto.home = new function() {
    var activeClass = 'active',
        middleClass = 'middle';

    this.init = function() {
        $('#verticals li').hover(
            function() {
                $(this).addClass(activeClass).siblings().removeClass(activeClass);
            },
            function() {
                if (!$(this).hasClass(middleClass)) {
                    $(this).removeClass(activeClass).siblings('.middle').addClass(activeClass);
                }    
            }
        );
    };
};

Flipto.util = new function() {
    this.addOnload = function(new_onload) {
        var original_onload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = new_onload;
        } else {
            window.onload = function() {
                if (original_onload) {
                    original_onload();
                }
                new_onload();
            }
        }
    };
};


Flipto.util.addOnload(Flipto.home.init);
//Flipto.util.addOnload(Flipto.map.init);
//Flipto.util.addOnload(Flipto.tour.init);
