var header = function (header, image) {
    this.header = "/itemimages/intro/Words/" + header;

    this.image = "/itemimages/intro/Images/" + image;
}
var headers = new Array();
headers.push(new header('if.you.can.dream.it.png', 'HP_design_raw.jpg'));
headers.push(new header('we.can.create.it.png', 'HP_External_actual_raw.jpg'));
headers.push(new header('Imagin.it.png', 'golden_room_final_raw.jpg'));
headers.push(new header('produce.it.png', 'cott_temple_zues_2_raw.jpg'));
headers.push(new header('visions.png', 'ActiveClassroom_design_raw.jpg'));
headers.push(new header('results.png', 'ActiveClassroom_actual_02_raw.jpg'));
headers.push(new header('no.limits.png', 'San_francisco_event_raw.jpg'));
headers.push(new header('boundaries.png', 'oscars_1_raw.jpg'));

function fillSlideShow() {
    var index = -1;
    $('#slide-frames')
        .append(
            $('<img/>').attr('src', '/itemimages/intro/ex_award_image.png')
        )
    $.each(headers, function (k, v) {
        index++;
        $('#slide-frames')
            .append(
                $('<div/>')
                    .attr('id', 'slide-frame-' + index)
                    .append(
                        $('<div/>')
                            .attr('class', 'left-panel')
                                .append(
                                    $('<img/>')
                                        .attr('src', v.header)
                                        .css('position', 'absolute')
                                        .css('bottom', '70px')
                                )
                    )
                    .append(!v.image ? '' :
                        $('<div/>')
                            .attr('class', 'right-panel')
                                .append(
                                    $('<img/>')
                                        .attr('class', 'right-panel-image')
                                        .attr('src', v.image)
                                )
                    )
            )
    });
    $('#slide-frames')
        .append(
            $('<div/>')
                .css('width', '920px')
                .append(
                    $('<div/>')
                        .css('padding-top', '230px')
                        .append(
                            $('<img/>')
                                .attr('src', 'images/siteimages/Marketing.to.png')
                        )

                )
                .append(
                    $('<div/>')
                        .css('padding-left', '250px')
                        .css('padding-top', '15px')
                        .append(
                            $('<img/>')
                                .attr('src', 'images/siteimages/Infinity.png')

                        )
                )

        )



}

var currentImageIndex;
var offset;
var currentMargin = 0;
var animating = false;
var smallImageWidth = 184;
var largeImageWidth = 184;
var smallImageWidthPixels = "184px";
var largeImageWidthPixels = "184px";
var newLargeImageWidth = 204;
var newLargeImageWithInPixels = "204px";
var animationTime = 300;
function shrinkSelectedElement() {
    $('#image-band-container div.selected div img').animate({ width: smallImageWidth }, animationTime);
    $('#image-band-container div.selected').animate({ width: smallImageWidth, marginTop: 0 }, animationTime, finishedAnimating($('#image-band-container div.selected')));

    clearInterval(timeOutID);
    makeAllItemsVisible();

}
function growSelectedElement() {
    $('#image-band-container div.selected div img').animate({ width: newLargeImageWidth }, animationTime);
    $('#image-band-container div.selected').animate({ width: newLargeImageWidth, marginTop: -8 }, animationTime, finishedAnimating($('#image-band-container div.selected')));
    clearInterval(timeOutID);
}
function makeAllItemsTransparent() {
    $('#image-band-container div .image-band-image-title').css('color', '#929497');
    $('#image-band-container div.selected .image-band-image-title').css('color', '#FFF')
}
function makeAllItemsVisible() {
    $('#image-band-container div .image-band-image-title').css('color', '#FFF')
}
function finishedAnimating(object) {
    makeAllItemsTransparent();
    $(object).data('animating', 'false');
    isAnimating = false;
}
function sortEvent(a, b) {
    return a.showInCarousel - b.showInCarousel;
}
function layoutImages(second_control) {
    var index = 0;
    var tempArray = new Array();
    $.each(items, function (k, v) {
        if (v.showInCarousel)
            tempArray.push(v);
    });
    tempArray.sort(sortEvent);
    currentImageIndex = tempArray.length;
    offset = tempArray.length;
    $.each(tempArray, function (k, v) {
        index++;
        var url = "events.aspx";
        url += "?cat=" + v.category + "&id=" + v.id;
        $('#image-band-container')
            .append(
                $('<div/>')
                    .css('float', 'left')
                    .css('padding-top', '20px')
                    .css('width', (index == 3 && second_control ? largeImageWidthPixels : smallImageWidthPixels))
                    .attr('class', 'image-band-image-container')
                    .hover(
                        function () {
                            if ($(this).data('animating') == 'true') return false;
                            $(this).data('animating', 'true');
                            toggleSelected($(this));
                            growSelectedElement();
                            isAnimating = true;
                            return false;
                        },
                        function () {
                            //if ($(this).data('animating') == 'true') return false;
                            //if (isAnimating) return false;
                            //$(this).data('animating', 'true');
                            toggleSelected($(this));
                            shrinkSelectedElement();
                            $(this).removeClass('selected');
                            //isAnimating = true;
                            return false;
                        }

                    )

                    .append(
                        $('<div/>')
                            .css('height', 'auto')
                            .append(
                                $('<a/>')
                                    .attr('href', v.url)
                                    .append(
                                        $('<img/>')
                                            .attr('src', v.imageForCarousel ? v.imageForCarousel.replace('_raw.jpg', '_medium.jpg') : '')
                                            .attr('class', 'image-band-image')
                                            .css('width', (index == 3 && second_control ? largeImageWidthPixels : smallImageWidthPixels))

                                    )
                            )
                    )
                    .append(
                        $('<div/>')
                            .css('width', '184px')
                            .css('padding', '3px 10px 0 7px')
                            .append(
                                $('<div/>')
                                    .attr('class', 'image-band-image-title')
                                        .html(v.name)
                            )
                            .append(
                                $('<div/>')
                                    .attr('class', 'image-band-image-type-title')
                                    .html(v.typeTitle)
                            )
                    )
            )
    });
}
function getUrl(item) {
    switch (item.type) {
        case 1:
            return "events.aspx?id=" + item.id;
            break;
        case 2:
            return "environments.aspx?id=" + item.id;
            break;
        case 3:
            return "tours.aspx?id=" + item.id;
            break;
        case 4:
            return "ambassadors.aspx?id=" + item.id;
            break;
        case 5:
            return "casestudies.aspx?id=" + item.id;
            break;
        default:
    }
}

