/*
EditImage.js

*/

// Image class.
var ImageToEdit;
var ImageContainer;
var ImgPhoto;
var yuiCrop;
var isCropperEnabled = true;

var cropLinesColour = "#FFFFFF";

// SLIDERS
//var BrightnessSlider;
//var ContrastSlider;
//var SharpnessSlider;

// Image object
function Image() {
    this.imageID = 0;
    this.Name = "";
    this.SrcHeight = 0;
    this.SrcWidth = 0;
    this.Height = 0;
    this.Width = 0;
    this.AspectRatio = 1;
    this.ProductAspectRatio = 1;
    this.CropLeft = 0;
    this.CropTop = 0;
    this.CropWidth = 0;
    this.CropHeight = 0;
    this.MaxCropWidth = 0;
    this.MaxCropHeight = 0;
    this.rotation = 0;
    this.rotate = 0;
    this.effects = "";
    this.ImageVersion = "";
    this.ImageUrlRoot = "";
    this.ProductImageUrlRoot = "";
    this.ProductID = 0;
    this.Brightness = 50;
    this.orderItemID = "";
    this.Admin = "";
    this.Title = "";
}

// apply effect - original, b/w, sepia
function SetEffect(fx, val) {

    var reg = new RegExp(',' + fx + '\\(.*?\\)', 'g');
    isCropperEnabled = true;

    val = Math.round(val);
    var doAdd = true;

    if (fx == 'Normal') 
        ImageToEdit.effects = 'Normal';
    
    if (fx == 'Fit') {
        if (val == 0)
            doAdd = false;
        else {
            val = ImageToEdit.ProductAspectRatio;
            isCropperEnabled = false;
        }
    }

    ImageToEdit.effects = ImageToEdit.effects.replace(reg, '');

    if (doAdd)
        ImageToEdit.effects += ',' + fx + '(' + val + ')';

    if (yuiCrop != null)
        SaveYuiCropValues();

    ReRenderImage();
}

// rotation
function rotate(p_deg) {

    ImageToEdit.rotate = p_deg;

    SaveYuiCropValues();

    var newCropTop;
    var newCropLeft;
    if (p_deg == -90) {
        newCropTop = ImageToEdit.Width - ImageToEdit.CropWidth - ImageToEdit.CropLeft;
        newCropLeft = ImageToEdit.CropTop;
    }
    else {
        newCropTop = ImageToEdit.CropLeft;
        newCropLeft = ImageToEdit.Height - ImageToEdit.CropHeight - ImageToEdit.CropTop;
    }

    ImageToEdit.CropTop = newCropTop;
    ImageToEdit.CropLeft = newCropLeft;

    // SWAP WIDTH AND HEIGHT
    var oldHeight = ImageToEdit.Height;
    ImageToEdit.Height = ImageToEdit.Width;
    ImageToEdit.Width = oldHeight;
    ImageToEdit.AspectRatio = ImageToEdit.Height / ImageToEdit.Width;

    // SWAP CROPWIDTH AND CROPHEIGHT
    var oldCropHeight = ImageToEdit.CropHeight;
    ImageToEdit.CropHeight = ImageToEdit.CropWidth;
    ImageToEdit.CropWidth = oldCropHeight;
    ImageToEdit.ProductAspectRatio = 1 / ImageToEdit.ProductAspectRatio;

    // SWAP MAX CROP HEIGHT AND WIDTH
    var oldCropHeight = ImageToEdit.MaxCropHeight;
    ImageToEdit.MaxCropHeight = ImageToEdit.MaxCropWidth;
    ImageToEdit.MaxCropWidth = oldCropHeight;
   

    ImageToEdit.rotation = ImageToEdit.rotation + p_deg;
    if (ImageToEdit.rotation >= 360)
        ImageToEdit.rotation = 0;
    else if (ImageToEdit.rotation <= -350)
        ImageToEdit.rotation = 0;

    switch (ImageToEdit.rotation) {
        case -90:
            ImageToEdit.rotation = 270;
            break;
        case -180:
            ImageToEdit.rotation = 180;
            break;
        case -270:
            ImageToEdit.rotation = 90;
            break;
    }
    ReRenderImage();
};

