﻿function ImageManagerCore()
{
    this.images = new Array();
    this.currentImage = null;
    this.base = '';
    this.emptySrc = '';
    this.imagesExtensions = new Array('png', 'jpg', 'jpeg', 'gif'); // '*.png,*.jpg,*.jpeg,*.gif';

    this.suspendSliderChangedEvent = true;
    
    this.manager = null;
   
    this.isInitializedEx = false;
    
    this.ObtainManagedImage = function()
    {
        FileManager.ObtainFile(this.imagesExtensions, function(params){ImageManager.ObtainFileCallBack(params);}, true);
    };
    
    this.ClearManagedImageEx = function(e)
    {
        this.currentImage = this.GetCurrentImageItem(e);
        this.ClearManagedImage(true);
        
        return false;
    }

    this.ClearManagedImage = function (bFromClearButton)
    {
        if (this.currentImage.allowResizing)
        {
            this.manager.image.style.left = '0px';
            this.manager.image.style.top = '0px';
            this.manager.image.style.width = this.currentImage.width + 'px';
            this.manager.image.style.height = this.currentImage.height + 'px';
            this.manager.image.src = this.emptySrc; //&rnd=' + Math.random();

            this.manager.tmpsrc = '-1';

            if (!this.manager.slider)
                this.manager.slider = $find(this.manager.sliderClientID);

            this.manager.slider.set_enabled(false);
            this.manager.slider.set_minimumValue(0);
            this.manager.slider.set_maximumValue(100);
            this.manager.slider.set_value(0);
            this.manager.slider.redraw();

            if (bFromClearButton)
            {
                if (this.currentImage.imageContainer)
                    this.currentImage.imageContainer.src = this.emptySrc;

                this.currentImage.uidContainer.value = '-1';

                if (this.currentImage.onChanged)
                    this.currentImage.onChanged(this.currentImage, null);

                this.currentImage = null;
                return;
            }
        }
        else
        {
            if (this.currentImage.imageContainer)
                this.currentImage.imageContainer.src = this.emptySrc;

            this.currentImage.uidContainer.value = '-1';
            this.currentImage = null;
        }

        if (this.currentImage.onChanged)
            this.currentImage.onChanged(this.currentImage, null);
    };

    this.ApplyChanges = function () {
        this.manager.container.hide();
        this.manager.frameContainer.innerHTML = '';

        if (!this.manager.tmpsrc)
            return;

        if (this.currentImage.isTemplate) {
            var onCreated = this.currentImage.templateParams.onCreation;

            this.currentImage = this.CreateImageControl(this.currentImage.templateParams.parentNode, null, true, this.currentImage.onImageClick,
                this.currentImage.onChanged, '', this.currentImage.width, this.currentImage.height, this.currentImage.templateParams.basicWidth, this.currentImage.templateParams.basicHeight, this.currentImage.id);

            if (onCreated) {
                onCreated(this.currentImage);
            }
        }

        this.currentImage.uidContainer.value = this.manager.tmpsrc;

        var prm = '';
        if (this.manager.tmpsrc != '-1') {
            var p = this.CorrectManagedImagePosition(null, null, null, null);
            prm = this.manager.image.originalwidth + '|'
                                                    + this.manager.image.originalheight + '|'
                                                    + p.x + '|' + p.y + '|'
                                                    + ((Math.round(this.manager.scale * 1000) / 1000) * 1000) + '|'
                                                    + this.currentImage.width + '|'
                                                    + this.currentImage.height;

        }
        if(this.currentImage.paramsContainer)
            this.currentImage.paramsContainer.value = ''; //prm;

        if (this.currentImage.immediateStoringType) {
            if (!PageMethods.StoreImageImmediately) {
                alert('StoreImageImmediately is not implemented on this page.');
            }
            else {
                PageMethods.StoreImageImmediately(this.manager.tmpsrc, prm, this.currentImage.immediateStoringType, this.currentImage.immediateStoringParams,
                     function (res, context) { ImageManager.StoreImageImmediatelyOk(res, context); }, function () { }, this.currentImage);
            }
        }
        else {
            if (this.currentImage.uidContainer.value == '-1') {
                if (this.currentImage.imageContainer) {
                    this.currentImage.imageContainer.src = this.emptySrc;
                }
                if (this.currentImage.onChanged)
                    this.currentImage.onChanged(this.currentImage, null);
            }
            else {
                PageMethods.ApplyTmpImageTransformation(this.manager.tmpsrc, prm, function (res, context) { ImageManager.ApplyTmpImageTransformationOk(res, context); }, function () { }, this.currentImage);
            }
        }

        this.currentImage = null;
    };
    
    this.ApplyTmpImageTransformationOk = function(res, context)
    {
        if(res.Result)
        {
            if(context.imageContainer)
            {
                if(context.imageContainer.src != res.Result[0])
                {
                    context.imageContainer.src = '';
                    if(!context.imageContainer.onload)
                        context.imageContainer.onload = function(e){};
                       
                    context.src = 'getimage.ashx?type=tmp&size=original&id=' + res.Result[0] + '&refresh=' + GGenerateGuid();
                    context.imageContainer.src = this.base + context.src;
                }
                if(context.paramsContainer)
                    context.paramsContainer.value = '';
            }
            
            if(context.onChanged)
                context.onChanged(context, null);

        }
    }
    
    this.StoreImageImmediatelyOk = function(res, context)
    {
        if(res.Result)
        {
            if(context.imageContainer)
            {
                if(context.imageContainer.src != res.Result[0])
                {
                    context.imageContainer.src = '';
                    if(!context.imageContainer.onload)
                        context.imageContainer.onload = function(e){};
                    
                    context.src = res.Result[0];
                    context.imageContainer.src = res.Result[0];
                }
            }
            if(context.onChanged)
                context.onChanged(uploadParams);
        }
    }
    
    this.InitializeManager = function(dlgImageManagerClientID, imgChangePhotoClientID, imgContainerClientID, sldSizeClientID, sBase)
    {
        this.manager = new Object();
        this.manager.container = $get(dlgImageManagerClientID);
        this.manager.image = $get(imgChangePhotoClientID);
        this.manager.imageFrame = $get(imgContainerClientID);
        this.manager.slider = $find(sldSizeClientID);
        this.manager.sliderClientID = sldSizeClientID;
        this.base = sBase;
        this.emptySrc = sBase + "GetImage.ashx?id=0";
    };
    
    this.RemoveImageControl = function(sID)
    {
        var img = this.GetCurrentImageItemById(sID);
        if(img)
        {
            if(img.imageContainer)
                RemoveNodeEx(img.imageContainer);
                
            RemoveNodeEx(img.urlContainer);
            RemoveNodeEx(img.paramsContainer);
            
            for (var i = 0; i < this.images.length; i++)
            {
                var it = this.images[i];
                if(it.id == img.id)
                {
                    this.images.splice(i, 1);
                    break;
                }
            }
        }
    };
    
    this.InitiateImageControlCreation = function(parentNode, bShowImage, OnImageClick,
        OnImageChanged, sImageQueryString, iWidth, iHeight, iBasicWidth, iBasicHeight, onCreation)
    {
        var obj = new Object();
        obj.parentNode = parentNode;
        obj.onCreation = onCreation;
        obj.basicWidth = iBasicWidth;
        obj.basicHeight = iBasicHeight;
        
        return this.InitializeImageControl(GGenerateGuid(), null, null, null, null, 
            null, null, OnImageChanged, null, iWidth, iHeight, null, null, OnImageClick, obj);
    }
    
    this.CreateImageControl = function(parentNode, sImgUrl, bShowImage, OnImageClick,
        OnImageChanged, sImageQueryString, iWidth, iHeight, iBasicWidth, iBasicHeight, sID, oTag)
    {
        var el;
        var id = sID || GGenerateGuid();
        var sImgClientID = '';
        var sUidClientID = '';
        var sParamsClientID = '';
        if(bShowImage)
        {
            el = document.createElement('img');
            sImgClientID = el.id = id + '_img';
            el.src = sImgUrl || this.emptySrc;
            if(iBasicWidth)
                el.width = iBasicWidth;
            if(iBasicHeight)
                el.height = iBasicHeight;
            
            parentNode.appendChild(el);
        }
        
        el = document.createElement('input');
        el.type = 'hidden';
        el.id = sUidClientID = id + '_uid';
        parentNode.appendChild(el);
                
        el = document.createElement('input');
        el.type = 'hidden';
        el.id = sParamsClientID = id + '_params';
        parentNode.appendChild(el);
                
        this.InitializeImageControl(id, sImgUrl, sImgClientID, sParamsClientID, sUidClientID, 
            null, null, OnImageChanged, sImageQueryString, iWidth, iHeight, null, null, OnImageClick, null, oTag);
            
        return this.GetCurrentImageItemById(id);
    
    };

    this.InitializeImageControl = function (sControlClientID, sImgUrl, imageClientID, paramsClientID, uidClientID,
        btnChangeClientID, btnRemoveClientID, sOnClientImageChanged, sImageQueryString, iWidth, iHeight,
        iImmediateSavingType, sImmediateSavingParams, OnImageClick, templateObjParams, oTag)
    {
        for (var i = 0; i < this.images.length; i++)
        {
            var it = this.images[i];
            if (it.id == sControlClientID)
            {
                this.images.splice(i, 1);
                break;
            }
        }

        var obj = new Object();

        obj.isTemplate = templateObjParams != null;
        obj.templateParams = templateObjParams;
        if (obj.templateParams)
        {
            //obj.templateParams.OnImageClick = OnImageClick;
        }

        obj.id = sControlClientID;
        obj.src = sImgUrl;
        obj.allowResizing = !!paramsClientID || obj.isTemplate;
        obj.imageContainer = imageClientID ? $get(imageClientID) : null;
        if (obj.isTemplate)
        {
            obj.uidContainer = new Object();
            obj.uidContainer.value = '';
            obj.paramsContainer = new Object();
            obj.paramsContainer.value = '';
        }
        else
        {
            obj.uidContainer = $get(uidClientID);
            obj.paramsContainer = paramsClientID ? $get(paramsClientID) : null;
        }
        obj.changeButton = btnChangeClientID ? $get(btnChangeClientID) : null;
        obj.removeButton = btnRemoveClientID ? $get(btnRemoveClientID) : null;
        obj.onChanged = sOnClientImageChanged;
        obj.onImageClick = OnImageClick;
        obj.query = sImageQueryString;
        obj.width = iWidth || 150;
        obj.height = iHeight || 150;
        obj.immediateSavingType = iImmediateSavingType || 0;
        obj.immediateSavingParams = sImmediateSavingParams || '';

        obj.tag = oTag;

        if (obj.imageContainer)
        {
            var fnc = OnImageClick ? function (e) { var _img = ImageManager.GetCurrentImageItem(e); OnImageClick(_img, e); } : function (e) { ImageManager.ImageManagerActivate(e); return false; };
            obj.imageContainer.setAttribute('imagecontrol', sControlClientID);
            obj.imageContainer.onclick = fnc;
        }
        if (obj.changeButton)
        {
            var fnc = function (e) { ImageManager.ImageManagerActivate(e); return false; };
            obj.changeButton.setAttribute('imagecontrol', sControlClientID);
            obj.changeButton.onclick = fnc;
        }
        if (obj.removeButton)
        {
            var fnc = function (e) { ImageManager.ClearManagedImageEx(e); return false; };
            obj.removeButton.setAttribute('imagecontrol', sControlClientID);
            obj.removeButton.onclick = fnc;
        }

        if (obj.isTemplate)
        {
            this.currentImage = obj;
            this.ImageManagerActivateInt(obj);
            return obj;
        }
        else this.images.push(obj);
    };
    
    this.GetCurrentImageItem = function(e)
    {
        var p = (e && e.target ? e.target : event.srcElement);
        while(p)
        {
            if(p.getAttribute && p.getAttribute('imagecontrol'))
            {
                var img = this.GetCurrentImageItemById(p.getAttribute('imagecontrol'));
                if(img)
                    return img;
            }
        }
        
        return null;
    }
    this.GetCurrentImageItemById = function(imgID)
    {
        for (var i = 0; i < this.images.length; i++)
        {
            var it = this.images[i];
            if(it.id == imgID)
            {
                return it;
            }
        }
        return null;
    }
    
    this.ImageManagerActivate = function(e)
    {
        var img = this.GetCurrentImageItem(e);
        this.currentImage = img;
        this.ImageManagerActivateInt(img);
        
        return false;
    }
    
    this.ImageManagerActivateEx = function(imgID)
    {
        var img = this.GetCurrentImageItemById(imgID);
        
        if(!img)
            alert('Error: The image can not be found.');
        else
        {
            this.currentImage = img;
            this.ImageManagerActivateInt(img);
        }
    }
    
    this.ImageManagerActivateInt = function(img)
    {
        if(img)
        {
            if(img.allowResizing)
            {
                if(!this.isInitializedEx)
                {
                    var items = this.manager.container.getElementsByTagName('div');
                    for(var i = 0; i < items.length; i++)
                    {
                        var it = items[i];
                        if(it.getAttribute('imgmanager') == 'info')
                            this.manager.infoContainer = it;
                        else if(it.getAttribute('imgmanager') == 'frm')
                            this.manager.frameContainer = it;
                        else if(it.getAttribute('imgmanager') == 'controls')
                            this.manager.controlsContainer = it;
                    }
        
                    items = this.manager.container.getElementsByTagName('input');
                    for(var i = 0; i < items.length; i++)
                    {
                        var it = items[i];
                        if(it.getAttribute('imgmanager') == 'urlbox')
                            this.manager.urlContainer = it;
                    }
                    items = this.manager.container.getElementsByTagName('a');
                    for(var i = 0; i < items.length; i++)
                    {
                        var it = items[i];
                        if(it.getAttribute('imgmanager') == 'cancel')
                        {
                            this.manager.cancelButton = it;
                            it.onclick = function(e){ImageManager.CancelImageRetrieving(e);return false;}
                        }
                    }
                    this.isInitializedEx = true;
                }
                if(!this.imageContainer)
                {
                    // if there is no imageContainer - we can not show currently shown image in the popup
                }
                
                //this.manager.container.style.width = (img.width < 250 ? 400 : img.width + 150) + 'px';
                //this.manager.container.style.height = (img.height + 300) + 'px';
    
                this.manager.infoContainer.innerHTML = 'Loading...';
                this.manager.controlsContainer.style.display = 'none';
                
                this.manager.frameContainer.innerHTML = "<iframe id='pnlUniversalUpload' name='pnlUniversalUpload' style='width: 300px; height: 30px; border: 0 white;' scrolling='no' " +
                    "src='" + this.base + "upload.aspx?auto=ImageManager.ObtainFileCallBack&progressCallback=ImageManager.UploadingProgressChanged&OnInitialized=ImageManager.OnUploadInitialized&senderID=&ext=" + this.imagesExtensions.join('|') + "&progressid=&param1=&param2=&param3=&param4=" + '&isimage=1' + "' frameborder='0'></iframe>"
    
                this.manager.container.show();
                this.manager.imageFrame.style.width = img.width + 'px';
                this.manager.imageFrame.style.height = img.height + 'px';
                this.SetupManagedImage(img.uidContainer.value, img.uidContainer.value ? null : (img.imageContainer ? img.imageContainer.src : ''), img.paramsContainer ? img.paramsContainer.value : '');
            }
            else
            {
                FileManager.ObtainFile(this.imagesExtensions, function(params){ImageManager.ObtainFileCallBack(params);}, true);
            }
        }
    }
    
    this.OnUploadInitialized = function()
    {
        this.manager.infoContainer.innerHTML = '';
        this.manager.controlsContainer.style.display = '';
    }
    
    this.UploadingProgressChanged = function(params)
    {
        this.manager.cancelButton.style.display = '';
        this.manager.image.style.visibility = 'hidden';
    };
    
    this.CancelImageRetrieving = function(e)
    {
       this.manager.cancelButton.style.display = 'none';
       if(this.manager.retrievingId == null)
        {
            this.manager.frameContainer.innerHTML = "<iframe id='pnlUniversalUpload' name='pnlUniversalUpload' style='width: 300px; height: 30px; border: 0 white;' scrolling='no' " +
                "src='" + this.base + "upload.aspx?auto=ImageManager.ObtainFileCallBack&progressCallback=ImageManager.UploadingProgressChanged&OnInitialized=ImageManager.OnUploadInitialized&senderID=&ext=" + this.imagesExtensions.join('|') + "&progressid=&param1=&param2=&param3=&param4=" + '&isimage=1' + '&session=' + GGenerateGuid() + "' frameborder='0'></iframe>"
        }
        else this.manager.retrievingId = null;
    }
    
    this.RetrieveImageFromURL = function()
    {
        if(this.manager.urlContainer.value == '')
        {
            alert('Please enter the image url first.');
            return;
        }
        
        if(!PageMethods.UploadRemoteImage)
            alert('UploadRemoteImage method is not initialized on this page.');
        else
        {
            this.manager.retrievingRequestId = GGenerateGuid();
            this.manager.cancelButton.style.display = '';
            var context = new Object();
            context.requestId = this.manager.retrievingRequestId;
            this.manager.image.style.visibility = 'hidden';
            PageMethods.UploadRemoteImage(this.manager.urlContainer.value, true, function(sender, eventArs) { ImageManager.UploadRemoteImageOk(sender, eventArs);}, function(){}, context);
        }
    }
    
    this.UploadRemoteImageOk = function(pmInfo, context)
    {
        if(context && context.requestId != this.manager.retrievingRequestId)
        {
            return;
        }
        
        this.manager.retrievingId = null;
        
        var res = pmInfo.Result;
        if(res[1])
        {
            alert(res[1]);
	    return;
        }

            var obj = new Object();
            obj.fileNewName = res[0];
            obj.fileOldName = '';
            obj.SongTitle = '';
            obj.param1 = null;
            obj.param2 = null;
            obj.param3 = null;
            obj.param4 = null;

            obj.imageInfo = res[2];

        if(this.callBack)
        {
            
            //obj.senderID
            
        }
        this.ObtainFileCallBack(obj);
    }

    this.OnImageSizeChanged = function (sender, eventArs)
    {
        if(!sender.get_enabled() || this.suspendSliderChangedEvent)
            return;
            
        var scale = sender.get_value() / sender.get_maximumValue();
        
        var x = parseInt(this.manager.image.style.left) || 0;
        var y = parseInt(this.manager.image.style.top) || 0;
        var w = parseInt(this.manager.image.style.width) || 0;
        var h = parseInt(this.manager.image.style.height) || 0;

        var _w = Math.round(this.manager.image.originalwidth * scale);
        var _h = Math.round(this.manager.image.originalheight * scale);
        
        var dx = (w - _w) / 2 + x - this.manager.dx;
        var dy = (h - _h) / 2 + y - this.manager.dy;
        x = Math.round(dx);
        y = Math.round(dy);
        
        this.manager.dx = x - dx;
        this.manager.dy = y - dy;
        
        this.manager.scale = scale;
        this.manager.image.style.width = _w + 'px';
        this.manager.image.style.height = _h + 'px';
        
        this.manager.image.style.left = x + 'px';
        this.manager.image.style.top = y + 'px';
        
        this.CorrectManagedImagePosition(x, y, _w, _h);
    };
    
    this.SetupManagedImage = function(sImageFileNewUID, sImageFilePath, sParams)
    {
        var imgparams = sParams ? sParams.split('|') : new Array();

        var w = (imgparams.length > 0 ? imgparams[0] : 0) || this.currentImage.width;
        var h = (imgparams.length > 1 ? imgparams[1] : '') || this.currentImage.height;
        var worig = w;
        var horig = h;
        
        var s = imgparams.length > 6 ? imgparams[4] : (sImageFilePath ? 1 : 0.5);
        
        // either first or second parameter
        var src = sImageFileNewUID || sImageFileNewUID ? (this.base + 'getimage.ashx?type=tmp&size=original&id=' + sImageFileNewUID + '&refresh' + GGenerateGuid()) : sImageFilePath;
        if(src != this.manager.image.src)
        {
            this.manager.image.src = '';
            this.manager.image.style.visibility = 'hidden';
            if(!this.manager.image.onload)
                this.manager.image.onload = function(e){ImageManager.manager.image.style.visibility = 'visible';};
        }
        this.manager.tmpsrc = sImageFileNewUID;
        
        var _w = Math.round(w * s);
        var _h = Math.round(h * s);
       
        if(_w < this.currentImage.width || _h < this.currentImage.height)
        {
            var _s;
            if(this.currentImage.width - _w > this.currentImage.height - _h)
            {
                _s = this.currentImage.width / _w;
                _w = this.currentImage.width;
                _h = Math.round(_h * _s);
            }
            else
            {
                _s = this.currentImage.height / _h;
                _h = this.currentImage.height;
                _w = Math.round(_w * _s);
            }
            s = s * _s;
            w = _w;
            h = _h;
        }
        
        this.manager.dx = 0;
        this.manager.dy = 0;
        this.manager.image.style.left = (imgparams.length > 6 ? imgparams[2] : (this.currentImage.width >= _w ? 0 : ((this.currentImage.width - _w) / 2))) + 'px';
        this.manager.image.style.top = (imgparams.length > 6 ? imgparams[3] : (this.currentImage.height >= _h ? 0 : ((this.currentImage.height - _h) / 2))) + 'px';

        this.manager.image.style.width = _w + 'px';
        this.manager.image.style.height = _h + 'px';
        
        this.manager.image.originalwidth = worig;
        this.manager.image.originalheight = horig;
        
        this.manager.image.wdifference = worig - this.currentImage.width;
        this.manager.image.hdifference = horig - this.currentImage.height;
        
        this.manager.image.isWdifference = this.manager.image.wdifference / worig < this.manager.image.hdifference / horig;
        this.manager.image.difference = this.manager.image.isWdifference ? this.manager.image.wdifference : this.manager.image.hdifference;
        
        this.manager.scale = s;
        
        if(!this.manager.slider)
            this.manager.slider = $find(this.manager.sliderClientID);

        this.suspendSliderChangedEvent = true;

        var enabled = (sImageFileNewUID || '') != '' && s <= 1;
        this.manager.image.style.cursor = enabled || s > 1 ? 'move' : 'default';
        this.manager.enabled = enabled || s > 1;
        this.manager.slider.set_enabled(enabled); 
        var min = this.manager.image.isWdifference ? this.currentImage.width : this.currentImage.height;
        this.manager.slider.set_minimumValue(min);
        
        this.manager.slider.set_maximumValue(min + this.manager.image.difference);
        this.manager.slider.set_value(Math.round((min + this.manager.image.difference) * (s > 1 ? 1 : s)));
        this.manager.slider.redraw(); 
        
        this.manager.image.src = src;

        this.suspendSliderChangedEvent = false;
    };
    
    this.CorrectManagedImagePosition = function(x, y, w, h)
    {
        x = (x == null ? parseInt(this.manager.image.style.left) : x) || 0;
        y = (y == null ? parseInt(this.manager.image.style.top) : y) || 0;
        w = (w == null ? parseInt(this.manager.image.style.width) : w) || 0;
        h = (h == null ? parseInt(this.manager.image.style.height) : h) || 0;
        
        if(x > 0)
        {
            x = 0;
            this.manager.image.style.left = x + 'px';
        }
        if(x + w < this.currentImage.width)
        {
            x = this.currentImage.width - w;
            this.manager.image.style.left = x + 'px';
        }
        if(y > 0)
        {
            y = 0;
            this.manager.image.style.top = y + 'px';
        }
        if(y + h < this.currentImage.height)
        {
            y = this.currentImage.height - h;
            this.manager.image.style.top = y + 'px';
        }
        var obj = new Object();
        obj.x = x;
        obj.y = y;
        obj.w = w;
        obj.h = h;
        return obj;
    };
    
    this.ObtainFileCallBack = function(uploadParams)
    {
        if(this.currentImage.allowResizing)
        {
            this.manager.cancelButton.style.display = 'none';
            this.SetupManagedImage(uploadParams.fileNewName, null, uploadParams.imageInfo);
        }
        else
        {
            this.currentImage.uidContainer = uploadParams.fileNewName;
            if(this.currentImage.imageContainer)
            {
                this.currentImage.imageContainer.src = '';
                this.currentImage.imageContainer.src = this.base + 'getimage.ashx?type=tmp&size=original&id=' + uploadParams.fileNewName;
            }
            
            if(this.currentImage.paramsContainer)
                this.currentImage.paramsContainer.value = uploadParams.imageInfo;
                
            if(this.currentImage.onChanged)
                this.currentImage.onChanged(this.currentImage, uploadParams);
        }
    };
    
    this.CancelChanges = function()
    {
        this.currentImage = null;
        this.manager.container.hide();
        this.manager.frameContainer.innerHTML = '';
    };
}

var ImageManager = new ImageManagerCore();
function ImageManager_OnImageSizeChanged(sender, eventArs) { ImageManager.OnImageSizeChanged(sender, eventArs);}

