var _sharedList = [];

var _STARTING_NO_OF_ELEMENTS_TO_SHOW = 4;


//functions to load the profile data into the pagee
function fillMyDuluxContents(containerClasses, savedTemplates, ifRecent) {
    displaySavedRooms($(containerClasses.rooms), $(savedTemplates.rooms), ifRecent);
    displaySavedColours($(containerClasses.colours), $(savedTemplates.colours), ifRecent);
    displaySavedProducts($(containerClasses.products), $(savedTemplates.products), ifRecent);
    displaySavedAbstracts($(containerClasses.abstracts), $(savedTemplates.abstracts), ifRecent);

    //passes in container for special case for popupmenu containers location
    setupPopupPanels(savedTemplates, containerClasses);
    setupMoreLinks();
    setupRenamePanel();

    addToPrintAndSharePanel($(document).attr('profile').getShareItems(), savedTemplates);

    setupMoreLinksEmptyCategories(containerClasses);

    ie7zIndexFix();
}

// Fix the menu popup for IE6/7
function ie7zIndexFix() {
    var zIndex = 4000;
    $.each($('.box-saveditemsroomscontainer .box-saveditem, .box-saveditemscolourscontainer .box-saveditem, .box-saveditemsabstractscontainer .box-saveditem'), function(index, value) {
        $(value).css('z-index', zIndex);
        zIndex = zIndex - 1;
    });
    // Make product menus higher and respect row position as they are positioned top-right and overlap element above
    $.each($('.box-saveditemsproductscontainer .box-saveditem'), function(index, value) {
        var rowIndex = 8000 - index % _STARTING_NO_OF_ELEMENTS_TO_SHOW;
        $(value).css('z-index', rowIndex);
    });
}

function setupMoreLinksEmptyCategoriesForContainer(containerClass, emptyCategoryContentSelector) {
    var categoryItems = $(containerClass + " .box-saveditem");
    var moreLink = $(containerClass).parent().find(".display-moreaction");
    var emptyText = $(emptyCategoryContentSelector);
    if (categoryItems.length > 0) {
        emptyText.hide();
    } else {
        emptyText.show();
    }
    categoryItems.each(function(itemCount, item) {
        if (itemCount < _STARTING_NO_OF_ELEMENTS_TO_SHOW) {
            $(item).show();
        } else {
            $(item).hide();
        }
    });
    if (categoryItems.length > _STARTING_NO_OF_ELEMENTS_TO_SHOW) {
        moreLink.show();
    } else {
        moreLink.hide();
    }
}

function setupMoreLinksEmptyCategories(containerClasses) {
    setupMoreLinksEmptyCategoriesForContainer(containerClasses.colours, ".emptyColours");
    setupMoreLinksEmptyCategoriesForContainer(containerClasses.products, ".emptyProducts");
    setupMoreLinksEmptyCategoriesForContainer(containerClasses.rooms, ".emptyRooms");
    setupMoreLinksEmptyCategoriesForContainer(containerClasses.abstracts, ".emptyAbstracts");
}

function generateImageThumbnailUrl(room, width, height) {
    var scheme = {}
    _(room.sections).each(function(section) {
        scheme[section.nirvanaSectionId] = section.color.colorId;
    });
    return getNirvanaImageURL(room.nirvanaImageLocalId, width, height, $.param(scheme));
}

function generateConfiguratorLink(room) {
    function getStateForRoom(room) {
        var scheme = {}
        _(room.sections).each(function(section) {
            scheme[section.nirvanaSectionId] = section.color.colorId;
        });
        return {
            'image_id': room.nirvanaImageLocalId,
            'item_id': room.id,
            'scheme': $.param(scheme),
            'name': room.name
        };
    }
    return $.param.fragment('#', getStateForRoom(room));
}

var rooms = [];

function displayRoom(element, item) {
    $(element).find("span.roomName").text(item.name);
    $(element).attr("id", item.id);
    $(element).find("a.configuratorlink img.mainImage").attr('src', generateImageThumbnailUrl(item, 96, 55));
    var linkPrefix = $(element).find("a.configuratorlink").attr("href");
    var linkSuffix = generateConfiguratorLink(item);
    $(element).find("a.configuratorlink").attr("href", linkPrefix + linkSuffix);
    rooms[item.id] = item;
    return element;
}

