var Spry;
if (!Spry) 
    Spry = {};
if (!Spry.Widget) 
    Spry.Widget = {};

Spry.Widget.ThumbViewer = function(ele, options){
    Spry.Utils.Notifier.call(this);
    
    this.element = Spry.$(ele);
    this.loader = new Spry.Utils.ImageLoader();
    this.nextImageID = 0;
    
    this.maxDimension = 75;
    this.thumbWidth = 75;
    this.thumbHeight = 43;
    
    this.tnLinkSelector = "a[href]";
    this.tnImageSelector = "a[href] > img";
    
    this.currentImage = null;
    
    this.behaviorsArray = [];
    
    this.attachBehaviors();
    this.select(0);
};

Spry.Widget.ThumbViewer.prototype = new Spry.Utils.Notifier();
Spry.Widget.ThumbViewer.prototype.constructor = Spry.Widget.ThumbViewer;

Spry.Widget.ThumbViewer.setOptions = function(obj, optionsObj, ignoreUndefinedProps){
    if (!optionsObj) 
        return;
    for (var optionName in optionsObj) {
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined) 
            continue;
        obj[optionName] = optionsObj[optionName];
    }
};

Spry.Widget.ThumbViewer.prototype.attachBehaviors = function(){
    var self = this;
    if (this.element) 
        this.getThumbImages().forEach(function(img){
            if (img.src) 
                self.preloadImage(img);
        });
};

Spry.Widget.ThumbViewer.prototype.attachHoverBehaviors = function(img){
    var a = Spry.Utils.getAncestor(img, "a[href]");
    if (a) {
        var self = this;
        Spry.Utils.addEventListener(a, "mouseover", function(e){
            self.growThumbnail(img);
            return false;
        }, false);
        Spry.Utils.addEventListener(a, "mouseout", function(e){
            self.shrinkThumbnail(img);
            return false;
        }, false);
        Spry.Utils.addEventListener(a, "click", function(e){
            self.select(img);
            return false;
        }, false);
    }
    
};

Spry.Widget.ThumbViewer.prototype.preloadImage = function(img){
    if (this.loader && img.src) {
        var self = this;
        this.loader.load(img.src, function(url, loaderImage){
            img.spryOrigWidth = loaderImage.width;
            img.spryOrigHeight = loaderImage.height;
            self.attachHoverBehaviors(img);
        }, 10);
        
        // var a = Spry.Utils.getAncestor(img, "a[href]");
        // if (a) this.loader.load(a.href);
    }
};

Spry.Widget.ThumbViewer.prototype.cancelBehavior = function(id){
    if (this.behaviorsArray[id]) {
        this.behaviorsArray[id].cancel();
        this.behaviorsArray[id] = null;
    }
};

Spry.Widget.ThumbViewer.prototype.sizeAndPosition = function(img, toX, toY, toWidth, toHeight, callback){
    var id = img.spryID;
    
    this.cancelBehavior(id);
    var effectCluster = new Spry.Effect.Cluster({
        finish: callback
    });
    var moveEffect = new Spry.Effect.Move(img, Spry.Effect.getPosition(img), {
        x: toX,
        y: toY,
        units: "px"
    }, {
        duration: 400
    });
    var sizeEffect = new Spry.Effect.Size(img, Spry.Effect.getDimensions(img), {
        width: toWidth,
        height: toHeight,
        units: "px"
    }, {
        duration: 400
    });
    
    effectCluster.addParallelEffect(moveEffect);
    effectCluster.addParallelEffect(sizeEffect);
    
    //effectCluster.finish = callback;
    
    this.behaviorsArray[id] = effectCluster;
    this.behaviorsArray[id].start();
};

Spry.Widget.ThumbViewer.prototype.growThumbnail = function(img){
    if (!img.spryOrigWidth || !img.spryOrigHeight) 
        return;
    
    Spry.Utils.addClassName(img, "inFocus");
    img.style.zIndex = 150;
    
    if (!img.spryID) 
        img.spryID = ++this.nextImageID;
    
    var w = img.spryOrigWidth;
    var h = img.spryOrigHeight;
    
    var ratio = this.maxDimension / (w > h ? w : h);
    
    w *= ratio;
    h *= ratio;
    var x = (this.thumbWidth - w) / 2;
    var y = (this.thumbHeight - h) / 2;
    
    var self = this;
    this.sizeAndPosition(img, x, y, w, h, function(b){
        self.behaviorsArray[img.spryID] = null;
    });
};

Spry.Widget.ThumbViewer.prototype.shrinkThumbnail = function(img){
    var self = this;
    Spry.Utils.addClassName(img, "inFocus");
    img.style.zIndex = 1;
    this.sizeAndPosition(img, 0, 0, this.thumbWidth, this.thumbHeight, function(b){
        self.behaviorsArray[img.spryID] = null;
        Spry.Utils.removeClassName(img, "inFocus");
    });
};

Spry.Widget.ThumbViewer.prototype.select = function(img){
    var imgs = this.getThumbImages();
    
    img = (typeof img == "number") ? imgs[img] : Spry.$(img);
    if (!img) 
        return;
    
    if (this.currentImage) 
        Spry.Utils.removeClassName(this.currentImage, "selectedThumbnail");
    Spry.Utils.addClassName(img, "selectedThumbnail");
    this.currentImage = img;
    
    var a = Spry.Utils.getAncestor(img, "a[href]");
    if (a) {
        //this.notifyObservers("onSelect", a.href);
        this.notifyObservers("onSelect", a);
        if (img == imgs[0]) 
            this.notifyObservers("onFirstSelect", a);
        if (img == imgs[imgs.length - 1]) 
            this.notifyObservers("onLastSelect", a);
    }
};

Spry.Widget.ThumbViewer.prototype.previous = function(){
    var img = this.currentImage;
    var imgs = this.getThumbImages();
    
    for (var i = 0; i < imgs.length; i++) {
        if (imgs[i] == img) {
            if (--i < 0) 
                i = imgs.length - 1;
            this.select(imgs[i]);
            return;
        }
        prevImg = imgs[i];
    }
};

Spry.Widget.ThumbViewer.prototype.next = function(){
    var img = this.currentImage;
    var imgs = this.getThumbImages();
    
    for (var i = 0; i < imgs.length; i++) {
        if (imgs[i] == img) {
            if (++i >= imgs.length) 
                i = 0;
            this.select(imgs[i]);
            return;
        }
        prevImg = imgs[i];
    }
};

Spry.Widget.ThumbViewer.prototype.getThumbLinks = function(){
    return Spry.$$(this.tnLinkSelector, this.element);
};

Spry.Widget.ThumbViewer.prototype.getThumbImages = function(){
    return Spry.$$(this.tnImageSelector, this.element);
};

Spry.Widget.ThumbViewer.prototype.getCurrentThumbLink = function(){
    return Spry.Utils.getAncestor(this.currentImage, "a[href]");
};

Spry.Widget.ThumbViewer.prototype.getCurrentThumbImage = function(){
    return this.currentImage;
};

Spry.Widget.ThumbViewer.prototype.getThumbCount = function(){
    return Spry.$$(this.tnImageSelector, this.element).length;
};