/* ImageViewer.js */

Pin.ImageViewer = function(elRenderTo, config){
    Ext.apply(this, config);

    if (elRenderTo)
    {
        this.render(elRenderTo);
    }

    Pin.ImageViewer.superclass.constructor.call(this);
};

Ext.extend(Pin.ImageViewer, Ext.util.Observable, {
    tableRowEl : undefined,
    imagesEl : undefined,
    dotsEl: undefined,
    leftEl: undefined,
    rightEl: undefined,
    
    images: undefined,

    render: function(elRenderTo)
    {
        this.images = new Ext.util.MixedCollection();
        
        this.baseEl = elRenderTo;
        
        if(!this.template){
            if(!Pin.ImageViewer.imageViewerTemplate){
                
                Pin.ImageViewer.imageViewerTemplate = new Ext.Template(
                    '<div class="imageviewer"><div class="dots"></div><div class="left"></div><div class="right"></div><div class="images"><table><tr></tr></table></div></div>');
            }
            this.template = Pin.ImageViewer.imageViewerTemplate;
        }
        
        this.el = this.template.overwrite(elRenderTo, null, true);
        
        this.imagesEl = this.el.child("div.images");
        this.tableRowEl = this.el.child("tr");
        this.dotsEl = this.el.child("div.dots");
        
        this.leftEl = this.el.child("div.left");
        this.rightEl = this.el.child("div.right");
        
        this.leftEl.addClassOnOver("over");
        this.rightEl.addClassOnOver("over");
        
        this.leftEl.on("click", this.selectPreviousImage, this);
        this.rightEl.on("click", this.selectNextImage, this);
    },
    
    addImage: function(thumbImageUrl, imageUrl)
    {
        var image = new Pin.Image(this.tableRowEl, this.dotsEl,
            {thumbImageUrl: thumbImageUrl, imageUrl: imageUrl});
            
        this.images.add(imageUrl, image);
        
        if (this.images.getCount() == 1)
        {
            image.select();
            
            this.leftEl.hide();
            this.rightEl.hide();
        }
        else
        {
            this.leftEl.show();
            this.rightEl.show();
        }
        
        image.on("selected", this.imageSelected, this);
    },
    
    imageSelected: function(source)
    {
        var counter = 0;
        
        this.images.each(
            function(item)
            {
                if (item != source)
                {
                    item.deselect();
                }
                else
                {
                    this.imagesEl.scrollTo("left", 102 * counter, true);
                }
                
                counter++;
            }, this);
    },
    
    getCurrentSelectedImageIndex: function()
    {
        var imagesCount = this.images.getCount();
    
        for(var counter = 0; counter < imagesCount; counter++)
        {
            if (this.images.items[counter].isSelected())
                return counter;
        }
        
        return -1;
    },
    
    selectNextImage: function()
    {
        var index = this.getCurrentSelectedImageIndex();
        
        index++;
        
        if (index >= this.images.getCount())
            index = 0;
            
        this.selectImageUsingIndex(index);
    },
    
    selectPreviousImage: function()
    {
        var index = this.getCurrentSelectedImageIndex();
        
        index--;
        
        if (index < 0)
            index = this.images.getCount() - 1;
            
        this.selectImageUsingIndex(index);
    },
    
    selectImageUsingIndex: function(index)
    {
        this.images.items[index].select();
    }
    
}); // end of Pin.ImageViewer

Pin.Image = function(tableRowEl, dotsEl, config){

    Ext.apply(this, config);
    
    this.addEvents({
	    "selected" : true
    });
    
    this.render(tableRowEl, dotsEl);
    
    Pin.Image.superclass.constructor.call(this);
};

Ext.extend(Pin.Image, Ext.util.Observable, {
    tableRowEl: undefined,
    dotsEl: undefined,
    
    imageEl : undefined,
    selected : false,

    render : function(tableRowEl, dotsEl)
    {
        this.tableRowEl = tableRowEl;
        this.dotsEl = dotsEl;
    
        if(!this.template){
            if(!Pin.Image.imageTemplate){
                
                Pin.Image.imageTemplate = new Ext.Template(
                    '<td><div class="image">&nbsp;</div></td>');
                    
                Pin.Image.dotTemplate = new Ext.Template(
                    '<span class="dot">&nbsp;</span>');
            }
            
            this.template = Pin.Image.imageTemplate;
            this.dotTemplate = Pin.Image.dotTemplate;
        }
        
        this.cellEl = this.template.append(tableRowEl, {imageUrl: this.imageUrl}, true);
        this.imageEl = this.cellEl.child("div.image");
        this.imageEl.setStyle("background-image", "url(" + this.thumbImageUrl + ")");
        this.imageEl.on("click", this.click, this);
        
        this.dotEl = this.dotTemplate.append(dotsEl, {}, true);
        this.dotEl.addClassOnOver("over");
        
        this.dotEl.on("click", this.dotClick, this);
    },
    
    select : function()
    {
        if (!this.selected)
        {
            this.selected = true;
            this.dotEl.addClass("selected");
            
            this.fireEvent("selected", this);
        }
    },
    
    deselect: function()
    {
        if (this.selected)
        {
            this.selected = false;
            this.dotEl.removeClass("selected");
        }
    },
    
    dotClick: function()
    {
        this.select();
    },
    
    isSelected: function()
    {
        return this.selected;
    }
}); // end of Pin.Image