function displaySavedRooms(savedRoomsContainer, savedRoomTemplate, ifRecent) {
    var savedRooms = $(document).attr('profile').getUserItems("Fusion_Room");
    $(savedRooms).each(function(itemCount, item) {
        var newElem = savedRoomTemplate.clone();
        newElem = displayRoom(newElem, item);
        if (ifRecent) {
            savedRoomsContainer.html(newElem);
            return false;
        }
        else {
            savedRoomsContainer.append(newElem);
        }
    });
}

function displayColour(element, item) {
    $(element).find(".colourPanel").css("background-color", "#" + item.rgb.replace('#', ''));
    $(element).find("p.colourName").text(item.name);
    $(element).attr("id", item.id);

    return element;
}

function displaySavedColours(savedColoursContainer, savedColourTemplate, ifRecent) {
    var savedColours = $(document).attr('profile').getUserItems("Fusion_Color");
    var count = 0;
    $(savedColours).each(function(itemCount, item) {
        var newElem = savedColourTemplate.clone();
        newElem = displayColour(newElem, item);
        count++;
        if (ifRecent) {
            if (count == 1) {
                savedColoursContainer.html(newElem);
            } else {
                savedColoursContainer.append(newElem);
            }
            if (count >= 2) {
                return false;
            }
        }
        else {
            savedColoursContainer.append(newElem);
        }
    });
}

function displayProduct(element, item) {
    if (item.color == null) {
        $(element).find(".miniColorChip").addClass("miniColorChipNoColor");
        $(element).find(".miniColorChip").removeClass("miniColorChip");
    } else {
        $(element).find(".miniColorPanel").css("background-color", "#" + item.color.rgb.replace('#', ''));
    }
    $(element).find("span.productName").text(item.name);
    $(element).attr("id", item.id);
    $(element).find("div.box-saveditempopupcontainer a:first, div.box-saveditemspopup ul li:nth-child(2) p a").attr("href", generateProductPageUrl(item.productId));
    $(element).find("p.readlink a").attr("href", generateProductPageUrl(item.productId));
    $(element).find("div.box-saveditempopupcontainer a img.mainImage").attr("src", item.thumbLocationUrl);

    return element;
}

function displaySavedProducts(savedProductsContainer, savedProductTemplate, ifRecent) {
    var savedProducts = $(document).attr('profile').getUserItems("Fusion_Product");
    $(savedProducts).each(function(itemCount, item) {
        var newElem = savedProductTemplate.clone();
        newElem = displayProduct(newElem, item);

        if (ifRecent) {
            savedProductsContainer.html(newElem);
            return false;
        }
        else {
            savedProductsContainer.append(newElem);        
        }

        return newElem;
    });
}

function displayAbstract(element, item, savedAbstractTemplate) {
    var miniElem = $(element).find("span.miniColorChip");
    $(item.sections).each(function(colourCount) {
        if (colourCount > 0) {
            miniElem = $(savedAbstractTemplate).find("span.miniColorChip").clone();
            $(element).find("span.miniColorChips").append(miniElem);
        }
        $(miniElem).find(".miniColorPanel").css("background-color", "#" + this.color.rgb.replace('#', ''));
        if ($(item.sections).length == 4) {
            if (colourCount == 0) {
                $(miniElem).addClass("miniColorChip1");
            } else if (colourCount == 3) {
                $(miniElem).addClass("miniColorChip4");
            }
        }
    });
    if ($(item.sections).length == 4) {
        $(element).find("span.miniColorChips").removeClass("miniColorChips").addClass("miniColorChips4");
    }

    $(element).attr("id", item.id);
    var linkPrefix = $(element).find("a.configuratorlink").attr("href");
    var linkSuffix = generateConfiguratorLink(item) + "&abstract=1";
    $(element).find("a.configuratorlink").attr("href", linkPrefix + linkSuffix);
    $(element).find(".box-saveditempopupcontainer a.configuratorlink img.mainImage").attr("src", generateImageThumbnailUrl(item, 96, 55));
    rooms[item.id] = item;

    return element;
}

function displaySavedAbstracts(savedAbstractsContainer, savedAbstractTemplate, ifRecent) {
    var savedAbstracts = $(document).attr('profile').getUserItems("Fusion_Abstract");
    $(savedAbstracts).each(function(itemCount, item) {
        var newElem = savedAbstractTemplate.clone();
        newElem = displayAbstract(newElem, item, savedAbstractTemplate);

        if (ifRecent) {
            savedAbstractsContainer.html(newElem);
            return false;
        }
        else {
            savedAbstractsContainer.append(newElem);
        }
    });
}

