/// <reference path='mootools.core-vsdoc.1.0.2.js' />
Element.alias('dispose', 'wallop');

Element.implement({
	sneakyFadeIn: function() {
		if (Browser.Engine.trident) this.fade('show');
		else if (this.getStyle('visibility') == 'hidden') this.setStyle('display', 'block').fade('hide').fade('in');
		return this;
	},
	sneakyFadeOut: function() {
		if (Browser.Engine.trident) this.fade('hide');
		else if (this.getStyle('visibility') == 'visible') this.fade('out');
		return this;
	}
});

var myLog = new Log;
myLog.enableLog();

//Enums
var RouteType = { Long: 'long', Short: 'short', None: 'site' };
var AnimationType = { None: 'none', Left: 'left', Right: 'right' };

//Page manager (manages pages including history current index, switching and sliding)
var PageManager = new Class({

    Implements: [Events],

    index: 0,
    isSliding: false,

    initialize: function(element, pagesShort, pagesLong) {
        this.element = $(element);
        this.setPages(pagesShort, pagesLong).setMode(this.getModeFromHash(document.location.hash, RouteType.Short));
        this.attach();

        //Move to starting location
        if ($chk(document.location.hash)) {
            var pageNum = this.pages.indexOf(this.pages.filter(function(item, index) {
                return document.location.hash.test(item.chapter + '$') && document.location.hash.contains(item.type)
            })[0]);
            this.showPage({ pageNumber: pageNum }, true);
        }
    },

    setPages: function(pagesShort, pagesLong) {
        this.pagesShort = pagesShort;
        this.pagesLong = pagesLong;
        return this;
    },

    setMode: function(mode) {
        this.mode = mode;
        this.index = 0;
        if (mode == RouteType.Short) this.pages = this.pagesShort;
        if (mode == RouteType.Long) this.pages = this.pagesLong;
        return this;
    },

    getPage: function() {
        return this.pages[this.index];
    },

    //Attach page events
    attach: function() {
        this.addEvent('changePage', this.showPage.bind(this));
    },

    showPage: function(event, noAnimation) {
        //Determine move type
        var injectLocation = this.element.getElement('#center');
        var slideDirection = AnimationType.None;
        var newPageNumber = event.pageNumber;

        //Check if page change should animate
        if (!$chk(noAnimation)) {
            if (newPageNumber < this.index) {
                injectLocation = this.element.getElement('#leftFlank');
                slideDirection = AnimationType.Left;
            }
            else if (newPageNumber > this.index) {
                injectLocation = this.element.getElement('#rightFlank');
                slideDirection = AnimationType.Right;
            }
        }

        if (this.isSliding == false && $chk(this.pages[newPageNumber])) {
            myLog.log('Attempting to from to page ' + this.index + ' to page ' + newPageNumber + ' move type: ' + slideDirection);
            this.isSliding = true;
            this.index = newPageNumber;
            injectLocation.set('html', '');

            //Fetch page using ajax request, then inject content and slide
            this.fetchContentThenInject(this.pages[this.index], injectLocation, '#center', slideDirection);
            this.trackPage(this.pages[this.index]);
        }
    },

    fetchContentThenInject: function(page, injectLocation, filter, slideDirection) {
        var req = new Request.HTML({
            url: page.url,
            evalScripts: false,
            onSuccess: function(responseTree, responseElements, responseHTML) {
                injectLocation.set('html', responseElements.filter(filter)[0].get('html'));
                Cufon.set('fontFamily', 'Interstate').replace('#contentArea h2');
                Cufon.now();
                this.moveToPage(slideDirection);
            } .bind(this)
        }).get();
    },

    moveToPage: function(slideDirection) {
        var slideComplete = function() {
            myLog.log('Sliding done');
            this.isSliding = false;
        } .bind(this);
        var scrollHolder = this.element.getElement('#scrollHolder');
        var tween = new Fx.Tween(scrollHolder, { transition: Fx.Transitions.Quad.easeInOut, duration: 1000, link: 'ignore' });
        var slideWidth = 970;
        var slideSpacing = 140;
        switch (slideDirection) {
            case AnimationType.Right:
                tween.start('left', (-2 * slideWidth) - slideSpacing).addEvent('complete', function() {
                    scrollHolder.getElement('#center').set('html', scrollHolder.getElement('#rightFlank').get('html'));
                    tween.set('left', (-1 * slideWidth) - slideSpacing);
                    slideComplete();
                    Cufon.set('fontFamily', 'Interstate').replace('#contentArea h2');
                    Cufon.now();
                });
                break;
            case AnimationType.Left:
                tween.start('left', -slideSpacing).addEvent('complete', function() {
                    scrollHolder.getElement('#center').set('html', scrollHolder.getElement('#leftFlank').get('html'));
                    tween.set('left', (-1 * slideWidth) - slideSpacing);
                    slideComplete();
                    Cufon.set('fontFamily', 'Interstate').replace('#contentArea h2');
                    Cufon.now();
                });
                break;
            default:
                slideComplete();
                break;
        }

        if (this.index != 0) $$('#' + this.mode + 'Nav').setStyle('display', 'block');
    },

    getModeFromHash: function(hash, defaultValue) {
        if (hash.contains('long')) return RouteType.Long;
        else if (hash.contains('short')) return RouteType.Short;
        else if ($chk(defaultValue)) return defaultValue;
        return RouteType.None;
    },

    trackPage: function(pageToTrack) {
        pageTracker._trackPageview('/{type}-{chapter}'.substitute(pageToTrack));
    }.protect()

});

