var portfolio = {
    
    init: function() {
    //map element events
    
        $$('.imageThumbnail').each(function(element) {
            element.observe('mouseover', portfolio.popupHandler.imageMouseOver.bindAsEventListener(portfolio));
            element.observe('mouseout', portfolio.popupHandler.imageMouseOut);
         }.bind(this));
    },
    
    popupHandler: {
        
        currentPopup: null,
        
        createImagePopup: function(imagePath) {
            portfolio.popupHandler.currentPopup = document.createElement('img');
            portfolio.popupHandler.currentPopup.style.position = 'absolute';
            portfolio.popupHandler.currentPopup.style.width = '300px';
            document.getElementById('popupContainer').appendChild(portfolio.popupHandler.currentPopup);
        },
        
        imageMouseOver: function(event) {
            
            var targetElement = Event.element(event);
            
            var tempY = targetElement.cumulativeScrollOffset()[1] + targetElement.viewportOffset()[1] + targetElement.getHeight();
            var tempX = targetElement.cumulativeScrollOffset()[0] + targetElement.viewportOffset()[0] + targetElement.getWidth();
            if(tempX == 0){
                tempX = 0;
            }else if(tempX + 300 > portfolio.popupHandler.getPageVisibleWidth()){
                tempX=portfolio.popupHandler.getPageVisibleWidth() - 300;
            };
            
            if(tempY + 250> portfolio.popupHandler.getPageVisibleHeight() + document.viewport.getScrollOffsets()[1]){
                tempY= portfolio.popupHandler.getPageVisibleHeight() + document.viewport.getScrollOffsets()[1] - 250;
            };
            
            if(!portfolio.popupHandler.currentPopup){ portfolio.popupHandler.createImagePopup()};
            portfolio.popupHandler.currentPopup.style.left = tempX;
            portfolio.popupHandler.currentPopup.style.top = tempY;
            portfolio.popupHandler.currentPopup.setAttribute('src', targetElement.getAttribute('altsrc'));
            portfolio.popupHandler.currentPopup.style.display = 'block';
            portfolio.popupHandler.currentPopup.style.border ='1px solid gray';
            
        },
        
        imageMouseOut: function() {
            portfolio.popupHandler.currentPopup.style.display = 'none';
        },
        
        getPageYOffset: function() {
			if(navigator.appName=="Netscape")
				return window.pageYOffset;
			if(navigator.appName.indexOf("Microsoft") != -1)
				return (document.compatMode && document.compatMode != "BackCompat")? document.documentElement.scrollTop : document.body.scrollTop;
		},
		getPageVisibleHeight: function() {
			//if(navigator.appName=="Netscape")
			if(typeof window.innerHeight != 'undefined')
					return window.innerHeight;
			if(navigator.appName.indexOf("Microsoft") != -1)
				return (typeof(document.documentElement) != 'undefined' && typeof(document.documentElement.clientHeight) != 'undefined' && document.documentElement.clientHeight != 0) ? document.documentElement.clientHeight : document.getElementsByTagName('body')[0].clientHeight;
		},
		getPageVisibleWidth: function() {
			//if(navigator.appName=="Netscape")
			if(typeof window.innerWidth != 'undefined') return window.innerWidth;
			if(navigator.appName.indexOf("Microsoft") != -1)
				return (typeof(document.documentElement) != 'undefined' && typeof(document.documentElement.clientWidth) != 'undefined' && document.documentElement.clientWidth != 0) ? document.documentElement.clientWidth : document.getElementsByTagName('body')[0].clientWidth;
		}
    }
};