/* ============================================================ */
/* --- Snap 2 Zero | Hauptcontainer verankern bei kl. Screens - */
/* --- written by heiko groeger ©'2011 [www.fivevisions.de] --- */
/* ============================================================ */


//////////////////////////////////////////////////////
/*****************************************************
Bei kleinen Auflösungen (z.B. 1024 Pixel Weite)
den CSS-Hauptcontainer links bzw. oben fest verankern!
######################################################
Das Script einfach nur in den HEAD kopieren:
<script type="text/JavaScript" src="js/snap2zero.js"></script>
//////////////////////////////////////////////////////
*****************************************************/


// Config
/* ============================================================ */
container_name = "content" // ID des äußersten CSS-Containers
limit_weite    = 962       // Mindestweite des Containers
limit_hoehe    = 613       // Mindesthöhe des Containers
cont_left      = "50%"     // Default CSS: left
cont_top       = "50%"     // Default CSS: top
cont_marg_left = "-480px"  // Default CSS: margin-left
cont_marg_top  = "-305px"  // Default CSS: margin-top
snap_width     = true      // Script auf Weite anwenden
snap_height    = true      // Script auf Höhe anwenden
/* ============================================================ */


// Funktion: Snap2Zero
//////////////////////
function snap2zero(){
if (container_name == ""){
alert ("Snap2Zero:\nBitte den Container definieren! (siehe CSS)")
}
else {
	cn = container_name
	reale_weite = getSnapSize("w")
	reale_hoehe = getSnapSize("h")
	// Snap2Width
	/////////////
	if (snap_width){
		// Snap2Zero Width
		if (reale_weite <= limit_weite){
		document.getElementById(cn).style.left       = "0px"
		document.getElementById(cn).style.marginLeft = "0px"
		}
		// Reset Width
		if (reale_weite > limit_weite && document.getElementById(cn).style.marginLeft == "0px"){
		document.getElementById(cn).style.left       = cont_left
		document.getElementById(cn).style.marginLeft = cont_marg_left
		}
	}
	// Snap2Height
	//////////////
	if (snap_height){
		// Snap2Zero Height
		if (reale_hoehe <= limit_hoehe){
		document.getElementById(cn).style.top        = "0px"
		document.getElementById(cn).style.marginTop  = "0px"
		}
		// Reset Height
		if (reale_hoehe > limit_hoehe && document.getElementById(cn).style.marginTop == "0px"){
		document.getElementById(cn).style.top        = cont_top
		document.getElementById(cn).style.marginTop  = cont_marg_top
		}
	}
}
}


// Funktion: Reale Weite des Viewport (X-Browser)
/////////////////////////////////////////////////
function getSnapSize(wh){
var myWidth = 0, myHeight = 0
	if (typeof(window.innerWidth) == "number"){
	// Non-IE
	myWidth = window.innerWidth
	myHeight = window.innerHeight
	}
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
	// IE 6+ in 'standards compliant mode'
	myWidth = document.documentElement.clientWidth
	myHeight = document.documentElement.clientHeight
	}
	else if (document.body && (document.body.clientWidth || document.body.clientHeight)){
	// IE 4 compatible
	myWidth = document.body.clientWidth
	myHeight = document.body.clientHeight
	}
// return [ myWidth, myHeight ]
if (wh == "w"){ return [ myWidth ] }
if (wh == "h"){ return [ myHeight ] }
}


// Event-Handler nach DOM-Methode
// Aufruf: addSnapEvent(window, "load", snap2zero)
//////////////////////////////////////////////////
function addSnapEvent(obj,type,fn){
   if (obj.addEventListener){
      obj.addEventListener(type,fn,false)
   }
   else if (obj.attachEvent){
      obj.attachEvent("on" + type, function(){
         return fn.call(obj, window.event)
      })
   }
}


// Script ausführen beim Laden und Vergößern der Seite
//////////////////////////////////////////////////////
addSnapEvent(window, "load", snap2zero)
addSnapEvent(window, "resize", snap2zero)