Jobs = function() { }

var stepNames = new Array();
stepNames[1] = ["Project Setup", "Project Setup", "Enter Quantities", "Review Crops", "Confirm Project", "Shopping Cart"];
stepNames[2] = ["Select Image", "Crop Image", "Write a Greeting", "Review Card", "Enter Quantity", "Shopping Cart"];
stepNames[6] = ["", "", "Book Customization", "Enter Quantity", "Book in Cart", "", "Ordered"];
stepNames[7] = ["Project Setup", "Choose Wrapper", "Confirm Project", "Checkout Project", "Ordered", "Ordered", "Ordered"];
stepNames[8] = ["", "", "Calendar Customization", "Enter Quantity", "Calendar in Cart", "", "Ordered"];
stepNames[9] = ["Project Setup", "Project Setup", "Project Setup", "Confirm Project", "Confirm Project", "Shopping Cart", "Ordered"];

var escapeHTML = function (str)
{
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   return div.innerHTML;
};

var statusMessage = function(code, item) {
    var step = item.Status;
    var name = stepNames[code][step - 1];
    var link = item.StatusLink;

    return step == 7 
        ? name + " (<a href=" + link + ">Order again</a>)"
        : "<a href="+link+">"+name+"</a>";
}

Jobs.InitPage = function() {
    var hash = location.hash.replace(/^#/, "");
    var item = $('#' + hash + '-collapsed');
    if (item.length == 1) {
        item.click();
    }
};

Jobs.Titles = {
    1: "Prints",
    2: "Greeting Cards",
    6: "Photo Books",
    7: "Gallery Wraps",
    8: "Calendars",
    9: "Picture Framing"
};
Jobs.Headers = {
    1: ["Total Photos", "Total Prints"],
    2: ["Size"],
    6: ["Size", ""],
    7: ["Size"],
    8: ["Size", "Month Quantity"],
    9: ["Quantity"]
};

Jobs.Managers = new Array();

Jobs.AjaxRequest = function(code, options) {
    Jobs.Managers[code] = $.ajax(options);
}

Jobs.AjaxClose = function(code) {
    Jobs.Managers[code] = null;
}

Jobs.AjaxAbort = function(code) {
    try {
        var manager = Jobs.Managers[code];
        if (manager != null && manager != undefined) {
            manager.abort();
            Jobs.AjaxClose(code);
        }
    } catch (e) {
    }
}

Jobs.ShowLoading = function(id, code) {
    var collapsed = $('#' + id + '-collapsed');
    var expanded = $('#' + id + '-expanded');

    var loading = $('<div>Loading...</div>');
    expanded.append(loading);

    loading.click(function() {
        Jobs.AjaxAbort(code);

        loading.remove();
        collapsed.show();
        expanded.hide();
    });
}

Jobs.OpenTab = function(id, code) {
    var collapsed = $('#' + id + '-collapsed');
    var expanded = $('#' + id + '-expanded');

    collapsed.hide();
    expanded.show();
    if (expanded.children().length == 0) {
        Jobs.ShowLoading(id, code);

        var url = siteRoot + 'MyProducts/GetJobs?JobType=' + code + '&rnd=' + Math.random();
        Jobs.LoadContent(url, { orderMode: 0, pageIndex: 0, pageSize: 0 }, id, code, collapsed, expanded);
    } else {
        if (autofit != null && autofit != undefined) {
            autofit.onWindowResize(true);
        }
    }
}

Jobs.Refresh = function(id, code) {
    var collapsed = $('#' + id + '-collapsed');
    var expanded = $('#' + id + '-expanded');

    var url = siteRoot + 'MyProducts/GetJobs?JobType=' + code + '&rnd=' + Math.random();
    Jobs.LoadContent(url, { orderMode: 0, pageIndex: 0, pageSize: 0 }, id, code, collapsed, expanded);
    return false;
}


Jobs.Copy = function(id, code) {
    var collapsed = $('#' + id + '-collapsed');
    var expanded = $('#' + id + '-expanded');

    var url = siteRoot + 'MyProducts/CopyJobs?JobType=' + code + '&rnd=' + Math.random();
    var jobs = new Array();
    $('#' + id + '-expanded input:checked').each(function() {
        jobs.push($(this).val());
    });
    Jobs.LoadContent(url, { cartJobs: jobs, orderMode: 0, pageIndex: 0, pageSize: 0 }, id, code, collapsed, expanded);
    return false;
}

Jobs.Delete = function(id, code) {
    var collapsed = $('#' + id + '-collapsed');
    var expanded = $('#' + id + '-expanded');

    var url = siteRoot + 'MyProducts/DeleteJobs?JobType=' + code + '&rnd=' + Math.random();
    var jobs = new Array();
    $('#' + id + '-expanded input:checked').each(function() {
        jobs.push($(this).val());
    });
    Jobs.LoadContent(url, { cartJobs: jobs, orderMode: 0, pageIndex: 0, pageSize: 0 }, id, code, collapsed, expanded);
    return false;
}

Jobs.LoadContent = function(url, data, id, code, collapsed, expanded) {
    $('#ctl00_orderProgress').show();
    var options = {
        url: url,
        type: 'POST',
        data: data,
        async: true,
        success: function(d) {
            if (d.IsError) {
                Jobs.ShowError(expanded);
            } else {
                Jobs.UpdateItemCount(collapsed, code, d.TotalItems);
                d.Code = id;
                d.Headers = Jobs.Headers[code];
                expanded.setTemplate(Jobs.BaseTemplate,
                    { itemTemplate: $.createTemplate(Jobs.ItemTemplate) },
                    { filter_data: false, filter_params: false });
                expanded.setParam('code', code);
                expanded.setParam('id', id);
                expanded.setParam('status', function(s) { return statusMessage(code, s); });
                expanded.setParam('escapeHTML', escapeHTML);
                expanded.setParam('siteRoot', siteRoot);
                var result = expanded.processTemplate(d).html();

                expanded.html(result);

                Jobs.UpdateEvents(id);
            }
            $('#ctl00_orderProgress').hide();
        },
        error: function() {
            Jobs.ShowError(expanded);
            $('#ctl00_orderProgress').hide();
        },
        dataType: "json"
    };
    Jobs.AjaxRequest(code, options);
}

Jobs.UpdateEvents = function(id) {
    if (dynedit != null) {
        dynedit.registerEvents("#" + id + "-expanded p");
    }
    Jobs.UpdateScroll();
}

Jobs.UpdateItemCount = function(container, code, count) {
    var t = count + " " + Jobs.Titles[code].toLowerCase() + " project";
    if (count != 1) t += "s";
    t += " started";

    $('.job-count-message', container).text(t);

    if (count > 0) {
        $('.productopen', container).show();
    } else {
        $('.productopen', container).hide();
    }
}

Jobs.ShowError = function(container) {
    $('div', container).html('<div style="color:red">Fail.</div>');
}

Jobs.CloseTab = function(id) {
    $('#' + id + '-collapsed').show();
    $('#' + id + '-expanded').hide();
    Jobs.UpdateScroll();
}

Jobs.UpdateScroll = function() {
    if (autofit != null && autofit != undefined) {
        autofit.onWindowResize(true);
    }
}

Jobs.ToggleJob = function(obj, jobID) {
    $('#job-' + jobID).toggle();
    $(obj).toggleClass('jobclose').toggleClass('jobopen');
    Jobs.UpdateScroll();
}

Jobs.ItemTemplate = '\
<tr>\
    <td width="19px" style="width: 19px; white-space: nowrap; padding-right: 0px; padding-left: 2px;">\
        <input type="checkbox" value="{$T.ProductID}" />\
    </td>\
    <td width="450px" style="white-space: nowrap; padding-left: 0px;">\
        <p><img height="21px" width="1px" style="vertical-align: top;" alt="" src="images/blank.gif">\
            <span jobid="{$T.ProductID}" title="Click to rename" class="rcontent" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">{$P.escapeHTML($T.Name)}</span>\
        </p>\
    </td>\
    <td width="150px">{$P.status($T)}</td>\
    {#foreach $T.OptionalValues as record}\
    {#if ($T.record != null)}\
    <td>{$T.record}</td>\
    {#else}\
    <td>&nbsp;</td>\
    {#/if}\
    {#/for}\
    <td><span class="jobclose" onclick="Jobs.ToggleJob(this, \'{$T.ProductID}\')">&nbsp;&nbsp;</span></td>\
</tr>\
<tr>\
    <td style="padding: 0px; border: medium none;"></td>\
    <td style="padding: 0px; border: medium none;" colspan="{$T.OptionalValues.length+3}">\
        <div style="display: none;" id="job-{$T.ProductID}">\
            <div class="{#if ($P.code != 1) && ($P.code != 9)}JOBAddWidth {#/if}JOBconfirmSetUpSummry">\
                <h5>Order Summary</h5>\
                <table width="100%" cellspacing="0" cellpadding="0" border="0">\
                    <tbody>\
                        <tr>\
                            {#if ($P.code != 1) && ($P.code != 9)}\
                                <td width="130" rowspan="{$T.Details.length + 4}">\
                                    <img src="{$T.ImageLink}" alt=""/>\
                                </td>\
                            {#/if}\
                            <td class="JOBsettingType">Name of Project:</td>\
                            <td id="r{$T.ProductID}">{$P.escapeHTML($T.Name)}</td>\
                        </tr>\
                        {#if $P.code != 9}\
                        <tr>\
                            <td class="JOBsettingType">Finish:</td>\
                            <td>{$T.FinishName}</td>\
                        </tr>\
                        <tr>\
                            <td class="JOBsettingType">Color&nbsp;Correction:</td>\
                            <td>{#if $T.AllowColorCorrection}AdoramaPix{#else}No, Thanks{#/if}</td>\
                        </tr>\
                        {#foreach $T.Details as record}{#if ($T.record.Value != "")}\
                        <tr>\
                            <td class="JOBsettingType">{$T.record.Key}:</td>\
                            <td>{$T.record.Value}</td>\
                        </tr>\
                        {#/if}{#/for}\
                        {#else}\
                        {#foreach $T.Details as record}\
                        {$T.record.Value}\
                        {#/for}\
                        {#/if}\
                        {#if ($P.code == 6)}\
                        <tr>\
                            <td colspan="2">\
                                <a href="{$P.siteRoot}book/designer/{$T.ProductID}">{#if ($T.Status == 7)}View{#else}Edit{#/if} Book</a>\
                                &nbsp;<a href="{$P.siteRoot}book/{$T.ProductID}">Share Book</a>\
                            </td>\
                        </tr>\
                        {#/if}\
                        {#if ($P.code == 8)}\
                        <tr>\
                            <td colspan="2">\
                                <a href="{$P.siteRoot}calendar/designer/{$T.ProductID}">{#if ($T.Status == 7)}View{#else}Edit{#/if} Calendar</a>\
                            </td>\
                        </tr>\
                        {#/if}\
                    </tbody>\
                </table>\
            </div>\
            <div class="{#if ($P.code != 1) && ($P.code != 9)}JOBAddMargin {#/if}JOBconfirmCostSmmry">\
                <h5>Total Summary</h5>\
                <table width="100%" cellspacing="0" cellpadding="0" border="0">\
                    {#if $T.TotalSummary != null}\
                        <tr class="JOBconfirmTopRow">\
					        <td>Description</td>\
					        {#if $P.code == 6}<td>UV Coat</td>{#/if}\
					        <td>QTY</td>\
					        <td>PRICE</td>\
					        <td class="JOBprepaidCell">PREPAID</td>\
					        <td>TOTAL</td>\
				        </tr>\
                        {#foreach $T.TotalSummary as record}\
                        <tr>\
                            <td>{$T.record.PrintSize}</td>\
                            {#if $P.code == 6}<td>{$T.record.Option}</td>{#/if}\
                            <td>{$T.record.Quantity}</td>\
                            <td>{#if $T.record.Sale == true}\
                                <span style="color:Red; font-weight:bold;">${$T.record.ActualPrice}</span>\
                            {#else}\
                                <span>${$T.record.ActualPrice}</span>\
                            {#/if}</td>\
                            <td class="JOBprepaidCell">\
                            {#if $T.record.PrepaidAvailable > 0}\
                            <span class="prepaidUsed">{$T.record.PrepaidQuantity} prepaid used</span>\
                            {#else}\
                            N/A\
                            {#/if}\
                            </td>\
                            <td class="JOBtotalCell">${$T.record.TotalAmount}</td>\
                        </tr>\
                        {#/for}\
                        <tr class="JOBconfirmTotal">\
                            <td colspan="{#if $P.code == 6}5{#else}4{#/if}">Total</td>\
                            <td>${$T.GrandTotal}</td>\
                        </tr>\
                    {#/if}\
                    <tr>\
						<td colspan="{#if $P.code == 6}6{#else}5{#/if}"><div class="JOBA" {#if $T.Status == 7}style="display:none"{#/if}><div class="JOBAction"><a class="next" href="{$T.StatusLink}"><span class="left">&nbsp;</span><span>Proceed to next step</span><span class="right">&nbsp;</span></a></div></div></td>\
					</tr>\
                </table>\
            </div>\
        </div>\
    </td>\
</tr>';

Jobs.BaseTemplate = '\
<table class="stretch jobslist" cellspacing="0">\
    <tr onclick="Jobs.CloseTab(\'{$T.Code}\')">\
        <th colspan="2">Project Name</th>\
        <th>Status</th>\
        {#foreach $T.Headers as item}\
        <th>{$T.item}</th>\
        {#/for}\
        <th align="right" style="padding:0px;"><span class="productclose">&nbsp;&nbsp;</span></th>\
    </tr>\
    {#foreach $T.Items as item}\
    {#include itemTemplate root=$T.item}\
    {#/for}\
    <tr>\
        <td colspan="{$T.Headers.length+4}" style="padding-left: 0px">\
            <div class="divButton">\
                <a href="#" onclick="return Jobs.Copy(\'{$P.id}\', {$P.code});">Copy</a>\
                /\
                <a href="#" onclick="return Jobs.Delete(\'{$P.id}\', {$P.code});">Delete</a>\
            </div>\
            {#if $P.code == 6}\
            <div class="divButtonW">\
                <a href="{$P.siteRoot}products/books">Review deleted</a>\
            </div>\
            {#/if}\
        </td>\
    </tr>\
</table>\
';


$(function() {
    Jobs.InitPage();
});