/// <reference path=~/scripts/jquery/jquery-1.3.2.min.js"/>
/// <reference path=~/scripts/jquery/jquery.json-2.2.min.js"/>
var rootUrl = ""; // "http://infinity.shifthome.net";
function processPost(serviceUrl, dataName, serviceData, callback) {
    $.ajax({
        url: rootUrl + serviceUrl,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: $.toJSON(serviceData),
        dataType: "json",
        success: function (data) {
            callback(data[dataName]);
        }
    })
    return false;
}
function processGet(serviceUrl, dataName, callback) {
    $.ajax({
        url: rootUrl + serviceUrl,
        type: "GET",
        data: ({}),
        dataType: "json",
        success: function (data) {
            callback(data[dataName]);
        }
    });
}
String.prototype.trunc =
    function (n, useWordBoundary) {
        if (this.length <= n) return this.toString();
        s_ = this.substr(0, n - 1);
        s_ = (useWordBoundary) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
        return (s_ + '...');
    };

function UploadConfig(controlID, callback) {
    extensions = '*.jpg;*.jpeg;*.png;*.gif;*.tiff;*.bmp';
    desc = "All images";
    errormessage = 'Invalid file type.  Please upload a jpg, gif, png, tiff, or bmp image file.';
    var script = '/File.ashx';
    return {
        'uploader': '/scripts/uploadify/uploadify.swf',
        'cancelImg': '/scripts/uploadify/cancel.png',
        'buttonImg': '/images/siteimages/add_button.png',
        'script': script,
        'fileDataName': 'fileData',
        'fileExt': extensions,
        'fileDesc': desc,
        'auto': true,
        'multi': false,
        'method': 'POST',
        //'buttonText': 'Add Picture',
        'queueSizeLimit': 1,
        'height': '22',
        'width': '90',
        'wmode': 'transparent',
        onComplete: function (event, queueID, fileObj, response, data) {
            object = $.evalJSON(response);
            try {
                $('#' + controlID).uploadifySettings('buttonText', 'Change ' + uploadType);
            }
            catch (err) {
            }
            if (callback)
                callback(object);
        },
        onError: function (event, queueID, fileObj, errorObj) {
            alert(errormessage);
        }

    }
}

/* Toggle Default value of an Input Field */
(function (a) {
    a.fn.toggleDefault = function () {
        return $(this)
            .data('defaultValue', $(this).val())

            .focus(function (e) {
                $(this).removeClass('defaultField idleField').addClass('focusField');
                if (this.value == $(this).data('defaultValue')) {
                    this.value = '';
                }
                if (this.value != $(this).data('defaultValue')) {
                    this.select();
                }
            })
            .blur(function (e) {
                $(this).removeClass("focusField");
                if ($.trim(this.value) == '') {
                    if ($(this).data('defaultValue')) {
                        this.value = $(this).data('defaultValue');
                        $(this).addClass("defaultField");
                    } else {
                        $(this).addClass("idleField");
                    }
                }
                else {
                    if (this.value != $(this).data('defaultValue'))
                        $(this).removeClass('default').removeClass('defaultField').unbind('click');
                }
            })
    }
})(jQuery);

function toggleSelected(that) {
    $(that).parent().children().removeClass('selected');
    $(that).addClass('selected');
    return false;
}

