frog.raindrop.jp.knowledge

/** photo.js
 *
 * @author Kuwabara Miyuki (ba)
 * @version 1.0.0
 */
var jp;
if (!jp) jp = {};
if (!jp.raindrop) jp.raindrop = {};
if (!jp.raindrop.frog) jp.raindrop.frog = {};
if (!jp.raindrop.frog.photo) (function () {

    var _albums = [];

    var _getElementsByTagName = function (node, namespaceURI, tagName, prefix) {
//        var elements = node.getElementsByTagNameNS (namespaceURI, tagName);
//        if (!elements.length)
//            elements = node.getElementsByTagName ([prefix, tagName].join (':'));
        var elements = node.getElementsByTagName ([prefix, tagName].join (':'));
        if (!elements.length)
            elements = node.getElementsByTagName (tagName);
        return elements;
    };

    var _getContainedAlbum = function (id) {
        for (var i = 0; i < _albums.length; i ++)
            if (_albums [i].isExists (id))
                return _albums [i];
        return null;
    };

    var _load = function (targetDocument) {
        _loadAlbums (targetDocument);
        _loadThumbnails (targetDocument);
    };

    var _loadAlbums = function (targetDocument) {
        _albums = [];
        var albumElements = _getElementsByTagName (targetDocument, 'http://frog.raindrop.jp/ns', 'photo-album', 'frog');
        for (var i = 0; i < albumElements.length; i ++) {
            var itemElements = _getElementsByTagName (albumElements [i], 'http://frog.raindrop.jp/ns', 'photo-item', 'frog');
            if (itemElements.length) {
                var album = new jp.raindrop.frog.photo.__album ();
                for (var j = 0; j < itemElements.length; j ++) {
                    var id        = itemElements [j].getAttribute ('id');
                    var src        = itemElements [j].getAttribute ('src');
                    var title    = itemElements [j].getAttribute ('title');
                    album.add (id, src, title);
                }
                _albums.push (album);
            }
        }
    };

    var _loadThumbnails = function (targetDocument) {
        var elements = _getElementsByTagName (targetDocument, 'http://frog.raindrop.jp/ns', 'photo-thumbnail', 'frog');
        for (var i = 0; i < elements.length; i ++) {
            var caption    = (elements [i].getAttribute ('caption').match (/^yes$/i))? true: false;
            var link    = (elements [i].getAttribute ('link').match (/^yes$/i))? true: false;
            var content    = elements [i].getAttribute ('content');
            
            var album    = _getContainedAlbum (content);
            if (album) {
                var item = album.get (content);
                var thumbnail = item.getThumbnail (targetDocument, caption, link);
                elements [i].parentNode.insertBefore (thumbnail, elements [i]);
            }
        }
        for (var i = 0; i < elements.length; i ++) {
            elements [i].parentNode.removeChild (elements [i]);
        }
    };

    jp.raindrop.frog.photo = {
        "__album": function () {
            this._catalog = {};
        },
        "__item": function (id, src, title) {
            this.id        = id;
            this.src    = src;
            this.title    = title;
        },
        "__iterator": function (catalog, first, key) {
            var _keys = [];
            for (var k in catalog)
                _keys.push (k);
            
            var _index = first? 0: (_keys.length - 1);
            if (arguments.length > 2) {
                var index = 0;
                var length = _keys.length;
                
                _keys.push (key);
                while (_keys [index] != key)
                    index ++;
                _keys.length = length;
                if (index < length)
                    _index = index;
            }
            var _move = function (i) {
                if ((i < 0) || (i >= _keys.length))
                    return null;
                _index = i;
                return catalog[_keys[i]];
            };

            return {
                item: function () {
                    return _move (_index);
                },
                next: function () {
                    return _move (_index + 1);
                },
                previous: function () {
                    return _move (_index - 1);
                }
            };
        },
        '__albumWindow': function (iterator) {
            this._current    = iterator;
            var _this = this;
            var newWindow = window.open('', 'album', 'width=300,height=300,toolbar=no,directories=no,menubar=no,status=no,left=0,top=0');
            var newDocument = newWindow.document;
            newDocument.body.setAttribute ('style', [
                    'position: relative',
                    'background: black',
                    'color: #ccc',
                    'margin: 0',
                    'padding: 0',
                    'text-align: center',
                    ''
                ].join (';'));

            var baseLocation = newDocument.createElement ('base');
            baseLocation.setAttribute ('href', newWindow.opener.location.href);
            var head = newDocument.getElementsByTagName ('head');
            if (head.length) {
                head [0].insertBefore (baseLocation, head [0].firstChild);
            }
            else {
                head = newDocument.createElement ('head');
                head.appendChild (baseLocation);
                newDocument.body.parentNode.insertBefore (head, newDocument.body);
            }
            var container = newDocument.createElement ('div');
            container.setAttribute ('id', 'photo-container');
            container.setAttribute ('style', [
                'margin: 0',
                'padding: 0',
                ''
            ].join (';'));
            newDocument.body.appendChild (container);
            var caption = newDocument.createElement ('div');
            caption.setAttribute ('id', 'photo-caption');
            caption.setAttribute ('style', [
                'position: absolute',
                'visibility: hidden',
                'padding: 5px',
                'left: 0',
                'top: 0',
                'width: 100%',
                'text-align: center',
                'font: bold 25px/1.1 sans-serif',
                'color: white',
                ''
            ].join (';'));
            newDocument.body.appendChild (caption);
            var navigation = newDocument.createElement ('div');
            navigation.setAttribute ('id', 'album-navigation');
            navigation.setAttribute ('style', [
                'position: absolute',
                'visibility: hidden',
                'left: 0',
                'top: 0',
                'margin: 0',
                'padding: 0',
                'width: 100%',
                'vertical-align: middle',
                'font: bold 40px/1.1 sans-serif',
                'color: white',
                ''
            ].join (';'));
            var previous = newDocument.createElement ('div');
            previous.setAttribute ('id', 'album-navigation-previous');
            previous.setAttribute ('style', [
                'position: absolute',
                'left: 0',
                'top: 0',
                'margin: 0',
                'padding: 5px',
                'cursor: pointer',
                ''
            ].join (';'));
            previous.onclick = function (event) {
                _this.movePrevious ();
            };
            previous.innerHTML = '&lt;';
            navigation.appendChild (previous);
            var next = newDocument.createElement ('div');
            next.setAttribute ('id', 'album-navigation-next');
            next.setAttribute ('style', [
                'position: absolute',
                'right: 0',
                'top: 0',
                'margin: 0',
                'padding: 5px',
                'cursor: pointer',
                ''
            ].join (';'));
            next.onclick = function (event) {
                _this.moveNext ();
            };
            next.innerHTML = '&gt;'
            navigation.appendChild (next);
            newDocument.body.appendChild (navigation);

            newDocument.body.onmouseover = function (event) {
                caption.style.visibility = 'visible';
                navigation.style.visibility = 'visible';
            };
            newDocument.body.onmouseout = function (event) {
                caption.style.visibility = 'hidden';
                navigation.style.visibility = 'hidden';
            };

            this._update = function (item) {
                var image = item.getImageElement (newDocument);
                image.onload = function (event) {
                    newWindow.resizeTo (image.width, image.height + 20);
                    navigation.style.top = (image.height - 50) / 2;
                };
                if (container.firstChild)
                    container.replaceChild (image, container.firstChild);
                else
                    container.appendChild (image);
                caption.innerHTML = item.title;
                newDocument.title = item.title;
            };
            this._update (iterator.item ());
        },
        load: function (targetDocument) {
            return _load (targetDocument);
        }
    };
    
    jp.raindrop.frog.photo.__album.prototype = {
        add: function (id, src, title) {
            return this.append (new jp.raindrop.frog.photo.__item (id, src, title));
        },
        append: function (item) {
            item._setAlbum (this);
            this._catalog [item.id] = item;
            return item;
        },
        getCount: function () {
            return this._catalog.length;
        },
        get: function (id) {
            return this._catalog [id];
        },
        isExists: function (id) {
            return (id in this._catalog);
        },
        begin: function () {
            return new jp.raindrop.frog.photo.__iterator (this._catalog, true);
        },
        end: function () {
            return new jp.raindrop.frog.photo.__iterator (this._catalog, false);
        },
        iterator: function (id) {
            return new jp.raindrop.frog.photo.__iterator (this._catalog, false, id);
        }
    };

    jp.raindrop.frog.photo.__item.prototype = {
        getAlbum: function () {
            return this._album;
        },
        getImageElement: function (targetDocument) {
            var image = targetDocument.createElement ('img');
            image.setAttribute ('src', this.src);
            image.setAttribute ('alt', this.title);
            image.setAttribute ('title', this.title);
            return image;
        },
        getThumbnailURI: function () {
            var m = this.src.match (/^(.+)\.([^\.]+)$/);
            if (m)
                return [m [1], '-thumb.', m [2].toLowerCase ()].join ('');
            else
                return [this.src, '-thumb'].join ('');
        },
        getThumbnail: function (targetDocument, captionFlag, linkFlag) {
            var container = targetDocument.createElement ('div');
            container.setAttribute ('class', 'album-thumbnail');
            container.setAttribute ('style', 'display: inline-block; margin: 2px; vertical-align: top;');    // ★
            var thumbnail = targetDocument.createElement ('img');
            thumbnail.setAttribute ('title', this.title);
            thumbnail.setAttribute ('alt', this.title);
            thumbnail.setAttribute ('src', this.getThumbnailURI ());
            if (linkFlag) {
                var ancher = targetDocument.createElement ('a');
                var current = this._album.iterator (this.id);
                ancher.setAttribute ('href', this.src);
                ancher.setAttribute ('title', this.title);
                ancher.onclick = function (event) {
                    new jp.raindrop.frog.photo.__albumWindow (current);
                    return false;
                };
                ancher.appendChild (thumbnail);
                container.appendChild (ancher);
            }
            if (captionFlag) {
                var caption = targetDocument.createElement ('div');
                caption.setAttribute ('class', 'album-thumbnail-caption');
                caption.setAttribute ('style', 'margin: 0 0 0.5em 0;');    // ★
                thumbnail.onload = function (event) {
                    caption.setAttribute ('style', 'margin: 0 0 0.5em 0; width: ' + thumbnail.width + 'px;')
                };
                caption.appendChild (targetDocument.createTextNode (this.title));
                container.appendChild (caption);
            }
            return container;
        },
        '_setAlbum': function (album) {
            this._album = album;
        }
    };

    jp.raindrop.frog.photo.__albumWindow.prototype = {
        movePrevious: function () {
            var item = this._current.previous ();
            if (item)
                this._update (item);
        },
        moveNext: function () {
            var item = this._current.next ();
            if (item)
                this._update (item);
        }
    };

} ());