function SwapAspect() {

    SaveYuiCropValues();

    var operation=0;


    if (ImageToEdit.AspectRatio > 1 && ImageToEdit.CropHeight > ImageToEdit.CropWidth)
    { operation = 1; }
    else if (ImageToEdit.CropHeight < ImageToEdit.CropWidth && ImageToEdit.AspectRatio < 1)
    { operation = 4; }
    else if (ImageToEdit.ProductAspectRatio < ImageToEdit.AspectRatio)
    { operation = 3; }
    else { operation = 2; }

    switch(operation)
    {
        case 1:
            ImageToEdit.CropWidth = ImageToEdit.Width;
            ImageToEdit.CropLeft = 0;
            ImageToEdit.CropHeight = ImageToEdit.CropWidth / ImageToEdit.ProductAspectRatio;
            ImageToEdit.CropTop = (ImageToEdit.Height - ImageToEdit.CropHeight) / 2;
            break;
    case 2:
            ImageToEdit.CropHeight = ImageToEdit.Height;
            ImageToEdit.CropTop = 0;
            ImageToEdit.CropWidth = ImageToEdit.CropHeight / ImageToEdit.ProductAspectRatio;
            ImageToEdit.CropLeft = (ImageToEdit.Width - ImageToEdit.CropWidth) / 2;
    break;
    case 3:
            ImageToEdit.CropWidth = ImageToEdit.Width;
            ImageToEdit.CropLeft = 0;
            ImageToEdit.CropHeight = ImageToEdit.CropWidth * ImageToEdit.ProductAspectRatio;
            ImageToEdit.CropTop = (ImageToEdit.Height - ImageToEdit.CropHeight) / 2;
    break;
    case 4:
            ImageToEdit.CropHeight = ImageToEdit.Height;
            ImageToEdit.CropTop = 0;
            ImageToEdit.CropWidth = ImageToEdit.CropHeight * ImageToEdit.ProductAspectRatio;
            ImageToEdit.CropLeft = (ImageToEdit.Width - ImageToEdit.CropWidth) / 2;
    break;
    default:
    break;
}
ImageToEdit.CropLeft = Math.round(ImageToEdit.CropLeft);
ImageToEdit.CropTop = Math.round(ImageToEdit.CropTop);
ImageToEdit.CropHeight = Math.round(ImageToEdit.CropHeight);
ImageToEdit.CropWidth = Math.round(ImageToEdit.CropWidth);
    
    if (yuiCrop != null) yuiCrop.destroy();
    EditorInitCropper();
}


function SetImage(json) {
    ImageToEdit = Sys.Serialization.JavaScriptSerializer.deserialize(json);
    RenderImage();
}

function InitImage(imageID) {
    if (!fixCropperRatio) document.getElementById("SwapAspectLink").style.display = "none";
    showEditorLoading();
    PageMethods.getJsonImage(imageID, SetImage, wsErrorRedirect);
}

function ImageSaveNormal() {
    var json = Sys.Serialization.JavaScriptSerializer.serialize(ImageToEdit);
    PageMethods.saveJsonImage(json, afterSave, wsErrorRedirect, wsErrorRedirect, wsErrorRedirect, null);
}

function ImageSaveAsNew() {
    var json = Sys.Serialization.JavaScriptSerializer.serialize(ImageToEdit);
    PageMethods.saveAsJsonImage(json, albumID, afterSaveAsNew, wsErrorRedirect, wsErrorRedirect, wsErrorRedirect, null);
}

function ImageSaveAsNewNoAlbum() {
    var json = Sys.Serialization.JavaScriptSerializer.serialize(ImageToEdit);
    PageMethods.saveAsJsonImage(json, afterSaveAsNew, wsErrorRedirect, wsErrorRedirect, wsErrorRedirect, null);
}

function ImageRevert() {

    var json = Sys.Serialization.JavaScriptSerializer.serialize(ImageToEdit);
    DestroyEditor();

    PageMethods.Revert(json, SetImage, wsErrorRedirect);
}