var take = 6;
var total;
/* Horizontal Scroller */
(function (a) {
    a.fn.horizontalScroller = function (interval, rows, next, prev) {
        $(this).data('showing', 0);
        rows = rows || 1;
        interval = interval || 1;
        $(this).data('showing', 0).css('overflow', 'hidden');
        // Width of the Scroller
        var totalW = 0;
        var w = 0;
        $.each($(this).children(), function (k, v) {
            w = $(v).outerWidth(true);
            totalW += w;
        });
        // Create Container
        var d = $('<div/>')
                    .css('width', ((totalW / rows) + w))
                    .css('padding-right', $(this).outerWidth());
        $(this).children().appendTo($(d));
        $(this).html($(d));
        // Bind the action buttons
        $('#' + next).data('previousButton', $('#' + prev));
        $('#' + prev).data('nextButton', $('#' + next));

        var width = (totalW / rows) + w;
        var currentWidth = parseInt($(this).css('width'));
        if (total <= take)
            $('#' + next).hide();
        $('#' + next).data('availableWidth', currentWidth);
        $('#' + next).data('totalWidth', width);
        $('#' + prev).data('availableWidth', currentWidth);
        $('#' + prev).data('totalWidth', width);
        $('#' + next)
            .bind('click', { that: this, interval: interval }, function (e) {
                $($('#' + next).data('previousButton')).show();
                var showing = $(e.data.that).data('showing');
                if (showing < $(e.data.that).children().children().length - interval) {
                    //                    var cl = $(e.data.that).children().children()[showing].offsetLeft;
                    //                    showing += interval;
                    //                    var nl = $(e.data.that).children().children()[showing].offsetLeft;
                    //                    if (cl >= nl) return false;
                    //                    $(e.data.that).data('showing', showing);
                    //                    if ($(e.data.that).children().children()[showing].offsetLeft + $(this).data('availableWidth') + 274 >= $(this).data('totalWidth')) {
                    //                        $(this).hide();
                    //                    }
                    //                    $(e.data.that).animate({ scrollLeft: $(e.data.that).children().children()[showing].offsetLeft }, "slow");
                    var cl = $(e.data.that).children().children()[showing].offsetLeft;
                    showing += 6;
                    if (showing > total - 7) showing = total - 6;
                    //                    if(total - showing - 7 > 6) showing += 6;
                    //                    else showing += total - showing - 6;
                    //var nl = $(e.data.that).children().children()[showing].offsetLeft;
                    //if (cl >= nl) return false;
                    $(e.data.that).data('showing', showing);
                    if (showing + 1 > total - take) {
                        $(this).hide();
                    }
                    $(e.data.that).animate({ scrollLeft: $(e.data.that).children().children()[showing].offsetLeft + 30 }, "slow");

                }
            });
        $('#' + prev)
            .hide()
            .bind('click', { that: this, interval: interval }, function (e) {
                var showing = $(e.data.that).data('showing');
                if (showing > 0) {
                    //                    var cl = $(e.data.that).children().children()[showing].offsetLeft;
                    //                    showing -= interval;
                    //                    var nl = $(e.data.that).children().children()[showing].offsetLeft;
                    //                    if (cl <= nl) return false;
                    //                    if (showing < 0) showing = 0;
                    //                    $(e.data.that).data('showing', showing);
                    //                    if ($(e.data.that).children().children()[showing].offsetLeft + $(this).data('availableWidth') < $(this).data('totalWidth')) {
                    //                        $($(this).data('nextButton')).show();
                    //                    }

                    //                    $(e.data.that).animate({ scrollLeft: $(e.data.that).children().children()[showing].offsetLeft }, "slow");
                    var cl = $(e.data.that).children().children()[showing].offsetLeft;
                    showing -= 6;
                    if (showing < 0) showing = 0;
                    var nl = $(e.data.that).children().children()[showing].offsetLeft;
                    if (cl <= nl) return false;
                    if (showing < 0) showing = 0;
                    $(e.data.that).data('showing', showing);
                    if (total - showing - 1 > 0) {
                        $($(this).data('nextButton')).show();
                    }

                    $(e.data.that).animate({ scrollLeft: $(e.data.that).children().children()[showing].offsetLeft }, "slow");
                }
                if (showing == 0)
                    $(this).hide();
            });
    }
})(jQuery);
var animationTime = 300;
var initialWidth = 55;
var largeWidth = 65;
function shrinkThumbnailImage(object) {
    $(object).animate({ width: initialWidth, marginTop: 0 }, animationTime);

}
function growThumbnailImage(object) {
    $(object).animate({ width: largeWidth, marginTop: -6 }, animationTime);
}
function layoutEvents(events, delegate) {
    $('#gray-band-content').html('');
    $('#image-prev-container').remove();
    $('#image-next-container').remove();
    total = events.length;
    $('#gray-band').prepend($('<div/>')
                                    .attr('id', 'image-prev-container')
                                    .append($('<a/>')
                                        .attr('id', 'image-prev')
                                        .append(
                                            $('<img/>')
                                                .attr('src', '/images/siteimages/sub_nav_left_arrow.png')

                                        )
    //                                        .append($('<div/>').html('<<<'))
    //                                        .append($('<div/>').html('MORE'))
                                    )
                                    )
    $.each(events, function (k, v) {
        $('#gray-band-content')
            .append(
                $('<div/>')
                    .attr('class', 'band-image-container')
                    .append(
                        $('<div/>')
                            .attr('class', 'band-image-wrapper')
                            .append(
                                $('<div/>')
                                    .attr('class', 'band-image-link')
                                        .append(
                                            $('<a/>')
                                                .css('cursor', 'pointer')
                                                    .hover(
                                                        function () {
                                                            growThumbnailImage($(this).children()[0]);
                                                            return false;
                                                        },
                                                        function () {
                                                            shrinkThumbnailImage($(this).children()[0]);
                                                            return false;
                                                        }
                                                    )
                                                    .append(
                                                    $('<img/>')
                                                        .attr('class', 'band-image')
                                                        .attr('src', v.image[0].replace('_raw.jpg', '_small.jpg'))
                                                        .attr('alt', v.name)
                                                        .bind('click', function (e) {
                                                            $('#right-panel').show();
                                                            $('#video-panel').hide();
                                                            if (delegate)
                                                                delegate(v);
                                                            return false;
                                                        })





                                                )
                                    )
                            )
                            .append(
                                $('<div/>')
                                    .attr('class', 'band-image-title')
                                    .html(v.name.replace('&', '&amp;'))
                            )
                    )
            )
    });
    $('#gray-band').append($('<div/>')
        .css('float', 'left').attr('id', 'image-next-container')
        .append($('<a/>').attr('id', 'image-next')
                        .append(
                            $('<img/>')
                                .attr('src', '/images/siteimages/sub_nav_right_arrow.png')
                        )

    //.append($('<div/>').html('>>>'))
    //.append($('<div/>').html('MORE'))
        )
        );
    $('#gray-band-content').horizontalScroller(1, 1, 'image-next', 'image-prev');
    $('#gray-band-content').animate({ scrollLeft: 0 }, 0);
    $('#image-next-container a img, #image-prev-container a img').hover(
        function () {
            $(this).parent().addClass('opaque');
            var source = $(this).attr('src');
            source = source.replace('.png', '_blue.png');
            $(this).attr('src', source);
            return false;
        },
        function () {
            $(this).parent().removeClass('opaque');
            var source = $(this).attr('src');
            source = source.replace('_blue.png', '.png');
            $(this).attr('src', source);
            return false;
        }
    )


}
var currentImage = "";
function showEvent(e) {
    if (e) {
        var temp = e.name.replace('&', '&amp;');
        $('#right-panel-image-header').html(temp);
        $('.right-panel-image-header').removeClass('noTransform');

        currentImage = e.image[0];
        layoutImages(e, e.defaultHeader ? e.defaultHeader : temp);
        if (e.transformation) {
            $('.right-panel-image-header').addClass('noTransform');
        }
    }
}