var initialMove = true;
function finishedMovingRight(count) {
//    if (initialMove) {
//        initialMove = false;
//        alert(initialMove);
//        return;
//    }
    //    alert('here');
    count = 5;
    try {
        var imageBand = $('#image-band-container');
        for (i = 0; i < count; i++) {
            var c = $(imageBand).children()[0];
            $(imageBand).append(c);
        }
        $(imageBand).animate({ marginLeft: currentMargin }, 0);
        animating = false;

    }
    catch (ex) {
    }
}

function finishedMovingLeft(count) {
    count = 5;
    animating = false;
    var imageBandContainer = $('#image-band-container');
    for (i = 0; i < count; i++) {
        var lastChild = $(imageBandContainer).children()[$(imageBandContainer).children().length - 1];
        $(imageBandContainer).prepend(lastChild);
    }
    $(imageBandContainer).animate({ marginLeft: currentMargin }, 0);
}
var navigationBound = false;
/* Horizontal Scroller */
function bindNavigation(next, prev) {
    if (navigationBound) return false;
    navigationBound = true;
    var imageBand = $('#image-band-container');
    rows = 1
    interval = 1;
    // Width of the Scroller
    var totalW = 0;
    var w = 0;
    $.each($(imageBand).children(), function (k, v) {
        w = $(v).outerWidth(true);
        totalW += w;
    });
    $(imageBand).css('width', ((totalW / rows) + w));
    $(imageBand).animate({ marginLeft: -smallImageWidth * currentImageIndex }, 0);
    currentMargin = (-smallImageWidth * currentImageIndex);
    // Bind the action buttons
    $('#' + next)
            .bind('click', function (e) {
                var bandcontainer = $('#image-band-container');
                try {
                    if (animating) return;
                    resetInterval();
                    animating = true;
                    $(bandcontainer).children().removeClass('selected');
                    var element = $(imageBand).children()[offset + 3];
                    var prev_element = $(imageBand).children()[offset + 2];
                    
                    $(imageBand).animate({ marginLeft: currentMargin - smallImageWidth * 5 }, 1000,null, finishedMovingRight);
                }
                catch (ex) {
                }
            });
    $('#' + prev)
            .bind('click', { that: this, interval: interval }, function (e) {
                if (animating) return;
                animating = true;
                try {
                    resetInterval();
                    var imageBand = $('#image-band');
                    var imageBandContainer = $('#image-band-container');
                    $(imageBandContainer).children().removeClass('selected');
                    var element = $(imageBandContainer).children()[offset + 1];
                    var prev_element = $(imageBandContainer).children()[offset + 2];

                    $(imageBandContainer).animate({ marginLeft: currentMargin + smallImageWidth * 5 }, 1000, finishedMovingLeft);
                }
                catch (ex) {
                }
            });
}
var timeOutID;
var newsTimeoutID;
//function moveNext() {
//    var imageBand = $('#image-band-container');
//    var bandcontainer = $('#image-band-container');
//    if (animating) return;
//    animating = true;
//    $(bandcontainer).children().removeClass('selected');
//    $(imageBand).animate({ marginLeft: currentMargin - smallImageWidth }, "slow", finishedMovingRight(1));
//}
////}

