function opacity(id, opacStart, opacEnd, millisec) {
        //speed for each frame
        var speed = Math.round(millisec / 100);
        var timer = 0;

        //determine the direction for the blending, if start and end are the same nothing happens
        if(opacStart > opacEnd) {
                for(i = opacStart; i >= opacEnd; i--) {
                        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                        timer++;
                }
        } else if(opacStart < opacEnd) {
                for(i = opacStart; i <= opacEnd; i++)
                        {
                        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                        timer++;
                }
        }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
        var object = document.getElementById(id).style; 
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
        //if an element is invisible, make it visible, else make it ivisible
        if(document.getElementById(id).style.opacity == 50) {
                opacity(id, 50, 100, millisec);
        } else {
                opacity(id, 100, 50, millisec);
        }
        
        
      
}

function blendimage(divid, imageid, imagefile, millisec) {
        var speed = Math.round(millisec / 100);
        var timer = 0;
        
        //set the current image as background
        document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
        
        //make image transparent
        changeOpac(0, imageid);
        
        //make new image
        document.getElementById(imageid).src = imagefile;

        //fade in image
        for(i = 0; i <= 100; i++) {
                setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
                timer++;
        }
}

function currentOpac(id, opacEnd, millisec) {
        //standard opacity is 100
        var currentOpac = 100;
        
        //if the element has an opacity set, get it
        if(document.getElementById(id).style.opacity < 100) {
                currentOpac = document.getElementById(id).style.opacity * 100;
        }

        //call for the function that changes the opacity
        opacity(id, currentOpac, opacEnd, millisec)
}

function resize(){ 
	var viewportwidth;
 	var viewportheight;
    if (typeof window.innerWidth != 'undefined'){
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 	}else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 	}else{
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 	}
 	
 	bgImageInfo=document.getElementById('imgBg');
 	
 	
 	aspect = bgImageInfo.getAttribute('height')  / bgImageInfo.getAttribute('width');
 	
 	var newHeight = viewportwidth*aspect;
 	var newWidth = viewportwidth;
 	   
    //console.log(newHeight + '!'+ viewportheight );
    if(newHeight<viewportheight){
    	newHeight= viewportheight;
    	newWidth = newHeight/aspect;
    	 
    }
    // console.log('NEW: '+newHeight + '!'+ viewportheight );
    bgImageInfo.style.height= newHeight+ 'px';
    bgImageInfo.style.width=  newWidth + 'px'; 
    document.getElementById('full_background').style.width=newWidth + 'px';
    document.getElementById('full_background').style.height=newHeight+ 'px';
	//height
	showBg();
}
function showBg(){
	
	//shiftOpacity('imgBg', 200);
	var gb=document.getElementById('imgBg');
	if(gb!=null) currentOpac('imgBg', 100, 0);
}


if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", resize, false);
  document.addEventListener("DOMContentLoaded", showBg, false);
}else{
	window.onload = function (){
		resize();
		showBg();
	};


}

window.onresize=function (){
		resize();
	};