/*
 * YS Custom Cover uploader UI backing code
 *   Depends on:
 *     YUI
 *
 * HTML ids:
 *    upload_photo_button - first red button
 *    upload_form - the upload form itself, a div containing an iframe
 *    upload_iframe - the upload iframe
 */

var YSCCUI = new Object();
var yui = YAHOO.util;

YSCCUI.init = function() {
    yui.Event.addListener('upload_photo_button', "click", YSCCUI.onUploadButtonClick);
    yui.Event.addListener('edit_image_button', "click", YSCCUI.onEditImageClick);

    // If we were given a specific mode and random_dir, proceed directly to that step.
    YSCCUI.checkImmediateUploadResize();

    // "Correct" IE's placement of a couple of things
    // HACK, a designer should fix this properly...
    if (navigator.userAgent.indexOf('MSIE') != -1) {
        // IE8 renders properly if it's not in compatibiliity view
        // It will change its version string accordingly
        // See http://blogs.msdn.com/giorgio/archive/2009/04/14/how-to-detect-ie8-using-javascript-client-side.aspx
        var matches = navigator.userAgent.match(/MSIE\s+(\d\.\d+)/);
        var version = parseFloat(matches[1]);
        if (version < 8) {
            yui.Dom.setStyle('photo_preview', 'margin-left', '-291px');
            yui.Dom.setStyle("customize_cover", 'margin-top', '-660px');
            document.getElementById("upload_frame").height = 440;
        }
    }

};
yui.Event.onDOMReady(YSCCUI.init);

// Enable the upload form and center it in the viewport.
YSCCUI.onUploadButtonClick = function(e) {
    // reset the source of the upload iframe and redisplay.
    var random_dir = yui.Dom.get('random_dir').value;
    var upload_frame = yui.Dom.get('upload_frame');
    upload_frame.src = YSCCUI.upload_url + '?random_dir=' + random_dir + '&mode=upload';
    YSCCUI.centerUploadForm();
};

// When backlinked from the checkout page, we'll be passed a mode and random_dir already, so make it look like the
// user was already at that step.
YSCCUI.checkImmediateUploadResize = function() {
    var upload_frame = yui.Dom.get('upload_frame');
    if (YSCCUI.mode == 'resize' && YSCCUI.random_dir) {
        upload_frame.src = YSCCUI.upload_url + '?random_dir=' + YSCCUI.random_dir + '&mode=resize';
        YSCCUI.centerUploadForm();
    }
};

// Throw the user back to the image edit step when the Edit Image button is clicked
YSCCUI.onEditImageClick = function(e) {
    YSCCUI.haveCropTransform(false);
    var random_dir = yui.Dom.get('random_dir').value;
    var upload_form = yui.Dom.get('upload_form');
    var upload_frame = yui.Dom.get('upload_frame');
    upload_frame.src = YSCCUI.upload_url + '?random_dir=' + random_dir + '&mode=resize';
    YSCCUI.centerUploadForm();
};

YSCCUI.centerUploadForm = function() {
    var upload_form = yui.Dom.get('upload_form');
    var upload_frame = yui.Dom.get('upload_frame');
    var window_h = yui.Dom.getViewportHeight();
    var window_w = yui.Dom.getViewportWidth();
    var form_h = upload_frame.height;
    var form_w = upload_frame.width;
    var scroll_top = yui.Dom.getDocumentScrollTop();

    var centered_top = (window_h / 2) - (form_h / 2) + scroll_top;
    var centered_left = (window_w / 2) - (form_w / 2);

    yui.Dom.setStyle(upload_form, 'top', centered_top + 'px');
    yui.Dom.setStyle(upload_form, 'left', centered_left + 'px');

    yui.Dom.setStyle(upload_form, 'display', 'block');
};

// This gets called whenever the upload form is closed.
// We'll either just hide the form, or process the page transformation into the preview page and then close the form.
// This is how we learn of the random dir setting, assuming this is a new image
YSCCUI.notifyUploadFormClosed = function(have_preview, preview_url, random_dir) {

    var img = yui.Dom.get('photo_preview');

    // if we have a preview image, the user saved a crop
    if (have_preview) {
        img.src = preview_url + '?ts=' + (new Date()).getTime();  // defeat browser caching
        yui.Dom.setStyle('photo_preview', 'display', 'block');
        yui.Dom.get('random_dir').value = random_dir;

        // Page transformation calls to morph the upload page into the preview page
        YSCCUI.haveCropTransform(true);
    }

    // Hide upload form
    yui.Dom.setStyle('upload_form', 'display', 'none');
    form.validateByButton('btn_continue', true);
};

// Transform the page to/from "I have a crop" to "I don't have a crop" mode
YSCCUI.haveCropTransform = function(have_crop) {
    yui.Dom.setStyle('preview_controls',    'display', (have_crop ? 'block' : 'none'));
    yui.Dom.setStyle('header_upload',       'display', (have_crop ? 'none'  : 'block'));
    yui.Dom.setStyle('header_preview',      'display', (have_crop ? 'block' : 'none'));
    yui.Dom.setStyle('upload_photo_button', 'display', (have_crop ? 'none'  : 'inline'));
    yui.Dom.setStyle('bottom_tos_confirm',  'display', (have_crop ? 'block' : 'none'));

    // Some additional steps to take if we don't have a crop.
    if (!have_crop) {
        yui.Dom.get('photo_preview').src = '/your-shot/custom-cover/i/clear.gif';
        yui.Dom.get('photo_info_error').innerHTML = '';
    }
};