function fail() {
    alert("A problem occured while saving your changes");
}
// called when the image inside the cropper is changed, i.e. after ANY operation
function RenderImage() {
    
    ImgPhoto = document.getElementById('imgPhoto');

    var photourl = ImageToEdit.ImageUrlRoot + '?productid=' + ImageToEdit.ProductID + '&version=EditingSize&rotation=' + ImageToEdit.rotation + '&id=' + ImageToEdit.imageID + '&effects=' + escape(ImageToEdit.effects) + '&vrs=' + ImageToEdit.ImageVersion + '&admin=' + ImageToEdit.Admin;
    var producturl = ImageToEdit.ProductImageUrlRoot + '?productid=' + ImageToEdit.ProductID + '&version=EditingSize&rotation=' + ImageToEdit.rotation + '&id=' + ImageToEdit.imageID + '&effects=' + escape(ImageToEdit.effects) + '&vrs=' + ImageToEdit.ImageVersion + '&admin=' + ImageToEdit.Admin;

    var url = photourl;
    
    ImgPhoto.src = "";

    document.getElementById("imageEditorTitle").innerHTML = ImageToEdit.Title;
       
    var marginLeft = 0;
    var marginTop = 0 ;

    if (isCropperEnabled) {
        marginTop = ((400 - ImageToEdit.Height) / 2);
        marginLeft = ((400 - ImageToEdit.Width) / 2);
    }

    var imgContainer = document.getElementById("imgContainer");
    imgContainer.style.top = marginTop + "px";
    imgContainer.style.left = marginLeft + "px";
    
    ImgPhoto.Width = ImageToEdit.Width + "px";
    ImgPhoto.Height = ImageToEdit.Height + "px";
    ImgPhoto.src = url;
    
}

function ReRenderImage() {
    showEditorLoading();

    if (yuiCrop != null)
        yuiCrop.destroy();

    RenderImage();
}

function SaveYuiCropValues() {
    var cropResults = yuiCrop.getCropCoords();
    ImageToEdit.CropLeft = cropResults.left;
    ImageToEdit.CropTop = cropResults.top;
    ImageToEdit.CropWidth = cropResults.width;
    ImageToEdit.CropHeight = cropResults.height;
    if (!fixCropperRatio) ImageToEdit.ProductAspectRatio = ImageToEdit.CropHeight / ImageToEdit.CropWidth;
}


var last = "";
function Debug(msg) {
    var elm = document.getElementById("dbg");
    if (msg == last && 1 == 0) msg = ". ";
    else {
        last = msg;
        msg += " ";
    }
    if (elm) elm.innerHTML += msg;
}


function EditorInitCropper(e) {

        ImgPhoto = document.getElementById('imgPhoto');

        if (isCropperEnabled) {

            yuiCrop = new YAHOO.widget.ImageCropper(ImgPhoto, {
                initialXY: [ImageToEdit.CropLeft, ImageToEdit.CropTop],
                initHeight: (ImageToEdit.CropHeight),
                initWidth: (ImageToEdit.CropWidth),
                maxHeight: (ImageToEdit.CropHeight * 4),
                maxWidth: (ImageToEdit.CropWidth * 4),
                minHeight: (ImageToEdit.CropHeight / 4),
                minWidth: (ImageToEdit.CropWidth / 4),
                keyTick: 5,
                ratio: fixCropperRatio,
                shiftKeyTick: 50,
                disableHandles: false
            });

            //   yuiCrop.subscribe("startResizeEvent", function() {
            //   SaveYuiCropValues();

            //Debug("<br/>PRE W: " + ImageToEdit.CropWidth + " H: " + ImageToEdit.CropHeight + " AR req: " + ImageToEdit.ProductAspectRatio + " AR ACT: " + ImageToEdit.CropHeight / ImageToEdit.CropWidth);
            //  });
            setCropLinesColour();
            yuiCrop.subscribe("moveEvent", function() {
                SaveYuiCropValues();
                //            var region = this.getCropCoords();

                //            var imagesToUpdate = document.getElementsByName("ImgDlgImgGroup");

                //            for (var i = 0; i < imagesToUpdate.length; i++) {
                //                var e = imagesToUpdate[i].parentNode;
                //                imagesToUpdate[i].style.top = "-" + region.top + "px";
                //                imagesToUpdate[i].style.left = "-" + region.left + "px";

                // intentionally commented out for now. LH 2009/01/27
                //e.style.height = region.height + "px";
                //e.style.width = region.width + "px";

                //  }
            }, yuiCrop, true);

        }
        else
            yuiCrop = null;
        
        hideEditorLoading();
}

