var Album=new Class(
{
    slideshow:null,
    photoLeftLink:null,
    photoRightLink:null,
    photoContainer:null,
    photoImgFirst:null,
    photoImgSecond:null,
    waitingImg:null,
    curPhoto:null,
    prevPhoto:null,
	initialize:function (options) 
	{
		this.setOptions(options);
	},
	
	inject:function (container,back,userName) 
	{
		this._back=$(back);
		this._container=$(container);
        this._userName = userName;
                
        if(Site.qsParm.getValue("albumId") && Site.qsParm.getValue("photoId"))
        {
            this.onOpenPhoto(Site.qsParm.getValue("albumId"),Site.qsParm.getValue("photoId"));
        }
        else if(Site.qsParm.getValue("albumId"))
        {
            this.onOpenAlbum(Site.qsParm.getValue("albumId"));
        }
        else
            this.getAlbums();
        
	},
	getAlbums:function()
	{
	    this._back.empty();
        
        Site.qsParm.removeKey("albumId");
        Site.qsParm.removeKey("photoId");
        
        if(this.slideshow != null)
        {
            this.slideshow.stop();
            this.slideshow = null;
        }

        if(this._container)this.showWaitingIcon(this._container);
        var script = document.createElement('script');
        
        script.setAttribute('src', 'http://picasaweb.google.com/data/feed/api/user/'+this._userName+'?kind=album&alt=json-in-script&callback='+this.options.objName+'.onGetAlbumsDataComplete');
        script.setAttribute('id', 'albumsJsonScript_' + this._userName);
        script.setAttribute('type', 'text/javascript');
        document.documentElement.firstChild.appendChild(script);
	},
	onGetAlbumsDataComplete:function(jsonObj)
	{
	    this._jsonObj = jsonObj;
        this._container.empty();
        var _self = this;
         
        var rssSrc = "http://picasaweb.google.com/data/feed/base/user/{USERNAME}?kind=album&alt=rss&hl=en_US";
        rssSrc = rssSrc.replace(/{USERNAME}/g,_self._userName)
        var rss = new Element("a").addClass('rss-link').setProperty('href',rssSrc).setProperty('target','_blank').setText('RSS Feed').injectInside(this._back);
        
        for (var i = 0; i < jsonObj.feed.entry.length; i++) 
        {
            var entry = jsonObj.feed.entry[i];
            var div = new Element("div").addClass('album-item').setHTML(this.getAlbumItemHTML(entry.gphoto$id.$t,entry.title.$t,
                                        entry.summary.$t,entry.media$group.media$thumbnail[0].url)); 
            div.injectInside(this._container); 
            var thumb = $("thumb-"+entry.gphoto$id.$t);
            thumb._albumId = entry.gphoto$id.$t;
            thumb.addEvent("click", function(){_self.onOpenAlbum(this._albumId);});    
            var name = $("name-"+entry.gphoto$id.$t);
            name._albumId = entry.gphoto$id.$t;
            name.addEvent("click", function(){_self.onOpenAlbum(this._albumId);});    
        }
	},
	onOpenAlbum:function(albumId)
	{
	    this._back.empty();
        
        Site.qsParm.setValue("albumId",albumId);
        Site.qsParm.removeKey("photoId");
        
        if(this.slideshow != null)
        {
            this.slideshow.stop();
            this.slideshow = null;
        }

        if(this._container)this.showWaitingIcon(this._container);
	    this.removeAlbumsScript();
	    //Site.replaceHashParam("subpage","albumId-"+albumId);
        var script = document.createElement('script');
        
        script.setAttribute('src', 'http://picasaweb.google.com/data/feed/api/user/'+this._userName+'/albumid/'+albumId+'?alt=json-in-script&callback='+this.options.objName+'.onGetPhotosDataComplete');
        script.setAttribute('id', 'photosJsonScript_' + this._userName);
        script.setAttribute('type', 'text/javascript');
        document.documentElement.firstChild.appendChild(script);

	},
	onGetPhotosDataComplete:function(jsonObj)
	{
	    this._jsonObj = jsonObj;
        this._container.empty();
        var _self = this;
         
	    var backBtn = new Element("div").addClass("albums-back-btn button").addEvent("click",function(){_self.getAlbums();});
	    var backBtnHtml = '<span class="en" style="display:';
	    backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
	    backBtnHtml += '">Album List</span>';
	    backBtnHtml += '<span class="ru" style="display:';
	    backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
	    backBtnHtml += '">Список Альбомов</span>';
	    backBtn.setHTML(backBtnHtml);
	    backBtn.injectInside(this._back);
	    backBtn = new Element("div").addClass("slide-show-btn button");
	    backBtn._jsonObj = jsonObj;
	    backBtn.addEvent("click",function(){_self.onShowSlideshow(this._jsonObj);});
	    backBtnHtml = '<span class="en" style="display:';
	    backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
	    backBtnHtml += '">Slideshow</span>';
	    backBtnHtml += '<span class="ru" style="display:';
	    backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
	    backBtnHtml += '">Slideshow</span>';
	    backBtn.setHTML(backBtnHtml);
	    backBtn.injectInside(this._back);
	    
        var rssSrc = "http://picasaweb.google.com/data/feed/base/user/{USERNAME}/albumid/{ALBUMID}?kind=photo&alt=rss&hl=en_US";
        rssSrc = rssSrc.replace(/{USERNAME}/g,_self._userName).replace(/{ALBUMID}/g,jsonObj.feed.gphoto$id.$t)
        var rss = new Element("a").addClass('rss-link').setProperty('href',rssSrc).setProperty('target','_blank').setText('RSS Feed').injectInside(this._back);
        var picasaSrc = "picasa://downloadfeed/?url=http://picasaweb.google.com/data/feed/back_compat/user/{USERNAME}/albumid/{ALBUMID}?kind=photo&alt=rss&imgdl=1";
        picasaSrc = picasaSrc.replace(/{USERNAME}/g,_self._userName).replace(/{ALBUMID}/g,jsonObj.feed.gphoto$id.$t)
        var picasa = new Element("a").addClass('picasa-icon').setProperty('href',picasaSrc).setProperty('target','_blank').setText('Picasa').injectInside(this._back);
        
	    
        for (var i = 0; i < jsonObj.feed.entry.length; i++) 
        {
            var entry = jsonObj.feed.entry[i];
            
            var div = new Element("div").addClass('album-photo-item').setHTML(this.getPhotoItemHTML(entry.gphoto$id.$t,/*entry.title.$t*/entry.summary.$t,
                                        /*entry.summary.$t*/'',entry.media$group.media$thumbnail[1].url,entry.media$group.media$thumbnail[1].width,
                                        entry.media$group.media$thumbnail[1].height)); 
            div.injectInside(this._container); 
            var thumb = $("thumb-photo-"+entry.gphoto$id.$t);
            thumb._photoId = entry.gphoto$id.$t;
            thumb._albumId = entry.gphoto$albumid.$t;
            thumb.addEvent("click", function(){_self.onOpenPhoto(this._albumId,this._photoId);});    
        }
	},
	onOpenPhoto:function(albumId,photoId)
	{
	    this._curPhotoId = photoId;
	    this._back.empty();
        
        Site.qsParm.setValue("albumId",albumId);
        Site.qsParm.setValue("photoId",photoId);

        if(this._container)this.showWaitingIcon(this._container);
	    this.removePhotosScript();
        var script = document.createElement('script');

        script.setAttribute('src', 'http://picasaweb.google.com/data/feed/api/user/'+this._userName+'/albumid/'+albumId+'?alt=json-in-script&callback='+this.options.objName+'.onGetPhotoDataComplete');
        //script.setAttribute('src', 'http://picasaweb.google.com/data/feed/api/user/YPanshin/albumid/'+albumId+'/photoid/'+photoId+'?alt=json-in-script&callback='+this.options.objName+'.onGetPhotoDataComplete');
        script.setAttribute('id', 'photoJsonScript_' + this._userName);
        script.setAttribute('type', 'text/javascript');
        document.documentElement.firstChild.appendChild(script);

	},
	onGetPhotoDataComplete:function(jsonObj)
	{
	    this._jsonObj = jsonObj;
        this._container.empty();
        var _self = this;
        
        
        var backBtn = new Element("div").addClass("albums-back-btn button").addEvent("click",function(){_self.getAlbums();});
        var backBtnHtml = '<span class="en" style="display:';
        backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
        backBtnHtml += '">Album List</span>';
        backBtnHtml += '<span class="ru" style="display:';
        backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
        backBtnHtml += '">Список Альбомов</span>';
        backBtn.setHTML(backBtnHtml);
        backBtn.injectInside(this._back);
        backBtn = new Element("div").addClass("photos-back-btn button");
        backBtn._albumId = jsonObj.feed.gphoto$id.$t;
        backBtn.addEvent("click",function(){_self.onOpenAlbum(this._albumId);});
        backBtnHtml = '<span class="en" style="display:';
        backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
        backBtnHtml += '">Album</span>';
        backBtnHtml += '<span class="ru" style="display:';
        backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
        backBtnHtml += '">Альбом</span>';
        backBtn.setHTML(backBtnHtml);
        backBtn.injectInside(this._back);
        
        for (var i = 0; i < jsonObj.feed.entry.length; i++) 
        {
            var entry = jsonObj.feed.entry[i];
            if(entry.gphoto$id.$t == this._curPhotoId)
            {
                var clear = new Element("div").setStyle('clear','both').injectInside(this._container);
                this.photoContainer = new Element("div").addClass('photo-item-img-div').injectInside(this._container);
                this.photoImgFirst = new Element("img").addClass('photo-item-img-first').setStyles({opacity:0}).injectInside(this.photoContainer);
                this.photoImgSecond = new Element("img").addClass('photo-item-img-first').setStyles({opacity:0}).injectInside(this.photoContainer);
                this.photoLeftLink = new Element("a").addClass('photo-item-img-left').hide().injectInside(this.photoContainer);
                this.photoLeftLink.setProperty('href','javascript:void(0);');
                this.photoRightLink = new Element("a").addClass('photo-item-img-right').hide().injectInside(this.photoContainer);
                this.photoRightLink.setProperty('href','javascript:void(0);');
                this.waitingImg = new Element("div").addClass('photo-item-waiting-img').injectInside(this.photoContainer);
                var thumbnail = entry.media$group.media$thumbnail[0];
                var width = thumbnail.width > thumbnail.height ? 800 : 800*thumbnail.width/thumbnail.height;
                var height = thumbnail.height > thumbnail.width ? 800 : 800*thumbnail.height/thumbnail.width;
                
                this.photoImgFirst.setStyles({width:width,height:height,'background-color':'#969696'});
                
                this.curPhoto = this.photoImgFirst;
                this.prevPhoto = this.photoImgSecond;
                
                _self.photoContainer.setStyles({width:width+10});
                _self.photoContainer.setStyles({height:height+10});
                
                this.showPhoto(jsonObj,entry,i);
            }
        }
                 
	},
	showPhoto:function(jsonObj,entry,i)
	{
        var _self = this;
        
        _self.waitingImg.show();

        if(this.curPhoto == this.photoImgSecond)
        {
            this.curPhoto = this.photoImgFirst;
            this.prevPhoto = this.photoImgSecond;
        }
        else
        {
            this.curPhoto = this.photoImgSecond;
            this.prevPhoto = this.photoImgFirst;
        }
        
        Site.qsParm.setValue("photoId",entry.gphoto$id.$t);
        
        var thumbnail = entry.media$group.media$thumbnail[0];
        var width = thumbnail.width > thumbnail.height ? 800 : 800*thumbnail.width/thumbnail.height;
        var height = thumbnail.height > thumbnail.width ? 800 : 800*thumbnail.height/thumbnail.width;
                
        var img = new Image;
        img.src = thumbnail.url.replace('s72','s800');
        img.onload = function()
        {
            _self.curPhoto.src = img.src;
            _self.curPhoto.setStyles({width:width,height:height});
            
            var fx = new Fx.Styles(_self.photoContainer, {duration: 300,wait:false, transition: Fx.Transitions.linear});
            fx.start({width:width+10,height:height+10}).chain(function(){});

            var fx = new Fx.Styles(_self.curPhoto, {duration: 300,wait:false, transition: Fx.Transitions.linear});
            fx.start({'opacity': 1}).chain(function(){_self.waitingImg.hide();});

            var fx = new Fx.Styles(_self.prevPhoto, {duration: 300,wait:false, transition: Fx.Transitions.linear});
            fx.start({'opacity': 0}).chain(function(){});
                        
            if(i > 0)
            {
                _self.photoLeftLink.show();
                _self.photoLeftLink._jsonObj = jsonObj;
                _self.photoLeftLink._i = i;
                _self.photoLeftLink.removeEvents("click");
                _self.photoLeftLink.addEvent("click", function()
                {
                    this._i--;
                    if(this._i <= 0)
                    {
                        this.hide();
                    }
                    _self.showPhoto(this._jsonObj,this._jsonObj.feed.entry[this._i],this._i);
                });    
            }
            else
                _self.photoLeftLink.hide();
            
            if(i < (jsonObj.feed.entry.length-1))
            {
                _self.photoRightLink.show();
                _self.photoRightLink._jsonObj = jsonObj;
                _self.photoRightLink._i = i;
                _self.photoRightLink.removeEvents("click");
                _self.photoRightLink.addEvent("click", function()
                {
                    this._i++;
                    if(this._i >= (jsonObj.feed.entry.length-1))
                    {
                        this.hide();
                    }
                    _self.showPhoto(this._jsonObj,this._jsonObj.feed.entry[this._i],this._i);
                });        
            }
            else
                _self.photoRightLink.hide();
            
    //                var desc = new Element("div").addClass('photo-item-img-description').injectInside(div);
    //                desc.setText(entry.title.$t);
    //                var descLink = new Element("a").addClass('photo-item-img-description-link').injectInside(div);
    //                descLink.setText("Description");
    //                descLink.addEvent("click", function()
    //                {
    //                    var fx = new Fx.Styles(descLink, {duration: 500,wait:false, transition: Fx.Transitions.linear});
    //                    fx.start({'bottom': '50px'});
    //                    var fx = new Fx.Styles(desc, {duration: 500,wait:false, transition: Fx.Transitions.linear});
    //                    fx.start({'height': '50px'});
    //                });  
        };
                                             
                                               
	},
	onShowSlideshow:function(jsonObj)
	{
	    this._back.empty();
        this._container.empty();
        var _self = this;
 
 	    var backBtn = new Element("div").addClass("albums-back-btn button").addEvent("click",function(){_self.getAlbums();});
	    var backBtnHtml = '<span class="en" style="display:';
	    backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
	    backBtnHtml += '">Album List</span>';
	    backBtnHtml += '<span class="ru" style="display:';
	    backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
	    backBtnHtml += '">Список Альбомов</span>';
	    backBtn.setHTML(backBtnHtml);
	    backBtn.injectInside(this._back);
	    backBtn = new Element("div").addClass("photos-back-btn button");
	    backBtn._albumId = jsonObj.feed.gphoto$id.$t;
	    backBtn.addEvent("click",function(){_self.onOpenAlbum(this._albumId);});
	    backBtnHtml = '<span class="en" style="display:';
	    backBtnHtml += (Site.settings.lang == 'en-us')?'inline':'none';
	    backBtnHtml += '">Album</span>';
	    backBtnHtml += '<span class="ru" style="display:';
	    backBtnHtml += (Site.settings.lang != 'en-us')?'inline':'none';
	    backBtnHtml += '">Альбом</span>';
	    backBtn.setHTML(backBtnHtml);
	    backBtn.injectInside(this._back);

	    var div = new Element("div").setProperty('id','slideshow').addClass('slideshow');
        var entry = jsonObj.feed.entry[0];
        
        var width = 600;
        var height = 450;

	    var img = new Element("img").setProperty('src','/blank.jpg')
	                                .setProperty('width',width)
	                                .setProperty('height',height).addClass('slideshow-image');
	    img.injectInside(div);
	    div.injectInside(this._container);
	    var imgArray = new Array();
        for (var i = 0; i < jsonObj.feed.entry.length; i++) 
        {
            entry = jsonObj.feed.entry[i];
            imgArray[i] = entry.media$group.media$thumbnail[2].url.replace('s288','s800');
        }
	    this.slideshow = new Slideshow('slideshow', {hu: '', images: imgArray,type: 'combo', duration: [2000, 4000],width:width,height:height});
	},
    removeAlbumsScript:function() 
    {
      var jsonScript = document.getElementById('albumsJsonScript_' + this._userName);
      if (jsonScript) 
      {
            jsonScript.parentNode.removeChild(jsonScript);
      }
    },
    removePhotosScript:function() 
    {
      var jsonScript = document.getElementById('photosJsonScript_' + this._userName);
      if (jsonScript) 
      {
            jsonScript.parentNode.removeChild(jsonScript);
      }
    },
    removePhotoScript:function() 
    {
      var jsonScript = document.getElementById('photoJsonScript_' + this._userName);
      if (jsonScript) 
      {
            jsonScript.parentNode.removeChild(jsonScript);
      }
    },
    showWaitingIcon:function(el)
    {
        el.empty();
        var div = new Element('div').addClass('waiting-img').setText('Loading...').injectInside(el);
    },
    remove:function()
    {
        this.removeAlbumsScript();
        this.removePhotosScript();
        this.removePhotoScript();
        this._container.empty();
        
        Site.qsParm.removeKey("albumId");
        Site.qsParm.removeKey("photoId");
    },
    getAlbumItemHTML:function(id,title,summary,url)
    {
          var contentThumb =  '<table border="0" cellpadding="0" cellspacing="0" class="album-frame">'+
            '<tr>'+
            '    <td class="topx----">'+
            '        <div class="album-image-li1"></div></td>'+
            '    <td class="top-x---">'+
            '        <div class="album-image-mtl"></div></td>'+
            '    <td class="top--x--">'+
            '    </td>'+
            '    <td class="top---x-">'+
            '        <div class="album-image-mtr"></div></td>'+
            '    <td class="top----x">'+
            '        <div class="album-image-r1"></div></td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="mtpx----">'+
            '        <div class="album-image-l2"></div></td>'+
            '    <td colspan="3" rowspan="3">'+
            '        <img id="thumb-{UNIQ_ID}" alt="{SUMMARY}" class="thumb-album button" src="{SOURCE}" style="border: 4px solid white"/></td>'+
            '    <td class="mtp----x" >'+
            '        <div class="album-image-r2"></div></td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="midx----">'+
            '    </td>'+
            '    <td class="mid----x">'+
            '    </td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="mbtx----">'+
            '        <div class="album-image-l3"></div></td>'+
            '    <td class="mbt----x">'+
            '        <div class="album-image-r3"></div></td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="botx----">'+
            '        <div class="album-image-l4"></div></td>'+
            '    <td class="bot-x---">'+
            '        <div class="album-image-mbl"></div></td>'+
            '    <td class="bot--x--">'+
            '    </td>'+
            '    <td class="bot---x-">'+
            '        <div class="album-image-mbr"></div></td>'+
            '    <td class="bot----x">'+
            '        <div class="album-image-r4"></div></td>'+
            '</tr>'+
        '</table>'+
        '<div class="album-item-data"><h4>'+
        '   <span id="name-{UNIQ_ID}" class="button">{TITLE}</span>'+
        '</h4>'+
        '</div>';
        
        return contentThumb.replace(/{UNIQ_ID}/g,id).replace(/{TITLE}/g,title).replace(/{SUMMARY}/g,summary).replace(/{SOURCE}/g,url);
    },
    getPhotoItemHTML:function(id,title,summary,url,width,height)
    {
            var contentThumb =  '<table border="0" cellpadding="0" cellspacing="0" class="photo-frame">'+
            '<tr>'+
            '    <td class="topx--">'+
            '    </td>'+
            '    <td class="top-x-">'+
            '    </td>'+
            '    <td class="top--x">'+
            '    </td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="midx--">'+
            '    </td>'+
            '    <td>'+
            '        <img id="thumb-photo-{UNIQ_ID}" alt="{SUMMARY}" style="width:{WIDTH};height:{HEIGHT};" class="photo_198 button" src="{SOURCE}%>" style="border: 4px solid white"/></td>'+
            '        </td>'+
            '    <td class="mid--x">'+
            '    </td>'+
            '</tr>'+
            '<tr>'+
            '    <td class="botx--">'+
            '    </td>'+
            '    <td class="bot-x-">'+
            '    </td>'+
            '    <td class="bot--x">'+
            '    </td>'+
            '</tr>'+
        '</table>'+
        '{TITLE}';

        return contentThumb.replace(/{UNIQ_ID}/g,id).replace(/{TITLE}/g,title)
                            .replace(/{SUMMARY}/g,summary)
                            .replace(/{SOURCE}/g,url).replace(/{WIDTH}/g,width).replace(/{HEIGHT}/g,height);
    }
    
});

Album.implement(new Events,new Options);