//Constructor
function CropOrderItem(cropCartOrderItemPanel, subOrderItem, orderItemCropWrapper, arrayPosition){
    this.orderItem = subOrderItem;
    this.aspectRatio = orderItemCropWrapper.aspectRatio;
    this.originalLandscapeCrop = orderItemCropWrapper.cropDataLandscape;
    this.originalPortraitCrop = orderItemCropWrapper.cropDataPortrait;    
    this.startCrop = {left: orderItemCropWrapper.cropDataToSave.left, right: orderItemCropWrapper.cropDataToSave.right, top: orderItemCropWrapper.cropDataToSave.top, bottom: orderItemCropWrapper.cropDataToSave.bottom};
    this.newCrop = orderItemCropWrapper.cropDataToSave;
    this.thumbnailImageUrl = orderItemCropWrapper.smallImageUrl;
    this.largeImageUrl = orderItemCropWrapper.largeImageUrl;
    this.cropCartOrderItemPanel = cropCartOrderItemPanel;
    this.cropCartOrderItemPanel_ArrayPosition = arrayPosition;
    this.retailerProductName = orderItemCropWrapper.retailerProductName;
    this.isLandscape = orderItemCropWrapper.isLandscape;
    this.imageDivId = "img" + this.cropCartOrderItemPanel_ArrayPosition;  
    this.isLowRes = subOrderItem.WarnRes;
    this.lowResImageID = "lowResImg" + this.cropCartOrderItemPanel_ArrayPosition;  
    this.eOrderItemMediaId = orderItemCropWrapper.eOrderItemMediaId;
    this.cropIsLandscape = orderItemCropWrapper.cropIsLandscape;
    this.borderID = orderItemCropWrapper.borderID;
    this.minLengthOfWidth = orderItemCropWrapper.minLengthOfWidth;
    this.minLengthOfHeight= orderItemCropWrapper.minLengthOfHeight;    
}

CropOrderItem.prototype = {

//Class attributes
    wrapperDiv: null,
    orderItem: null,
    //orderItems: [], //to support group product by aspect ratio 
    aspectRatio: 0,
    originalLandscapeCrop: null, //default: center crop.
    originalPortraitCrop: null,
    newCrop: null,
    startCrop: null,
    thumbnailImageUrl: null,
    largeImageUrl: null,
    cropCartOrderItemPanel: null,
    cropCartOrderItemPanel_ArrayPosition: null,
    retailerProductName: "",
    isLandscape: true,
    cropArea: null,
    imageDivId: null,
    isLowRes: false,
    lowResImageID: null,
    eOrderItemMediaId: null,
    cropIsLandscape: true,
    borderID: -1,
    minLengthOfWidth: 0,
    minLengthOfHeight: 0,
    

//Class functions
//    addOrderItem: function(orderItem){
//        Array.add(this.orderItems, orderItem);
//    },

    setIsLowRes: function (isLowRes)
    {
        this.isLowRes = isLowRes;
        var lowResImage = $get(this.lowResImageID);
        if (isLowRes)
            lowResImage.style.visibility = "visible";
        else
            lowResImage.style.visibility = "hidden";
    },
    
    getRPId: function()
    {
        return this.orderItem.rpID;
    },
    
    selected: function()
    {        
        this.cropCartOrderItemPanel.itemSelected(this.cropCartOrderItemPanel_ArrayPosition);
    },
    
    setToSelected: function()
    {
        this.wrapperDiv.className = "crop_thumb_on";
    },
    
    setToUnSelected: function()
    {
        this.wrapperDiv.className = "crop_thumb";
    },  
    
    getImageURL: function() {
        return "";
    },
    
    getOrderItemCropWrapper: function() {
        var wrapper = new Object();
        wrapper.cropDataToSave = this.newCrop;
        wrapper.borderID = this.borderID;
        wrapper.eOrderItemId = this.orderItem.EncID;
        return wrapper;
    },
    
    ImagesRenderCompleted: function() {
         var img = $get(this.imageDivId);
         if (img != null)
         {
            var width = img.width;
            if ((width > 0) && (img.complete)) 
            {
                return true;
            }
         }
         return false;
    },
    
    //OrderItem structure
    //wrapperDiv
    //  innerWrapperDiv
    //     table
    //       tbody
    //          tr
    //            td
    //              img
    //     titleDiv
    //       img
    render: function() {
        //Output HTML with the crop overlay.
        this.wrapperDiv = document.createElement("div");       
        this.wrapperDiv.className = "crop_thumb";
        
        var innerWrapperDiv = document.createElement("div");
        innerWrapperDiv.style.width  = "100%";
        innerWrapperDiv.style.height = "100%";
        innerWrapperDiv.cropOrderItem = this;
        innerWrapperDiv.onclick = function () { this.cropOrderItem.selected();};
        innerWrapperDiv.style.cursor = "pointer";
        
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        var td = document.createElement('td');
        tr.appendChild(td);        
        
        
        var img = document.createElement("img");
        img.setAttribute("border","0");
        img.setAttribute("align","middle");
        img.setAttribute("src", this.thumbnailImageUrl);
        img.setAttribute("id", this.imageDivId);
        
        td.appendChild(img);        
        
        innerWrapperDiv.appendChild(table);
        
        var lowResImg = document.createElement("img");
        lowResImg.setAttribute("src", "../images/icon_warning.gif");
        lowResImg.setAttribute("border", "0px");
        lowResImg.style.border = "0px";
        lowResImg.setAttribute("id", this.lowResImageID);
        if (!this.isLowRes)
        {
            lowResImg.style.visibility = 'hidden';
        }
        
        var titleDiv = document.createElement("div");
        titleDiv.className = ""; //cart_crop_order_item_title
        titleDiv.innerHTML = this.retailerProductName;      
        
        titleDiv.appendChild(lowResImg);
        
        innerWrapperDiv.appendChild(titleDiv);                
        this.wrapperDiv.appendChild(innerWrapperDiv);
        
        return this.wrapperDiv;
        
    },  
    
    renderCropOverlay: function() {
        if (typeof(this.cropArea) == 'undefined' || this.cropArea == null)
        {
            this.cropArea = new CropArea();
        }        
        var imgdiv = $get(this.imageDivId);   
        this.cropArea.show(this.imageDivId, this.newCrop.left * imgdiv.width, this.newCrop.top * imgdiv.height, this.newCrop.right * imgdiv.width, this.newCrop.bottom * imgdiv.height);
    }
};