var imgZoomer;
var imageViewer;

Event.observe(window, "load", function() {
    var name = "raymond.3d";
    var domain = "gmail";
    var suffix = "com";
    
    var address = "mailto:" + name + "\u0040" + domain + "." + suffix;
    
    $('contact').href = address;    
    
    imageViewer = new ImageViewer("images-container", { 
        totalImages: 7,
        flvs: [ 3, 4, 7 ],
        moreImages: {
            1: 7,
            2: 7
        }
    });
    
    imgZoomer = new ImgZoomer("a", { 
        imagePath: "images/imgzoomer/",
        videoPath: "video/",
        updatePosition: false,
        videoAutoPlay: true,
        closeOnBlur: false
    });
});

var ImageViewer = Class.create();

ImageViewer.DefaultOptions = {
    imagesClass: "image",
    imageSizerClass: "image-sizer",
    imageHolderClass: "image-holder",
    imagePath: "images/work/",
    flvPath: "../flvs/",
    thumbnails: "thumbnails",
    paganator: "paganator",
    flvs: []
};

ImageViewer.prototype = {
    initialize: function(container, options) {
        this.container = $(container);
        this.options = Object.extend(Object.extend({}, ImageViewer.DefaultOptions), options || {});

        this.options.paganator = $(this.options.paganator);
        this.options.thumbnails = $(this.options.thumbnails);

        this.insertImages();

        this.cycler = new Cycler("." + this.options.imagesClass);
        this.cycler.startCycle();

        this.createThumbnails();

        $$("." + this.options.imageHolderClass).each(function(imageHolder) {      
            var rightShadow = new Element("div");
            rightShadow.classNames().add("right-shadow");
            rightShadow.style.height = (parseInt(imageHolder.getHeight()) - 2) + "px";
  
            var bottomShadow = new Element("div");
            bottomShadow.classNames().add("bottom-shadow");
            bottomShadow.style.width = (parseInt(imageHolder.getWidth()) - 2) + "px";
  
            imageHolder.appendChild(rightShadow);
            imageHolder.appendChild(bottomShadow);
        });
        
        $$("." + this.options.imagesClass + " img").each(function(image) {
            this.centerImage(image);
        }.bind(this));
        
        this.thumbnailPages = this.options.thumbnails.childElements();
        this.thumbnailPages.each(function(page) {
           if (page != this.thumbnailPages.first()) page.hide(); 
        }.bind(this));

        this.showPage(1);
    },

    createThumbnails: function() {
        this.pages = Math.ceil(this.options.totalImages / 4);
        var thumbnailCount = 1;

        for (var i = 1; i <= this.pages; i++) {
            var page = new Element("div");          
            var leftDiv = new Element("div");
            var rightDiv = new Element("div");
  
            leftDiv.classNames().set("left");
            rightDiv.classNames().add("right");
  
            page.appendChild(leftDiv);
            page.appendChild(rightDiv);
  
            this.options.thumbnails.appendChild(page);
  
            for (var j = thumbnailCount; j < thumbnailCount + 4 && j <= this.options.totalImages; j++) {              
                var thumbnail = this.createThumbnail(j);
      
                if (j % 4 < 2) {
                    rightDiv.appendChild(thumbnail);
                } else {
                    leftDiv.appendChild(thumbnail);
                }
            }
  
            if (this.pages > 1) this.createPageButton(i);
  
            thumbnailCount = j;
        }
    },

    createThumbnail: function(imageNo) {
        var image = new Image();
        Element.extend(image);
        image.src = this.options.imagePath + "thumb_image" + imageNo + ".jpg";
        
        var anchor = new Element("a");
        anchor.href = this.options.imagePath + "image" + imageNo + ".jpg";
        
        this.setupAnchor(imageNo, anchor);
        
        anchor.appendChild(image);

        var thumbnail = new Element("div");
        thumbnail.classNames().set(this.options.imageHolderClass + " thumb");
        thumbnail.appendChild(anchor); 

        return thumbnail;
    },

    createPageButton: function(page) {
        var button = new Element("a");
        button.href = "#";
        button.onclick = this.showPage.bind(this, page);

        var buttonHolder = new Element("li");      
        buttonHolder.appendChild(button);

        this.options.paganator.appendChild(buttonHolder);

        return button;
    },

    showPage: function(pageNo) {
        if (Effect.Queues.get('paganator').size() != 0) return;
        
        pageNo--;
        
        this.options.paganator.childElements().each(function(pageSelector) {
            pageSelector.childElements().first().classNames().remove("on");
        }.bind(this));

        if (this.pages > 1) this.options.paganator.childElements()[pageNo].childElements().first().classNames().add("on");

        var page = this.thumbnailPages[pageNo];
        new Effect.Appear(page, { duration: 0.5, queue: { position: "end", scope: "paganator" } });

        this.thumbnailPages.each(function(thumbnailPage) {  
            if (thumbnailPage != page) {
                new Effect.Fade(thumbnailPage, { duration: 0.5 });
            } 
        });

        return false;
    },
    
    setupAnchor: function(i, anchor) {
        if (this.options.flvs.include(i)) {
            anchor.rel = this.options.flvPath + "flv" + i + ".flv";
        }

        if (this.options.moreImages[i]) {
            var srcs = [];
            for (var j = 1; j <= this.options.moreImages[i]; j++) {
                srcs.push(this.options.imagePath + "image" + i + "/image" + j + ".jpg");
            }
            anchor.rel = srcs.join(',');
        }
    },

    insertImages: function() {
        for (var i = 1; i <= this.options.totalImages; i++) {
            var anchor = new Element("a");
            anchor.href = this.options.imagePath + "image" + i + ".jpg";
            anchor.classNames().add(this.options.imagesClass);

            this.setupAnchor(i, anchor);
  
            var imageSizer = new Element("div");
            imageSizer.classNames().add("image-sizer");
  
            imageSizer.style.width = this.container.getWidth() + "px";
            imageSizer.style.height = this.container.getHeight() + "px";
            imageSizer.style.position = "absolute";
  
            var image = new Image();
            Element.extend(image);
            image.src = this.options.imagePath + "medium_image" + i + ".jpg";
            image.style.position = "absolute";
  
            anchor.appendChild(imageSizer);
            anchor.appendChild(image);
  
            this.container.appendChild(anchor);
        }

        this.thumbnails = this.container.next;      
    },

    centerImage: function(image) {
        if (!image.complete) {
            setTimeout(this.centerImage.bind(this, image));
            return;
        }

        image.style.top = (this.container.getHeight() - image.height) / 2 + "px";
        image.style.left = (this.container.getWidth() - image.width) / 2 + "px";
    }
};