function startPage() {
    $('#image-intro-next, #image-intro-prev').hover(
        function () {
            $(this).parent().addClass('opaque');
            var source = $($(this).children()).attr('src');
            source = source.replace('.png', '_blue.png');
            $($(this).children()[0]).attr('src', source);
            return false;
        },
        function () {
            $(this).parent().removeClass('opaque');
            var source = $($(this).children()).attr('src');
            source = source.replace('_blue.png', '.png');
            $($(this).children()[0]).attr('src', source);
            return false;
        }
    )
    $('#image-band').bind('mouseenter', function (e) {
        clearInterval(timeOutID);
        return false;
    });
    $('#image-band').bind('mouseleave', function (e) {
        //moveNext();
        resetInterval();
        return false;
    });
    try {
        layoutNews();
    }
    catch (ex) {
    }

    $('#gray-band').append($('#skip-intro'));
    layoutImages();
    layoutImages(true);
    var show = $.getUrlVars()['show'];
    if (show && show == "no_slide") {
        slide_finished();
    }
    else {
        fillSlideShow();
        $('#slide-frames').cycle({ nowrap: true, end: slide_finished, timeoutFn: setIntroSlideTimes });
        $('#skip-intro').show();
    }


}
function showSplashScreen() {
    $('#content-wrapper')
        .append(
            $('<img/>').attr('id', 'splash-screen').attr('src', '/itemimages/intro/ex_award_image.png')
        )
        .append(
            $('<a/>').attr('id', 'hide-splash-screen').html('Skip').css({ 'color': '#FFF', 'position': 'absolute', 'top': '5px', 'right': '5px' }).bind('click', function (e) {
                hideSplashScreen();
            })
        )
        .oneTime(3000, function () {
            hideSplashScreen();
        })
    }
    function hideSplashScreen() {
        $('#splash-screen, #hide-splash-screen').animate({ opacity: 0 }, 1000, function () {
            slide_finished();
            $('#splash-screen').hide();
            $('#hide-splash-screen').hide();
        });


    }
function layoutNews() {
    var newsContainer = $('<div/>').attr('id', 'news-items').hide().css('float', 'right')
                            .append($('<div/>').attr('id', 'news-header').html('RECENT NEWS:&nbsp;&nbsp;&nbsp;').css('float', 'left'))
                            .append($('<div/>').attr('id', 'news-container-wrapper').css('float', 'left')
                                .append($('<div/>').attr('id', 'news-container')
                            )
                        );
    if (initial.news.length > 1)
        setInterval(moveToNextNews, 4000);
    var temp = new Array();
    temp.push
    if (initial) {
        $('#gray-band').append(newsContainer);
        $.each(initial.news, function (k, v) {
            $('#news-container')
                        .append(
                            $('<div/>')
                                .attr('class', 'latest-news')
                                .append(v.url == 'null' ? v.title.trunc(100, true) : 
                                    $('<a/>')
                                        .attr('href',  v.url)
                                        .attr('target', '_blank')
                                        .html(v.title.trunc(50, true))
                                        .append(
                                            $('<span/>')
                                                .html('&nbsp;&nbsp;more>>>')
                                                .attr('class', 'news-more')
                                        )
                                )
                        )

        });
    }
}
function setIntroSlideTimes(currSlideElement, nextSlideElement, options, forwardFlag) {
    if (!$(currSlideElement).attr('id')) {
        return 4000;
    }
    return 3000;
}
function moveToNextNews() {
    var newsContainer = $('#news-container');
    $(newsContainer).animate({ marginTop: -15 }, "slow", finishedAnimatingNews);
}
function finishedAnimatingNews() {
    var newsContainer = $('#news-container');
    var c = $(newsContainer).children()[0];
    $(newsContainer).append(c);
    $(newsContainer).animate({ marginTop: 0 }, 0);

}

