/*
*	@filename: core.js
*	@version: 0.1b
*	@date: 5th Dec 2011
*	@author: Flemming Lauritzen
*	@company: Reaktor AS
*	@web: www.reaktor.no
*/
// id of the mother element
var slideShowId = 'slideshow';

// init the slide show when the document is ready
jQuery(document).ready(function () {
    var selector = '#' + slideShowId;
    var $selector = $(selector);

    if ($.support.cssProperty('transform') && $.support.cssProperty('transition')) {

        var url = $selector.attr('data-url');
        slideshow.init(selector, url);
        slideshow.load();

    } else {

        var flashvars = { xmlpath: $selector.attr('data-url') };
        var params = { WMODE: 'transparent' };
        var attributes = {};

        swfobject.embedSWF(
			$selector.attr('data-flash'),
			slideShowId,
			$selector.attr('data-width'),
			$selector.attr('data-height'),
			"9.0.0",
			null,
			flashvars,
			params,
			attributes
		);
    }
});

var slideshow = {
    // url to xml
    url: null,
    // data loaded
    data: null,
    // jQuery element of the mother element
    $el: null,
    // the duration of each transition in ms
    transitionDuration: null,
    // number of slides
    numSlides: null,
    // number of links
    numLinks: null,

    // initialize the show
    init: function (selector, url) {
        // store the selector and url
        this.$el = $(selector);
        this.url = url;
    },

    load: function () {
        var that = this;

        // load the xml
        $.ajax({
            type: "GET",
            url: that.url,
            dataType: "xml",
            success: function (data, textStatus, jqXHR) {
                that.data = data;
                that.parse();
            }
        });
    },

    // parse the XML
    parse: function (data, textStatus, jqXHR) {
        var that = this;

        // retrieve the duration of each transition
        this.transitionDuration = parseFloat($(this.data).find('slidebrowser settings interval').text()) * 1000;
        // retrieve the number of slides
        this.numSlides = $(this.data).find('slidebrowser slides slide').length;
        // retrieve the number of links
        this.numLinks = $(this.data).find('slidebrowser items item').length;


        // define the html we'll soon inject into the DOM
        var html = '';

        // open image list
        html += '<div class="img"><div class="wrp"><ul>';
        // add content
        $(this.data).find('slidebrowser slides slide image').each(function (i, el) {
            html += '<li>'
				+ '<img src="' + $(el).text() + '"'
				+ ' />'
				+ '</li>'
				;
            that.indexMax = i + 1;
        });
        // close list
        html += '</ul></div></div>';

        // open link list
        html += '<div class="lnk"><div class="wrp"><ul>';
        // add content
        $(this.data).find('slidebrowser items item').each(function (i, el) {
            var $el = $(el);
            var weight = parseFloat($el.find('weight').text());
            var textIndent = (-that.numLinks / 2 + i) * 120;
            html += '<li data-weight="' + weight + '" style="font-size:' + (1.3 + weight / 10) + 'em; margin-left:' + textIndent + 'px; top:0; left:0;">'
				+ '<a href="' + $el.find('link').text() + '" title="' + $el.find('title').text() + '" >'
				+ '<span>'
				+ $el.find('title').text()
				+ '</span>'
				+ '</a>'
				+ '</li>'
				;
        });
        // close list
        html += '</ul></div></div>';

        // inject the html
        this.$el.html(html);

        // calculate the whitespace
        var whitespace = that.$el.outerHeight() - that.$el.find('.lnk ul').outerHeight();

        // move the link list half the white space
        that.$el.find('.lnk ul').css('top', whitespace / 2);

        // intit the UIs
        this.startSlideShow();
        this.startCloud();
    },

    // starts the cloud
    startSlideShow: function () {
        var that = this;

        // the cycle plugin returns an error unless there are something to cycle inbetween
        if (this.numSlides > 1)
            // start the slide show
            this.$el.find('.img ul').cycle({
                speed: that.transitionDuration,
                timeout: 4000
            });
        },

    // starts the cloud
    startCloud: function () {
        var that = this;

        this.$el.bind('mouseenter', function (e) {
            var $this = $(this);
            $this.addClass('first-time-in');
            setTimeout(function () {
                $this.removeClass('first-time-in');
            }, 500);
        });

        // move the links whenever the user moves the mouse
        this.$el.bind('mousemove click', function (e) {
            // calculate new x and y numerator
            var deltaX = ($('html').width() / 2 - e.pageX);
            var deltaY = that.$el.height() / 2 - e.pageY;
            // move each link individually
            that.$el.find('.lnk li').each(function (i, el) {
                $el = $(el);
                // move the link, using the data-weight as a denominator (making "weighty" links move more slowly)
                $el.css({
                    left: deltaX / $el.attr('data-weight') / 4,
                    top: deltaY / $el.attr('data-weight') / 20
                });
            });
        });
    }

}