//sets up the show and hide of the popup panels, they are positioned in CSS
function setupPopupPanels(savedTemplates, containerClasses) {
    $(".box-saveditem").each(function() {
        //Sets up the Popup events so that the popups are shown on the correct mouseovers.
        var boxItem = this;
        var popup = $(boxItem).find(".box-saveditemspopup");

        setupPopupPanelMouseEvents(boxItem, popup, savedTemplates, containerClasses);
    });

    //adds mouseover events to rooms so that they show their names full width
    $(".box-saveditemsrooms .box-saveditem").each(function() {
        var boxItem = this;
        $(boxItem).find(".box-saveditempopupcontainer").mouseenter(function() {
            $(boxItem).addClass("boxsaveditemsactiveroom");
            $(boxItem).find(".roomName").addClass("activeRoomName");
        });
        $(boxItem).find(".box-saveditempopupcontainer").mouseleave(function() {
            $(boxItem).removeClass("boxsaveditemsactiveroom");
            $(boxItem).find(".roomName").removeClass("activeRoomName");
        });
    });
}


function setupPopupPanelMouseEvents(savedItemDiv, popupPanel, savedTemplates, containerClasses) {

    $(savedItemDiv).find(".box-saveditempopupcontainer").mouseenter(function() {
        popupPanel.show();
    });
    $(savedItemDiv).find(".box-saveditempopupcontainer").mouseleave(function() {
        popupPanel.hide();
    });

    //Sets up the Click events on the print and share box
    var share = $(savedItemDiv).find(".share").parent();
    $(share).click(function() {
        var savedItemId = $(savedItemDiv).attr("id");
        var parentSharedItemsId = [];
        $($(document).attr('profile').getShareItems()).each(function(counter, item) {
            if (item.parentId != null) {
                parentSharedItemsId.push(item.parentId);
            }
        });
        if (jQuery.inArray(savedItemId, parentSharedItemsId) == -1) {
            $(document).attr('profile').shareUserItems([savedItemId], function(data) {
                addToPrintAndSharePanel(data, savedTemplates);
            });
        }
    });

    var rename = $(savedItemDiv).find(".rename").parent();
    $(rename).click(function() {
        showRenameRoomPanel(savedItemDiv);
        $(".box-renameroom .renameitems").show();
        $(".box-renameroom .saveitems").hide();
    });

    var copyRoom = $(savedItemDiv).find(".copy").parent();
    $(copyRoom).click(function() {
        showRenameRoomPanel(savedItemDiv);
        $(".box-renameroom .renameitems").hide();
        $(".box-renameroom .saveitems").show();
    });

    var deleteItem = $(savedItemDiv).find(".delete").parent();
    $(deleteItem).click(function() {
        var itemId = $(savedItemDiv).attr("id");
        $(document).attr('profile').deleteUserItems([itemId]);
        $(savedItemDiv).remove();
        setupMoreLinksEmptyCategories(containerClasses);
    });

}

function setupMoreLinks() {
    $(".display-moreaction a").click(function() {
        $(this).parents(".box-saveditemscontainer").find(".box-saveditem").show();
        $(this).parents(".display-moreaction").hide();
        $(this).parents(".box-moreaction").find(".display-lessaction").show();
        $(this).parents(".box-moreaction").addClass("box-lessaction");

    });
    $(".display-lessaction a").click(function() {
        $(this).parents(".box-moreaction").find(".display-moreaction").show();
        $(this).parents(".display-lessaction").hide();
        $(this).parents(".box-moreaction").removeClass("box-lessaction");

        //loop through all of the saved items, and only show the first 4.
        $(this).parents(".box-saveditemscontainer").find(".box-saveditem").each(function(counter, item) {
            if (counter >= _STARTING_NO_OF_ELEMENTS_TO_SHOW) {
                $(item).hide();
            }
        });
    });
    $(".display-lessaction").hide();
}

function setupRenamePanel() {
    $(".box-renameroom .cancelbutton").click(function() {
        $(".box-renameroom").hide();
    });
}