function resetInterval() {
    if (timeOutID) {
        clearInterval(timeOutID);
    }
    //timeOutID = setInterval(moveNext, 3000);
}
function slide_finished() {
    $('#gray-band').show();
    $('#black-band').show();
    $('#slide-frames').hide();
    $('#skip-intro').hide();
    $('#home-content').show();
    bindNavigation('image-intro-next', 'image-intro-prev');
    $('#latest-news').show();
    resetInterval();
    $('#news-items').show();
    //$('#image-band').marquee();

    return false;
}

/**
* author Remy Sharp
* url http://remysharp.com/tag/marquee
*/

(function ($) {
    $.fn.marquee = function (klass) {
        var newMarquee = [],
            last = this.length;

        // works out the left or right hand reset position, based on scroll
        // behavior, current direction and new direction
        function getReset(newDir, marqueeRedux, marqueeState) {
            var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
            var r = 0;
            if (behavior == 'alternate') {
                r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : width;
            } else if (behavior == 'slide') {
                if (newDir == -1) {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
                } else {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : 0;
                }
            } else {
                r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
            }
            return r;
        }

        // single "thread" animation
        function animateMarquee() {
            var i = newMarquee.length,
                marqueeRedux = null,
                $marqueeRedux = null,
                marqueeState = {},
                newMarqueeList = [],
                hitedge = false;

            while (i--) {
                marqueeRedux = newMarquee[i];
                $marqueeRedux = $(marqueeRedux);
                marqueeState = $marqueeRedux.data('marqueeState');

                if ($marqueeRedux.data('paused') !== true) {
                    // TODO read scrollamount, dir, behavior, loops and last from data
                    marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

                    // only true if it's hit the end
                    hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);

                    if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {
                        if (marqueeState.behavior == 'alternate') {
                            marqueeState.dir *= -1; // flip
                        }
                        marqueeState.last = -1;

                        $marqueeRedux.trigger('stop');

                        marqueeState.loops--;
                        if (marqueeState.loops === 0) {
                            if (marqueeState.behavior != 'slide') {
                                marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                            } else {
                                // corrects the position
                                marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
                            }

                            $marqueeRedux.trigger('end');
                        } else {
                            // keep this marquee going
                            newMarqueeList.push(marqueeRedux);
                            $marqueeRedux.trigger('start');
                            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                        }
                    } else {
                        newMarqueeList.push(marqueeRedux);
                    }
                    marqueeState.last = marqueeRedux[marqueeState.axis];

                    // store updated state only if we ran an animation
                    $marqueeRedux.data('marqueeState', marqueeState);
                } else {
                    // even though it's paused, keep it in the list
                    newMarqueeList.push(marqueeRedux);
                }
            }

            newMarquee = newMarqueeList;

            if (newMarquee.length) {
                setTimeout(animateMarquee, 25);
            }
        }

        // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
        this.each(function (i) {
            var $marquee = $(this),
                width = $marquee.attr('width') || $marquee.width(),
                height = $marquee.attr('height') || $marquee.height(),
                $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
                marqueeRedux = $marqueeRedux.get(0),
                hitedge = 0,
                direction = ($marquee.attr('direction') || 'left').toLowerCase(),
                marqueeState = {
                    dir: /down|right/.test(direction) ? -1 : 1,
                    axis: /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
                    widthAxis: /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
                    last: -1,
                    loops: $marquee.attr('loop') || -1,
                    scrollamount: $marquee.attr('scrollamount') || this.scrollAmount || 2,
                    behavior: ($marquee.attr('behavior') || 'scroll').toLowerCase(),
                    width: /left|right/.test(direction) ? width : height
                };

            // corrects a bug in Firefox - the default loops for slide is -1
            if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
                marqueeState.loops = 1;
            }

            $marquee.remove();

            // add padding
            if (/left|right/.test(direction)) {
                $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
            } else {
                $marqueeRedux.find('> div').css('padding', height + 'px 0');
            }

            // events
            $marqueeRedux.bind('stop', function () {
                $marqueeRedux.data('paused', true);
            }).bind('pause', function () {
                $marqueeRedux.data('paused', true);
            }).bind('start', function () {
                $marqueeRedux.data('paused', false);
            }).bind('unpause', function () {
                $marqueeRedux.data('paused', false);
            }).data('marqueeState', marqueeState); // finally: store the state

            // todo - rerender event allowing us to do an ajax hit and redraw the marquee

            newMarquee.push(marqueeRedux);

            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
            $marqueeRedux.trigger('start');

            // on the very last marquee, trigger the animation
            if (i + 1 == last) {
                animateMarquee();
            }
        });

        return $(newMarquee);
    };
} (jQuery));