window.addEvent("domready", function(){
	new Asset.images(['/img/company/overlay-close.png', '/img/company/overlay-shadow-1.png']);
});

var AppleModal = new Class({
	initialize: function(selector) {
		var self = this;
		this.current = null;
		this.minWidth = 1002;
		this.collection = $$(selector);
		this.count = this.collection.length;
		this.overlay = null;
        this.collection.addEvent('click', function() {
        	self.current = this.getProperty('big');
        	self.showOverlay();
        });
        this.elementsToHide = $$('select', 'textarea', 'embed', 'object');
		for(i = 0; i < this.count; i++) {
			var el = this.collection[i];
			new Asset.image(el.getProperty('big'));
		}
		if(window.ie6) {
			this.w = 860;
			this.h = 612;
		}
		else {
			this.w = 990;
			this.h = 735;
		}
	},

	getBigSrc: function(smallSrc) {
		for(i = 0; i < this.count; i++) {
			var el = this.collection[i];
			if(el.getProperty('src') == smallSrc)
				return el.getProperty('big');
		}
		return false;
	},

    showOverlay: function() {
    	this.elementsToHide.setStyle('visibility', 'hidden');
		var size = $(window).getSize();
        this.overlay = new Element('div', {
            id: 'overlay',
            styles: {
            	'width': (size.size.x > this.minWidth) ? size.size.x : size.scrollSize.x,//size.scrollSize.x,
                'height': size.scrollSize.y,
                'opacity': 0
            }
        });
        this.overlay.injectInside(document.body);
        window.onresize = this.onResize.bindAsEventListener(this);
        window.onscroll = this.onResize.bindAsEventListener(this);
        this.fx = new Fx.Style('overlay', 'opacity', {duration:60, onComplete: this.showContent.bind(this)});
        this.fx.start(0, 0.3);

    },

    showContent: function() {
    	var self = this;
    	var size = $(window).getSize();
        this.content = new Element('div', {
        	id: 'overlay-content',
            styles: {
            	width: 0,
            	height: 0,
            	left: 0,
            	top: 0
            }
        });
        this.close_icon = new Element('div', {
        	id: 'overlay-close',
            events: {
            	'click': function() {
            		self.close();
				}
            }
        });
        this.content.injectInside($(document.body));
        this.cfx = new Fx.Styles(this.content,
        	{
        		duration:320,
        		fps:300,
        		onComplete: function() {
        			self.setContentArea(self.current);
        			self.setThumbnails();
        			self.close_icon.injectInside(self.content);
        			self.close_icon.fix();
				}
			}
        );
        this.cfx.start({
        	left: [(size.size.x > self.w) ? size.scroll.x + parseInt((size.size.x - self.w) / 2) : 0],
        	top: [(size.size.y > self.h) ? size.scroll.y + parseInt((size.size.y - self.h) / 2) : 0],
        	width: [self.w],
        	height: [self.h]
        });

    },

    setThumbnails: function() {
    	var self = this;
        this.thumbnails = new Element('div', {
        	id: 'overlay-thumbnails',
        	styles: {
        		opacity:1
        	}
        });
        this.thumbnails.injectInside(this.content);
		for(i = 0; i < this.count; i++) {
			var el = this.collection[i].clone();
			if(el.getProperty('big') == this.current)
				el.addClass('selected');
			el.addEvent('click', function() {
				self.setContentImage(this.getProperty('big'));
				self.thumbnails.getChildren().removeClass('selected');
				this.addClass('selected');
			}).setProperty('height', '63').injectInside(this.thumbnails);
		}
    },

    setContentArea: function(bigSrc) {
        this.contentArea = new Element('div', {
        	id: 'overlay-content-area',
        	styles: {
        		backgroundImage:'url('+bigSrc+')',
        		opacity:0
        	}
        }).injectInside(this.content);
        new Fx.Style(this.contentArea, 'opacity', {duration:200}).start(1);

	},

    setContentImage: function(bigSrc) {
    	this.contentArea.setStyles({opacity: 0, backgroundImage: 'url('+bigSrc+')'});
        new Fx.Style(this.contentArea, 'opacity', {duration:200}).start(1);

	},


    onResize: function() {
    	var self = this;
        var size = $(window).getSize();
        this.overlay.setStyle('width', (size.size.x > this.minWidth) ? size.size.x : size.scrollSize.x);
        this.content.setStyles({
        	left: (size.size.x > self.w) ? size.scroll.x + parseInt((size.size.x - self.w) / 2) : 0,
        	top: (size.size.y > self.h) ? size.scroll.y + parseInt((size.size.y - self.h) / 2) : 0
        });
    },

    close: function() {
    	this.close_icon.remove();
    	this.thumbnails.remove();
    	this.content.remove();
    	this.overlay.remove();
    	this.elementsToHide.setStyle('visibility', 'visible');
    }




});