//Adds an item to the Print and Share panel, including stripping out all of the links that are not required.
function addToPrintAndSharePanel(sharedItems, savedTemplates) {
    $(sharedItems).each(function(counter, item) {
        var shareElem;

        if (item.type === "Fusion_Room") {
            shareElem = displayRoom($(savedTemplates.rooms).clone(), item);
        } else if (item.type === "Fusion_Color") {
            shareElem = displayColour($(savedTemplates.colours).clone(), item);
        } else if (item.type === "Fusion_Abstract") {
            shareElem = displayAbstract($(savedTemplates.abstracts).clone(), item, $(savedTemplates.abstracts));
        } else if (item.type === "Fusion_Product") {
            shareElem = displayProduct($(savedTemplates.products).clone(), item);
        }

        //strips out the normal popup overlay, and includes a close button instead.
        var popup = shareElem.find(".box-saveditemspopup");
        popup.empty();

        //deletes everything that is not the main panel - corresponds to extra links in products and my Rooms
        shareElem.find(".display-saveditem").children().each(function(itemCount, item) {
            if (itemCount > 0) {
                $(item).remove();
            }
        });

        //loops through all of the remaining elements looking for links to remove as don't want any in the shared array
        shareElem.find("a").each(function(counter, item) {
            var linkParent = $(item).parent();
            $(item).after($(item).children());
            $(item).remove();
        });

        popup.append($("<a href='#'><img src='/_layouts/Fusion/medias/pages/mydulux-saveditems/icon-closebutton.png' alt='delete' title='delete'/></a>"));
        popup.css("opacity", "1");
        printAndShareMouseOvers(shareElem, popup);

        shareElem.attr("id", item.id);
        $(".display-sharecontainer").prepend(shareElem);

        popup.hide();
    });


    if ($($(document).attr('profile').getShareItems()).length >= 1) {
        enableSharedPanelActions();
    }

    createScrollbar();
}

function createScrollbar() {
    var scrollPane = $('.box-sharecontainer');
    var scrollContent = $('.display-sharecontainer');

    var newContainerHeight = scrollContent.height();
    scrollPane.height(Math.min(320, newContainerHeight)); // Max height of 320px
    scrollContent.css({ top: 0 });
    $('.scroll-area').remove();

    function handleSliderChange(e, ui) {
        var height = scrollContent.height();
        var position = scrollPane.height() - height;
        scrollContent.animate({ top: (100 - ui.value) * (position / 100) }, 400);
    }

    function handleSliderSlide(e, ui) {
        var height = scrollContent.height();
        var position = scrollPane.height() - height;
        scrollContent.attr({ top: (100 - ui.value) * (position / 100) });
    }

    var inner = scrollContent.height()
    var outer = scrollPane.height();

    if (inner > outer + 2) {

        scrollPane.height(scrollPane.height());
        scrollPane.after($('<div class="scroll-area"><div class="scrollbarButton buttonUp"/><div class="scrollbar-holder"><div class="scrollbar"></div></div><div class="scrollbarButton buttonDown"/></div>'));

        var proportion = outer / inner;
        var handleHeight = proportion * scrollPane.height();

        var scrollbar = $(".scrollbar").slider({
            animate: true,
            orientation: 'vertical',
            min: 0,
            max: 100,
            value: 100,
            change: handleSliderChange,
            slide: handleSliderSlide
        });

        $('.ui-slider-handle').css({ height: handleHeight, 'margin-bottom': -0.5 * handleHeight });

        var origScrollbarHeight = $('.scrollbar').height();
        var sliderHeight = origScrollbarHeight - handleHeight;
        var sliderMargin = (origScrollbarHeight - sliderHeight) * 0.5;
        $('.ui-slider').css({ height: sliderHeight, 'margin-top': sliderMargin });

        $(".ui-slider-handle").append('<img class="scrollbar-top" src="~/_layouts/Fusion/medias/pages/mydulux-saveditems/scrollbar-top.png"/>');
        $(".ui-slider-handle").append('<img class="scrollbar-bottom" src="~/_layouts/Fusion/medias/pages/mydulux-saveditems/scrollbar-bottom.png"/>');

        $('.buttonDown').click(function() {
            var value = Math.max(scrollbar.slider("option", "value") - 10, 0);
            scrollbar.slider("option", "value", value);
        });

        $('.buttonUp').click(function() {
            var value = Math.min(scrollbar.slider("option", "value") + 10, 100);
            scrollbar.slider("option", "value", value);
        });

        $('.ui-slider').click(function(event) {
            event.stopPropagation();
        });

        $('.scrollbar-holder').click(function(event) {
            var offsetTop = $(this).offset().top;
            var clickValue = (event.pageY - offsetTop) * 100 / $(this).height();
            $('.scrollbar').slider("value", 100 - clickValue);
        });
    }
}

