function SelectPhotoPanel()
{
    this.mediaList = new Array();
    this.lastTwoSelAlbums = new Array();
    this.mediaCache = new Object();
}

SelectPhotoPanel.prototype = {

    manager: null,
    service: null,
    mediaCache: null,
    chooseDefaultMedia: true,
    chkImageSrc:  '/images/tools/icon_checkbox.gif',
    mediaOnNavigationCallback: null,
    lastTwoSelAlbums: new Array(),
    isCurrentAlbumNavigationOn: true,

    setManager: function(manager) {
        this.manager = manager;
    },

    getManager: function() {
        return this.manager;
    },

    setChooseDefaultMedia: function(value) {
        this.chooseDefaultMedia = value;
    },

    // Public methods
    SetContainer: function(id) {
        this.panelContainerID = id;
    },

    SetChkImageSrc: function(src) {
        this.chkImageSrc = src;
    },

    SetAlbumID: function(encAlbumID) {
        var container = document.getElementById(this.panelContainerID);

        var child = container.childNodes[0];

        while (child) {
            container.removeChild(container.childNodes[0]);
            child = container.childNodes[0];
        }

        this.isCurrentAlbumNavigationOn = false; // this.selAlbumId != encAlbumID;

        if (this.lastTwoSelAlbums.length < 2) {
            this.lastTwoSelAlbums.push(encAlbumID);
        }
        else {
            this.lastTwoSelAlbums.splice(0, 1);
            this.lastTwoSelAlbums.push(encAlbumID);
        }


        this.mediaList = new Array;
        this.mediaTable = new Object;

        if (this.service == null) {
            this.service = new IAlbumService();
        }

        if (this.mediaCache[encAlbumID]) {
            this.OnGotAlbumMedia(this.mediaCache[encAlbumID], { AlbumID: encAlbumID, Parent: this });
        }
        else {
            this.service.GetAlbumSelectPhotos(encAlbumID, this.OnGotAlbumMediaFromService, gotError, { AlbumID: encAlbumID, Parent: this });
        }
    },

    OnGotAlbumMediaFromService: function(result, obj) {
        var json = eval(result);
        obj.Parent.mediaCache[obj.AlbumID] = json;
        obj.Parent.OnGotAlbumMedia(json, obj);
    },

    OnGotAlbumMedia: function(json, obj) {
        if (json.length == 0) {
            var container = document.getElementById(obj.Parent.panelContainerID);
            container.innerHTML = document.getElementById('emptyAlbumMessage').innerHTML;
        }
        else {
            for (var i = 0; i < json.length; i++) {
                obj.Parent.AddMedia(json[i]);
            }
        }
        this.checkSelectedMedia();
        this.setScrollPhotoWidth();
    },

    checkSelectedMedia: function() {

        var media = this.mediaList[this.selectedMedia];

        if (media != null && typeof media != 'undefined') {
            if (media._mediaImg._media.EncAlbumID == this.selAlbumId) {
                if (this.selectedMedia > -1) {
                    this.SelectMediaByIndex(this.selectedMedia);
                }
            }
        }
    },

    setScrollPhotoWidth: function() {

        var scrollThumbs = this.mediaList;
        var width = 0;
        for (var i = 0; i < scrollThumbs.length; i++) {
            width += 110;
        }

        width += 60; //padding

        var selectPhotolist = $get("selectPhotos_photo_lib_list")

        if (scrollThumbs.length > 0)
            selectPhotolist.style.width = width + 'px';
        else
            selectPhotolist.style.width = '400px';

    },

    containsMediaObject: function(list, mediaId) {

        for (var i = 0; i < list.length; i++) {
            var obj = list[i];
            var cachedMediaId = obj.id.substring(4);
            if (cachedMediaId == mediaId) {
                this.mediaList.slice(i, 1);
                return true;
            }
        }
        return false;
    },

    removeMedia: function(index) {

        if (index > -1 && this.mediaList.length > 0) {
            var m = this.mediaList[index];
            var panelContainer = $get(this.panelContainerID);
            var mediaContainer = $get(m.id);
            panelContainer.removeChild(mediaContainer);
        }
    },

    AddMedia: function(mediaObj) {
        var panelContainer = $get(this.panelContainerID);

        var photoP = document.createElement('div');
        photoP.id = 'div_' + mediaObj.ID;
        photoP.setAttribute('class', this.mediaUnSelectedStyle);
        photoP.setAttribute('className', this.mediaUnSelectedStyle);

        photoP.mediaOnMouseOver = this.mediaOnMouseOver;
        photoP.mediaOnMouseOut = this.mediaOnMouseOut;
        photoP.mediaOnMouseDown = this.mediaOnMouseDown;
        photoP.mediaShowUnSelected = this.mediaShowUnSelected;
        photoP.mediaShowSelected = this.mediaShowSelected;
        photoP.mediaOnClick = this.mediaOnClick;
        photoP.mediaPanel = this;
        photoP.mediaObject = mediaObj;
        photoP.mediaID = mediaObj.ID;

        photoP.onmouseover = function(e) {
            this.mediaOnMouseOver(this, e || event);
        };
        photoP.onmouseout = function(e) {
            this.mediaOnMouseOut(this, e || event);
        };

        if (this.dragDrop) {
            photoP.onmousedown = function(e) {
                this.mediaOnMouseDown(this, e || event);
            };
        }

        photoP.onclick = function(e) {
            this.mediaOnClick(this, e);
        };

        panelContainer.appendChild(photoP);

        var photoImage = document.createElement('img');
        photoImage.id = mediaObj.ID;
        photoImage.className = 'show_thumb';
        photoImage.src = mediaObj.ThumbURL;
        photoImage._media = mediaObj;
        photoP.appendChild(photoImage);
        photoP._mediaImg = photoImage;

        var chkImage = document.createElement('img');
        chkImage.id = 'chk_image_' + mediaObj.ID;
        chkImage.className = 'hide';
        chkImage.src = this.chkImageSrc;
        photoP.chkImage = chkImage;
        photoP.appendChild(chkImage);

        photoP.mediaIndex = this.mediaList.length;
        Array.add(this.mediaList, photoP);

        if (this.mediaTable == null) {
            this.mediaTable = new Object();
        }

        if (this.mediaTable[mediaObj.ID] == null)
            this.mediaTable[mediaObj.ID] = photoP;

        if (this.selectedMedia < 0) {
            if (this.chooseDefaultMedia)
                this.selectedMedia = 0;
            else
                this.selectedMedia = -1;

            if (this.showSelectedMedia) {
                this.mediaShowSelected(photoP);
            }
        }
    },

    GetMediaByIndex: function(index) {
        return this.mediaList[index].mediaObject;
    },

    GetMediaByID: function(id) {
        return this.mediaTable[id].mediaObject;
    },

    GetIndexByMediaID: function(id) {
        for (var i = 0; i < this.mediaList.length; i++) {
            if (this.mediaList[i].mediaID == id) {
                return i;
            }
        }
        return -1;
    },

    GetMediaCount: function() {
        return this.mediaList.length;
    },

    HasNextMedia: function() {
        return this.selectedMedia < this.mediaList.length - 1;
    },

    HasPrevMedia: function() {
        return this.selectedMedia > 0;
    },

    GetNextMedia: function() {
        return this.mediaList[this.selectedMedia + 1];
    },

    GetPrevMedia: function() {
        return this.mediaList[this.selectedMedia - 1];
    },

    GetSelectedMediaIndex: function() {
        return this.selectedMedia;
    },

    GetSelectedMedia: function() {
        if (this.selectedMedia < 0) {
            return null;
        }
        else {
            return this.mediaList[this.selectedMedia].mediaObject;
        }
    },

    SelectMediaByIndex: function(index) {
        if (this.serverPostButton != null) {
            document.getElementById(this.serverMediaValue).value = this.mediaList[index].mediaObject.ID;
            document.getElementById(this.serverPostButton).click();
        }
        else if (this.selectedMediaChangedCallback != null) {
            if (this.selectedMediaChangedCallback(this.mediaList[index].mediaObject) == false) {
                return;
            }
        }

        var media = null;

        if (this.selectedMedia > -1) {
            media = this.mediaList[this.selectedMedia];

            if (media !== null && typeof media !== 'undefined') {
                this.mediaShowUnSelected(media);
                media.chkImage.className = 'hide';

            }
        }

        this.selectedMedia = index;

        media = this.mediaList[this.selectedMedia];

        if (media !== null && typeof media !== 'undefined') {
            this.mediaShowSelected(media);
            media.chkImage.className = 'show';
            this.setMediaInfo(media._mediaImg._media);
        }
    },

    SelectMediaByID: function(mediaID) {
        this.SelectMediaByIndex(this.GetIndexByMediaID(mediaID));
    },

    SelectNextMedia: function() {
        if (this.HasNextMedia())
            this.SelectMediaByIndex(this.selectedMedia + 1);
    },

    SelectPrevMedia: function() {
        if (this.HasPrevMedia())
            this.SelectMediaByIndex(this.selectedMedia - 1);
    },

    SetClientMediaOnClickCallback: function(callback) {
        this.mediaOnClickCallback = callback;
    },

    SetClientDragMouseMoveCallback: function(callback) {
        this.dragMouseMoveCallback = callback;
    },

    SetClientDragMouseUpCallback: function(callback) {
        this.dragMouseUpCallback = callback;
    },

    SetSelectedMediaChangedCallback: function(callback) {
        this.selectedMediaChangedCallback = callback;
    },

    IsMediaClicked: function() {
        return this.mediaClicked;
    },

    // Private fields, use wrapper functions for access...

    panelContainerID: null,
    serverPostButton: null,
    serverMediaValue: null,

    mediaList: [],

    dragging: false,
    photoBeingDragged: null,
    ghostOfPhotoBeingDragged: null,
    photoRegionUnderMouse: null,

    startImageLeft: null,
    startImageTop: null,
    startMousePos: null,

    newPhoto: null,

    mediaTable: null,
    selectedMedia: -1,
    showSelectedMedia: true,
    mediaSelectedStyle: 'scroll_photo_thumb',
    mediaUnSelectedStyle: 'scroll_photo_thumb',
    mediaImageClassName: 'show',
    mediaOnClickCallback: null,
    selectedMediaChangedCallback: null,
    mediaClicked: false,

    selAlbumId: '',

    showMediaInfo: false,

    dragDrop: true,

    dragMouseMoveCallback: null,
    dragMouseUpCallback: null,

    // Private methods
    mediaShowSelected: function(obj) {
        obj.className = obj.mediaPanel.mediaSelectedStyle;
    },

    mediaShowUnSelected: function(obj) {
        obj.className = obj.mediaPanel.mediaUnSelectedStyle;

    },

    mediaOnMouseOver: function(obj) {
        this.mediaShowSelected(obj);
    },

    mediaOnMouseOut: function(obj) {
        if (!obj.mediaPanel.showSelectedMedia || obj.mediaPanel.GetSelectedMediaIndex() != obj.mediaIndex) {
            this.mediaShowUnSelected(obj);
        }
    },

    mediaOnMouseDown: function(obj, e) {
        if (true) // (e.button == Sys.UI.MouseButton.leftButton)
        {
            if (BrowserIsFirefox() || BrowserIsSafari()) {
                e.preventDefault();         // For Firefox...
            }

            if (!obj._mediaImg._media) {
                return;
            }

            obj.mediaPanel.dragging = true;
            obj.mediaPanel.photoBeingDragged = obj._mediaImg; //e.target;

            obj.mediaPanel.ghostOfPhotoBeingDragged = obj.mediaPanel.photoBeingDragged.cloneNode(true);
            obj.mediaPanel.ghostOfPhotoBeingDragged.style.position = 'absolute';
            obj.mediaPanel.ghostOfPhotoBeingDragged.style.zIndex = '100';
            obj.mediaPanel.ghostOfPhotoBeingDragged.style.opacity = 0.7;
            obj.mediaPanel.ghostOfPhotoBeingDragged.style.filter = 'alpha(opacity=' + 70 + ')';

            var offsetYDelta = 0;
            var offsetXDelta = 0;

            //            if (BrowserIsSafari()) {
            //                offsetXDelta = -8;
            //                offsetYDelta = document.getElementById(obj.mediaPanel.panelContainerID).scrollTop;
            //            }

            obj.mediaPanel.photoBeingDragged.parentNode.insertBefore(obj.mediaPanel.ghostOfPhotoBeingDragged, obj.mediaPanel.photoBeingDragged);
            if (obj.mediaPanel.photoBeingDragged.offsetLeft < 100) {
                obj.mediaPanel.startImageLeft = obj.mediaPanel.ghostOfPhotoBeingDragged.offsetLeft - 90;
                obj.mediaPanel.startImageTop = obj.mediaPanel.ghostOfPhotoBeingDragged.offsetTop - offsetYDelta;
            }
            else {
                obj.mediaPanel.startImageLeft = obj.mediaPanel.photoBeingDragged.offsetLeft - offsetXDelta;
                obj.mediaPanel.startImageTop = obj.mediaPanel.photoBeingDragged.offsetTop - offsetYDelta;
            }
            obj.mediaPanel.startMousePos = obj.mediaPanel.getMousePositionFromRawEvent(e);

            obj.mediaPanel.ghostOfPhotoBeingDragged.style.left = obj.mediaPanel.startImageLeft + 'px';
            obj.mediaPanel.ghostOfPhotoBeingDragged.style.top = obj.mediaPanel.startImageTop + 'px';

            obj.mediaPanel.addMouseMoveHandlers();
        }
    },

    mediaOnClick: function(obj, event) {
        obj.mediaPanel.mediaClicked = true;

        if (obj.mediaPanel.mediaOnClickCallback != null) {
            if (obj.mediaPanel.mediaOnClickCallback(obj.mediaObject) == false) {
                obj.mediaPanel.mediaClicked = false;
                return;
            }
        }

        obj.mediaPanel.SelectMediaByIndex(obj.mediaIndex);
        obj.mediaPanel.photoBeingDragged = obj;

        obj.mediaPanel.selAlbumId = obj._mediaImg._media.EncAlbumID;

        obj.mediaPanel.mediaClicked = false;
    },

    SetClientMediaOnNavigationCallback: function(callback) {
        this.mediaOnNavigationCallback = callback;
    },

    mediaOnNavigation: function() {
        if (this.mediaOnNavigationCallback != null) {
            try {
                this.mediaOnClickCallback(this.mediaList[this.selectedMedia]._mediaImg._media);
            }
            catch (e) { }
        }
    },

    addMouseMoveHandlers: function() {
        this.mouseMoveHandler = Function.createDelegate(this, this.mouseMoveWhileDraggingPhoto);
        $addHandler(document, 'mousemove', this.mouseMoveHandler);

        this.mouseUpHandler = Function.createDelegate(this, this.mouseUpWhileDraggingPhoto);
        $addHandler(document, 'mouseup', this.mouseUpHandler);
    },

    removeMouseMoveHandlers: function() {
        if (this.dragging) {
            $removeHandler(document, 'mousemove', this.mouseMoveHandler);
            $removeHandler(document, 'mouseup', this.mouseUpHandler);
            this.dragging = false;
        }
    },

    mouseMoveWhileDraggingPhoto: function(e) {
        e.preventDefault();

        var pos = this.getMousePositionFromRawEvent(e.rawEvent);
        var deltaX = pos.x - this.startMousePos.x;
        var deltaY = pos.y - this.startMousePos.y;

        if (this.ghostOfPhotoBeingDragged) {
            this.ghostOfPhotoBeingDragged.style.left = (this.startImageLeft + deltaX) + 'px';
            this.ghostOfPhotoBeingDragged.style.top = (this.startImageTop + deltaY) + 'px';
        }

        if (this.dragMouseMoveCallback != null) {
            if (this.dragMouseMoveCallback(this.photoBeingDragged._media, this.getMousePositionFromRawEvent(e)) == false) {
                return;
            }
        }

        this.removeHoverClassFromOldRegionUnderMouse();
    },

    mouseUpWhileDraggingPhoto: function(e) {
        this.removeHoverClassFromOldRegionUnderMouse();

        if (this.ghostOfPhotoBeingDragged) {
            this.ghostOfPhotoBeingDragged.parentNode.removeChild(this.ghostOfPhotoBeingDragged);
        }
        this.ghostOfPhotoBeingDragged = null;

        if (this.dragMouseUpCallback != null) {
            if (this.dragMouseUpCallback(this.photoBeingDragged._media, this.getMousePositionFromRawEvent(e)) == false) {
                return;
            }
        }

        this.SelectMediaByIndex(this.GetIndexByMediaID(this.photoBeingDragged._media.ID));

        this.removeMouseMoveHandlers();
    },

    removeHoverClassFromOldRegionUnderMouse: function() {
        if (this.photoRegionUnderMouse) {
            Sys.UI.DomElement.removeCssClass(this.photoRegionUnderMouse, 'hover');
            this.photoRegionUnderMouse = null;
        }
    },

    getMousePositionFromRawEvent: function(e) {
        var x = 0;
        var y = 0;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        return { x: x, y: y };
    },

    setSelAlbumID: function(albumId) {
        this.selAlbumId = albumId;
    },

    setShowMediaInfo: function(value) {
        this.showMediaInfo = value;
    },

    setMediaInfo: function(media) {
        if (this.showMediaInfo.toLowerCase() == 'true') {

            $get('pImageName').innerHTML = media.Name;
            $get('spnDateCreated').innerHTML = media.CreateDateTime;
            $get('spnSize').innerHTML = media.Size;

            if (this.mediaList.length > 0) {
                if (this.selectedMedia > -1)
                    $get('spnCurrent').innerHTML = this.selectedMedia + 1;
                $get('spnLast').innerHTML = this.mediaList.length;

            }
        }
    },

    showClickHeretoUpload: function() {
        var container = document.getElementById("div_photo_edit_select");
        container.innerHTML = document.getElementById('NoPhotos').innerHTML;
    }
};