//Bottom nav widget
var Navigation = new Class({

	initialize: function(shortNav, longNav, mode) {
		this.shortNav = $(shortNav);
		this.longNav = $(longNav);
		this.setMode(mode).attach();
	},

	attach: function() {
		$$('.showServices').addEvent('click', function(e) {
			this.getParent('div').getElement('.subNav').tween('height', 165);
			e.stop();
		});
		$$('.down').addEvent('click', function(e) {
			this.getParent('.subNav').tween('height', 0);
			e.stop();
		});
		return this;
	},

	setMode: function(mode) {
		this.mode = mode;
		$$('.subNav').tween('height', 0);
		switch (mode) {
			case RouteType.Long:
				$(this.shortNav).setStyles({ 'visibility': 'hidden', 'display': 'none' });
				$(this.longNav).sneakyFadeIn();
				break
			case RouteType.Short:
				$(this.longNav).setStyles({ 'visibility': 'hidden', 'display': 'none' });
				$(this.shortNav).sneakyFadeIn();
				break;
			case RouteType.None:
				$(this.shortNav).setStyles({ 'visibility': 'hidden', 'display': 'none' });
				$(this.longNav).setStyles({ 'visibility': 'hidden', 'display': 'none' });
				break;
		}
		return this;
	},

	getCurrentNav: function() {
		switch (this.mode) {
			case RouteType.Long:
				return this.longNav;
				break;
			case RouteType.Short:
				return this.shortNav;
				break;
			case RouteType.None:
				return null;
				break;
		}
	},

	setPage: function(selectedPage) {
		if ($chk(this.getCurrentNav())) {
			this.getCurrentNav().getElements('a').removeClass('sel');
			$$('.showServices').setStyle('visibility', 'hidden');

			var selector = 'a[href*={type}-{chapter}]'.substitute(selectedPage).replace(/image[0-9]/i, '');
			var selectedItem = this.getCurrentNav().getElement(selector);

			this.getCurrentNav().getElements('a').each(function(item, index, items) {
				if (index <= items.indexOf(selectedItem)) item.addClass('sel');
			});
			
			if($chk(selectedItem.getParent('.serviceNavigation')))
				$$('.showServices').setStyle('visibility', 'visible');
		}
		return this;
	}

});

//A widget to switch routes
var RoutePicker = new Class({
    Implements: [Options],

    options: { width: 0, height: 0 },

    initialize: function(triggers, pageManager, options) {
        this.setOptions(options);
        this.trigger = triggers;
        this.body = $$('body')[0];
        this.pageManager = pageManager;
        this.attach();
    },

    attach: function() {
        this.trigger.addEvent('click', this.show.bind(this));
    },
    dettach: function() {
        this.trigger.removeEvents('click');
    },

    show: function(e) {
        if (this.pageManager.getPage().type != RouteType.None) {
            if ($chk(this.blackBackground))
                $$(this.blackBackground, this.contentArea).wallop();

            this.blackBackground = new Element('div', { 'class': 'blackOut' }).fade('hide').inject(this.body, 'bottom').sneakyFadeIn();
            this.contentArea = new Element('div', { 'class': 'lightBoxContent' }).fade('hide').inject(this.body, 'bottom').sneakyFadeIn();

            this.blackBackground.setStyles({ 'width': window.getScrollSize().x, 'height': window.getScrollSize().y });
            if (Browser.Engine.trident) this.blackBackground.setStyles({ 'opacity': 0.8, background: '#000' });
            this.contentArea.setStyles({
                'height': this.options.height,
                'left': (window.getSize().x - this.options.width) / 2,
                'top': ((window.getHeight() - 580) / 2) + 110, 'width': this.options.width
            });

            var html = '<h2>Got a bit more time?</h2><a class="btnClose" href="#close">Close</a><h4>How long have you got?</h4>'
		    + '<a href="#short-{chapter}">Just a few moments</a><a href="#long-{chapter}">A bit more time</a><h4>or</h4>'
		    + '<a href="#site-home">Start over from scratch</a><a href="#close">Just keep going</a>';

            var content = new Element('div', { 'html': html.substitute(this.pageManager.getPage()).replace(/image[0-9]/i, '') });

            content.inject(this.contentArea);
            content.getElements('a').addEvent('click', this.hide.bind(this));
            Cufon.set('fontFamily', 'Interstate').replace('.lightBoxContent h2');
            Cufon.now();
        }
        e.stop();
    },

    hide: function(e) {
        this.contentArea.sneakyFadeOut();
        this.blackBackground.sneakyFadeOut();
        if ($(e.target).get('href').contains('close')) {
            e.stop();
        }
    }
});