function printAndShareMouseOvers(sharedItem, popup) {
    //shows the delete button and the border around the items in the shared panel
    sharedItem.mouseenter(function() {
        $(sharedItem).css("border-color", "#aaaaaa");
        popup.show();
    });
    sharedItem.mouseleave(function() {
        sharedItem.css("border-color", "#FFFFFF");
        popup.hide();
    });

    //removes the item from the Print and share panel and the array of shared items.
    popup.find("img").click(function() {
        deleteSharedItem(sharedItem);
    });
}

//The Print and Share panel with Clear All etc.
function initialiseClearAllLink(clearAllBox) {
    clearAllBox.find("a").click(function() {
        $(".box-sharecontainer").height(0);
        $(".display-sharecontainer").empty();
        $(".scroll-area").remove();
        $(document).attr('profile').deleteAllShareItems();
        disableSharedPanelActions();
    });
    if (_sharedList.length == 0) {
        disableSharedPanelActions();
    } else {
        enableSharedPanelActions();
    }
}

function deleteSharedItem(sharedItem) {
    $(document).attr('profile').deleteShareItems([sharedItem.attr("id")]);
    sharedItem.remove();
    if ($(document).attr('profile').getShareItems().length == 0) {
        disableSharedPanelActions()
    }
    createScrollbar();
}

//functions used to enable/disable the Preview and share buttons (and hide/show the Clear All link)
function enableSharedPanelActions() {
    $(".box-clearaction a").show();
    $(".box-printsharepreview a").removeClass("printsharedisabledbutton");
    $(".box-printsharepreview a").addClass("printshareenabledbutton");
    $(".box-printshareallsocial").show();
    $(".printsharehelp").hide();
}

function disableSharedPanelActions() {
    $(".box-clearaction a").hide();
    $(".box-printsharepreview a").addClass("printsharedisabledbutton");
    $(".box-printsharepreview a").removeClass("printshareenabledbutton");
    $(".box-printshareallsocial").hide();
    $(".printsharehelp").show();
}

var currentSavedItemDiv;

//Sets up the Rename a Room panel to Rename the current Item
function showRenameRoomPanel(savedItemDiv) {
    var time_fade = 600;
    $(".box-renameroom").modal({
        zIndex: 5000,
        overlayClose: true,
        opacity: 70,
        onOpen: function(dialog) {
            dialog.overlay.fadeIn(time_fade, function() {
                dialog.container.fadeIn(time_fade, function() {
                    dialog.data.fadeIn(time_fade);
                });
            });
        },
        onClose: function(dialog) {
            dialog.data.fadeOut(time_fade, function() {
                dialog.container.fadeOut(time_fade, function() {
                    dialog.overlay.fadeOut(time_fade, function() {
                        $.modal.close();
                    });
                });
            });
        }
    });
    currentSavedItemDiv = savedItemDiv;
    var room = rooms[$(savedItemDiv).attr('id')];
    $(".box-renameroom h3.roomTitle").text($(savedItemDiv).find("span.roomName").text());
    $(".box-renameroom div.roomImage img").attr("src", generateImageThumbnailUrl(room, 498, 285));
    $(".box-renameroom input").val($(savedItemDiv).find("span.roomName").text());
    $(".box-renameroom input").focus();
}

function rename(name) {
    var room = rooms[$(currentSavedItemDiv).attr('id')];
    room.name = name;
    $(document).attr('profile').updateUserItems(room, function() {
        $(currentSavedItemDiv).find("span.roomName").text(name);
        $(currentSavedItemDiv).find("a.configuratorlink").attr("href", generateConfiguratorLink(room));
    });
}

function createcopy(name) {
    var originalRoom = rooms[$(currentSavedItemDiv).attr('id')];
    var newRoom = {
        name: name,
        type: "Fusion_Room",
        nirvanaImageLocalId: originalRoom.nirvanaImageLocalId,
        sections: originalRoom.sections
    };
    $(document).attr('profile').addUserItems(newRoom, function() {
        var roomContainer = $('.box-saveditemsroomscontainer');
        var roomTemplate = $($('#roomSavedItemTemplate').children()[0]);
        roomContainer.empty();
        displaySavedRooms(roomContainer, roomTemplate);
        var templates = { rooms: roomTemplate };
        setupPopupPanels(templates, roomContainer);
        setupMoreLinks();
    });
}