function layoutImages(e, header) {
    //$('#right-panel-image').attr('src', currentImage);
    $('#right-panel').html('');
    $('#image-panel').empty();
    var index = 0;

    index = 0;
    if (e.video_item) {
        $('#video-panel').html(e.video_item);
    }
    $('#right-panel')
        .append(
            $('<div/>')
                .attr('class', 'right-panel-image-header')
                .html(header)
            )
        .append(
            $('<div/>')
                .attr('id', 'right-panel-image-wrapper')
        )
        .append(!e.video_item ? '' :
            $('<a/>')
                .append(
                    $('<div/>')
                    .attr('class', 'right-panel-video-header')
                    .html('WATCH THE YOU+HP EXPERIENCE UNFOLD')
                    .append(
                        $('<img/>')
                            .attr('class', 'video-play-button')
                            .attr('src', '/images/siteimages/video_play.png')
                    )
                )
                .bind('click', function (e) {
                    $('#video-panel').show();
                    $('#right-panel').hide();
                    return false;
                })

        )
    $.each(e.image, function (k, v) {
        index++;
        $('#right-panel-image-wrapper')
            .append(
                $('<img/>')
                    .attr('src', v)
            )
    });
    if (e.image.length > 1) {
        cyclePanel(0);

        $.each($('#image-panel li'), function (k, v) {
            $(v).hover(
                function () {
                    growThumbnailImage($(this).children().children()[0]);
                    return false;
                },
                function () {
                    shrinkThumbnailImage($(this).children().children()[0]);
                    return false;
                }
            )

        });
    }
}
var intervalID = -1;;
function cyclePanel(index) {
    clearInterval(intervalID);
    intervalID = setInterval(bindImagePanel, 50);

    $('#image-panel').empty();
    $('#right-panel-image-wrapper').cycle({
        timeout: 3000,
        pager: '#image-panel',
        startingSlide: index,
        pagerClick: startSlideShow,
        pagerAnchorBuilder: function (idx, slide) {
            var id = $(slide).attr('id');
            var source = $(slide).attr('src');
            return '<li><a href="#"><img src="' + source.replace('raw', 'small') + '" /></a></li>';
        }
    });
}
function bindImagePanel() {
    if ($('#image-panel li').length > 0) {
        clearInterval(intervalID);
        intervalID = -1;
    }
    $.each($('#image-panel li'), function (k, v) {
        $(v).hover(
                function () {
                    growThumbnailImage($(this).children().children()[0]);
                    return false;
                },
                function () {
                    shrinkThumbnailImage($(this).children().children()[0]);
                    return false;
                }
            )

    });
}
function startSlideShow() {
    $('#right-panel').show();
    $('#video-panel').hide();
}
function advanceSlideToVideo() {
}
var isOneAnimating = false;
var isTwoAnimating = false;
function finishedAnimatingOne() {
    isOneAnimating = false;
}
function finishedAnimatingTwo() {
    isTwoAnimating = false;
}
function bindHeaderLinks() {
    $.each($('#header-links').children(), function (k, v) {
        $(v).hover(
            function () {

                var child = $(this).children()[0];
                var link = $($(child).children()[0]).attr('src');
                if (link.indexOf('_blue.png') < 0)
                    link = link.replace('.png', '_blue.png');
                $($(child).children()[0]).attr('src', link);
                if (link.indexOf('events_') > -1) {
                    if (isOneAnimating) return false;
                    $('#event-sub-menu').animate({ height: 80 }, 200);
                }
                else if (link.indexOf('environments_') > -1) {
                    if (isTwoAnimating) return false;
                    $('#environment-sub-menu').animate({ height: 62 }, 200);
                }
            },
            function () {
                var child = $(this).children()[0];
                var link = $($(child).children()[0]).attr('src');
                link = link.replace('_blue.png', '.png');
                if (link.indexOf('events_') > -1) {
                    isOneAnimating = true;
                    $('#event-sub-menu').animate({ height: 23 }, 200, finishedAnimatingOne);
                }
                else if (link.indexOf('environments_') > -1) {
                    isTwoAnimating = true;
                    //TODO:  this is broken
                    $('#environment-sub-menu').animate({ height: 23 }, 200, finishedAnimatingTwo);
                }
                if ($($(child).children()[0]).hasClass('selected')) return false;
                $($(child).children()[0]).attr('src', link);

            }

        );
    });
}
function shrinkFooterImage(object) {
    $(object).animate({ "width": "-=10px" }, animationTime);

}
function growFooterImage(object) {
    $(object).animate({ "width": "+=10px" }, animationTime);
}

function bindFooterLinks() {
    $.each($('#bottom-wrapper a'), function (k, v) {
        $(this).hover(
                function () {
                    growFooterImage($(this).children()[0]);
                    return false;
                },
                function () {
                    shrinkFooterImage($(this).children()[0]);
                    return false;
                }
            )
    });

}