function openModal(collectionID,pictureID) {
    clearModal();

    $('body').append("<div class='ModalOverlay' onclick='clearModal()'></div>");
    $.ajax({ url: "/Partial/ModalView/?collectionID=" + collectionID + "&pictureID=" + pictureID, complete: modalHtmlLoaded, cache: false });
}

function modalHtmlLoaded(response) {
    $('body').append("<div class='Modal' style='visibility:hidden;display:block;'>" + response.responseText + "</div>");
}

function repositionModal() {
    var modalInfo = $('#ModalInfo');
    var modalImageWidth = $('#ModalImage').find('img').outerWidth();
    var closeContainerWidth = $('#CloseContainer').width();
    modalInfo.width(modalImageWidth - closeContainerWidth);
    
    var modal = $('.Modal');
    modal.css('margin-left', Math.floor(-(modal.width() / 2)) + 'px');
    modal.css('margin-top', Math.floor(-(modal.height() / 2)) + 'px');

    var image = modal.find('img');
    modal.find('#PreviousArea').attr('coords', '0,0,' +  Math.floor(image.width() / 2) + ',' + Math.floor(image.height()));
    modal.find('#NextArea').attr('coords', Math.floor(image.width() / 2) + ',0,' + Math.floor(image.width()) + ',' + Math.floor(image.height()));
    modal.css('visibility', 'visible');
}

function clearModal() {
    $('.Modal').remove();
    $('.ModalOverlay').remove();
}

function displayPrevious() {
    $('#PreviousImageButton').show();
    $('#NextImageButton').hide();
}

function displayNext() {
    $('#PreviousImageButton').hide();
    $('#NextImageButton').show();
}

function changePicture(collectionID, pictureID) {
    openModal(collectionID, pictureID);
}

function addTransparentDiv() {

    $('.NavigationInner').each(function (index, element) {
        element = $(element);
        var width = element.outerWidth();
        var height = element.outerHeight();
        var offset = element.position();

        var transparentDiv = $('<div class="TransparentBackGround"></div>');
        transparentDiv.css('width', width + 'px');
        transparentDiv.css('height', height + 'px');
        transparentDiv.css('left', offset.left + 'px');
        transparentDiv.css('top', offset.top + 'px');
        element.parent().append(transparentDiv);
    });
}

function addLinkToMap() {
    var link = $('<a onclick="window.open(this.href); return false;" href="http://maps.google.no/maps?hl=no&amp;q=intro+interi%C3%B8rdesign+as&amp;ie=UTF8&amp;ll=59.9393,10.880327&amp;spn=0.013586,0.045447&amp;t=m&amp;z=15&amp;vpsrc=0&amp;iwloc=A&amp;ved=0CDAQpQY&amp;sa=X&amp;ei=KMdvTs2aNsv_Oa2TgdAI"></a>');
    var spacerClone = $('#Spacer').clone();
    link.append(spacerClone);
    $('#Spacer').replaceWith(link);
}

function pictureClick() {
    var collectionID = $(this).attr('id').split('_')[1];
    var pictureID = $(this).attr('id').split('_')[2];
    openModal(collectionID, pictureID);
}

function send(name) {
    var address01 = 'm';
    var address02 = address01 + 'a';
    var address03 = address02 + 'i';
    var address04 = address03 + 'l';
    var address05 = address04 + 't';
    var address06 = address05 + 'o';
    var address07 = address06 + ':';
    var address = address07 + name;
    var address1 = address + "@";
    var address2 =  address1 + "i";
    var address3 =  address2 + "n";
    var address4 =  address3 + "t";
    var address5 =  address4 + "r";
    var address6 =  address5 + "o";
    var address7 =  address6 + "-";
    var address8 =  address7 + "d";
    var address9 =  address8 + "e";
    var address10 =  address9 + "s";
    var address11 =  address10 + "i";
    var address12 =  address11 + "g";
    var address13 =  address12 + "n";
    var address14 =  address13 + ".";
    var address15 =  address14 + "n";
    var address16 =  address15 + "o";
    window.location = address16;
}

function prepareSign() {
    var name = $(this).html();
    $(this).html(name + '<img src="/Content/Images/graphics/sign.png" alt="at" style="margin-bottom: -2px;">intro-design.no');
    $(this).attr('onclick', 'send(\'' + name + '\')');
    $(this).css('cursor', 'pointer');
}