function DestroyEditor() {
   
    showEditorLoading();

    if (yuiCrop != null)
        yuiCrop.destroy();
        
    //BrightnessSlider.resetSilent();
    //ContrastSlider.resetSilent();
    //SharpnessSlider.resetSilent();
    
    ResetRadios();
    ImgPhoto.src = "";

}

//YAHOO.util.Event.onDOMReady(initSliders);
YAHOO.util.Event.addListener('imgPhoto', 'load', EditorInitCropper);

function initSliders() {
    if (BrightnessSlider == null) {
        BrightnessSlider = initSlider("BrightnessSlider", -300, 300, 0);
        BrightnessSlider.subscribe("slideEnd", function() { Brightness(this.getRealValue()); })

        ContrastSlider = initSlider("ContrastSlider", -400, 400, 0);
        ContrastSlider.subscribe("slideEnd", function() { Contrast(this.getRealValue()); })

        SharpnessSlider = initSlider("SharpnessSlider", 0, 80, 0);
        SharpnessSlider.subscribe("slideEnd", function() { Sharpness(this.getRealValue()); })
    } else {
    BrightnessSlider.resetSilent();
    ContrastSlider.resetSilent();
    SharpnessSlider.resetSilent();
    }
    
}

function initSlider(sliderID, min, max, value) {
    var slider = YAHOO.widget.Slider.getHorizSlider(sliderID + "BG", sliderID + "THUMB", 0, 200, 20);
    slider.animate = true;
    slider.min = min;
    slider.scaleFactor = (max - min) / 200;
    slider.originalValue = value;

    slider.reset = function() { slider.setValue(Math.round((this.originalValue - this.min / this.scaleFactor)), true, true, false); }
    slider.resetSilent = function() { slider.setValue(Math.round((this.originalValue - this.min / this.scaleFactor)), true, true, true); }
    slider.getRealValue = function() { return Math.round(this.getValue() * this.scaleFactor) + this.min; }

    slider.resetSilent();
    return slider;
}

function ResetRadios() {
    document.getElementById('radioOrig').checked = true;
    document.getElementById('radioBW').checked = false;
    document.getElementById('radioSepia').checked = false;
}

// SetEffect wrapper methods

function Saturation(val) {
    SetEffect('Saturation', val * 5);
}

function Brightness(val) {
    SetEffect('Brightness', val);
}

function Fit(val) {
    SetEffect('Fit', val);
}

function Fill(val) {
    SetEffect('Fill', val);
}

function Sepia(val) {
    SetEffect('Sepia', val);
}

function Sharpness(val) {
    SetEffect('Sharpness', val);
}

function Contrast(val) {
    SetEffect('Contrast', val);
}

function showEditorLoading() {
    document.getElementById("divEditorLoading").style.display = "";
    document.getElementById("imgContainer").style.display = "none";

    //BrightnessSlider.lock();
    //ContrastSlider.lock();
    //SharpnessSlider.lock();
    document.getElementById('radioOrig').disabled = true;
    document.getElementById('radioBW').disabled = true;
    document.getElementById('radioSepia').disabled = true;

}

function hideEditorLoading() {
    document.getElementById("divEditorLoading").style.display = "none";
    document.getElementById("imgContainer").style.display = "";

    //BrightnessSlider.unlock();
    //ContrastSlider.unlock();
    //SharpnessSlider.unlock();
    document.getElementById('radioOrig').disabled = false;
    document.getElementById('radioBW').disabled = false;
    document.getElementById('radioSepia').disabled = false;
}

function changeCropLinesColour(hex) {
    cropLinesColour = hex;
    setCropLinesColour();
}
function setCropLinesColour() {
    yuiCrop.getResizeEl().style.borderColor = cropLinesColour;
}

function editorBlackCropLines() {
    changeCropLinesColour("#000000");
        document.getElementById("BlackCL").style.display="none";
    document.getElementById("WhiteCL").style.display="";
}

function editorWhiteCropLines() {
    changeCropLinesColour("#FFFFFF");
    document.getElementById("BlackCL").style.display="";
    document.getElementById("WhiteCL").style.display="none";
}