//Image Carousel - self explanatory
var ImageCarousel = new Class({

	//element is the relay container, selector is the relay selector
	initialize: function(element, selector) {
		this.element = $(element);
		this.attach(selector);
	},

	attach: function(selector) {
		this.element.addEvent('click:relay(' + selector + ')', function(e) {
			this.getParent('ul').getElements('a').removeClass('sel');
			this.addClass('sel');
			var container = this.getParent('div');
			var i = container.getElements('ul a').indexOf(this);
			container.getElements('img')[i].fade('hide').fade(1);
			container.getElements('img').filter(function(item, index) { return index != i && item.getStyle('visibility') == 'visible'; }).fade(0);
			e.stop();
		});
	}
});


//Site data.. this is just to seperate is from the logic a bit
//The Page Manager just needs page data for a long route and a short routes in this format: {url: '', chapter: '', type: RouteType.Short}
var BWA = {

    site: '/', //Local switch to / for live

    services: ['architecture', 'environmentaldesign', 'constructionandprototyping', 'designformanufacture', 'integrateddesignengineering', 'parametricmodeling', 'productiondesign', 'productsolutions', 'structuralengineering'],

    getShortPages: function() {
        var data = new Array();
        data.push({ url: BWA.site + 'default.aspx', chapter: 'home', type: RouteType.None });
        data.push({ url: BWA.site + 'RouteQuick/Approach.aspx', chapter: 'approach', type: RouteType.Short });
        data.push({ url: BWA.site + 'RouteQuick/Services.aspx', chapter: 'services', type: RouteType.Short });
        BWA.services.each(function(item, index) {
            data.push({ url: BWA.site + 'RouteQuick/ServiceItem.aspx?serviceId=' + (index + 1), chapter: item, type: RouteType.Short });
        });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=0', chapter: 'news', type: RouteType.Short });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=1', chapter: 'news2', type: RouteType.Short });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=2', chapter: 'news3', type: RouteType.Short });
        data.push({ url: BWA.site + 'RouteQuick/Clients.aspx', chapter: 'clients', type: RouteType.Short });
        data.push({ url: BWA.site + 'RouteQuick/Contact.aspx', chapter: 'contact', type: RouteType.Short });
        return data;
    },

    getLongPages: function() {
        var data = new Array();
        data.push({ url: BWA.site + 'default.aspx', chapter: 'home', type: RouteType.None });
        data.push({ url: BWA.site + 'RouteLong/Approach.aspx', chapter: 'approach', type: RouteType.Long });
        data.push({ url: BWA.site + 'RouteLong/Services.aspx', chapter: 'services', type: RouteType.Long });
        BWA.services.each(function(item, index) {
            data.push({ url: BWA.site + 'RouteLong/ServiceText.aspx?serviceId=' + (index + 1), chapter: item, type: RouteType.Long });
            data.push({ url: BWA.site + 'RouteLong/ServiceImage.aspx?serviceId=' + (index + 1) + '&imageNum=1', chapter: item + 'image1', type: RouteType.Long });
            data.push({ url: BWA.site + 'RouteLong/ServiceImage.aspx?serviceId=' + (index + 1) + '&imageNum=2', chapter: item + 'image2', type: RouteType.Long });
            data.push({ url: BWA.site + 'RouteLong/ServiceImage.aspx?serviceId=' + (index + 1) + '&imageNum=3', chapter: item + 'image3', type: RouteType.Long });
        });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=0', chapter: 'news', type: RouteType.Long });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=1', chapter: 'news2', type: RouteType.Long });
        data.push({ url: BWA.site + 'RouteQuick/News.aspx?newsPageNum=2', chapter: 'news3', type: RouteType.Long });
        data.push({ url: BWA.site + 'RouteQuick/Clients.aspx', chapter: 'clients', type: RouteType.Long });
        data.push({ url: BWA.site + 'RouteQuick/Contact.aspx', chapter: 'contact', type: RouteType.Long });
        return data;
    }
};