// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// - - - - - - ( event listener ) - - - - - - - -
// by Scott Andrew - http://scottandrew.com
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
function addEvent(obj, evType, fn)
	{
	if (obj.addEventListener)
		{
		obj.addEventListener(evType, fn, false); 
		return true;
		}
	else if (obj.attachEvent)
		{
		var r = obj.attachEvent('on'+evType, fn);
		return r;
		}
	else
		{
		return false;
		}
	}


// event listeners eventually to replace the one above
function addEventToObject(obj, evt, func)
	{
	var oldhandler = obj[evt];
	if (typeof obj[evt] != 'function')
		{
		obj[evt] = func;
		}
	else
		{
		obj[evt] = function()
			{
			oldhandler();
			func();
			}
		}
	}


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// - - - - - - ( sliding weather panorama ) - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// set initial global variables
var hsMovedBefore = 0;
var hsBgXOffset = 0; // equal to the amount of the image sitting offscreen
var hsPrevWindowWidth = window.innerWidth;
var hsT;

function hsPrep()
	{
	// create buttons
	hsCreateButtons();

	// set ids
	var headerDiv = document.getElementById('header_panorama');
	var buttonLeft = document.getElementById('buttonLeft');
	var buttonRight = document.getElementById('buttonRight');

	// set event listeners on #header
	addEventToObject(headerDiv, 'onmouseover', function() {hsButtonDisplay('show')});
	addEventToObject(headerDiv, 'onmouseout', function() {hsButtonDisplay('hide')});
	addEventToObject(headerDiv, 'onmouseout', function() {hsLookStop()}); // fix for FF PC

	// set event listeners on #buttonLeft
	addEventToObject(buttonLeft, 'onmouseover', function() {hsLookGo('left')});
	addEventToObject(buttonLeft, 'onmouseout', function() {hsLookStop()});
	
	// set event listeners on #buttonRight
	addEventToObject(buttonRight, 'onmouseover', function() {hsLookGo('right')});
	addEventToObject(buttonRight, 'onmouseout', function() {hsLookStop()});

	// set event listeners on window
	addEventToObject(window, 'onresize', function() {hsWindowResize()});
	}

// create the scroll buttons
function hsCreateButtons()
	{
	// create the two buttons
	var newLeftDiv = document.createElement('div');
	newLeftDiv.setAttribute('id', 'buttonLeft');
	var newRightDiv = document.createElement('div');
	newRightDiv.setAttribute('id', 'buttonRight');

	// append the two buttons
	document.getElementById('header_panorama').appendChild(newLeftDiv);
	document.getElementById('header_panorama').appendChild(newRightDiv);
	
	// style the left button
	document.getElementById('buttonLeft').style.backgroundImage = 'url(http://www.fc-bnei-yehuda.co.il/sheepwool/design_70/images/button-left-2.png)';
	document.getElementById('buttonLeft').style.backgroundPosition = '0px 49px';
	document.getElementById('buttonLeft').style.cursor = 'default';
	document.getElementById('buttonLeft').style.display = 'none';
	document.getElementById('buttonLeft').style.height = '49px';
	document.getElementById('buttonLeft').style.left = '20px';
	document.getElementById('buttonLeft').style.position = 'absolute';
	document.getElementById('buttonLeft').style.top = '61px';
	document.getElementById('buttonLeft').style.width = '91px';
	
	// style the right button
	document.getElementById('buttonRight').style.backgroundImage = 'url(http://www.fc-bnei-yehuda.co.il/sheepwool/design_70/images/button-right-2.png)';
	document.getElementById('buttonRight').style.backgroundPosition = '0px 49px';
	document.getElementById('buttonRight').style.cursor = 'default';
	document.getElementById('buttonRight').style.display = 'none';
	document.getElementById('buttonRight').style.height = '49px';
	document.getElementById('buttonRight').style.position = 'absolute';
	document.getElementById('buttonRight').style.right = '20px';
	document.getElementById('buttonRight').style.top = '61px';
	document.getElementById('buttonRight').style.width = '91px';
	}


// starts background-repositioning
function hsLookGo(direction)
	{
	// set headerLink
	var ahrefs = document.getElementById('header_panorama').getElementsByTagName('a');
	var headerLink = ahrefs[0];

	// if JS has not moved the background-image before (this will only happen once after page load)
	if (hsMovedBefore == 0)
		{
		var xOffSet = 0;
		headerLink.style.backgroundPosition = "0px 0px";
		hsBgXOffset = xOffSet;
		hsMovedBefore = 1;
		}

	// if we're asking to look to the right
	if (direction == 'right')
		{
		// is there enough picture to allow a look to the right?
		if ((750+hsBgXOffset+15) < 1743)
			{
			document.getElementById('buttonRight').style.backgroundPosition = '0px 0px';
			hsBgXOffset += 15;
			headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";
			}
		else
			{
				var left = 1743 - (750+hsBgXOffset);
				if (left > 0) {
					hsBgXOffset += left;
					headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";
				} else {
					document.getElementById('buttonRight').style.display = 'none';
					document.getElementById('buttonRight').style.cursor = 'pointer';
					return true;
				}
			}
		}
	// if we're asking to look to the left
	else if (direction == 'left')
		{
		// is there enough picture to allow a look to the left?
		if (hsBgXOffset > 15)
			{
			document.getElementById('buttonLeft').style.backgroundPosition = '0px 0px';
			hsBgXOffset -= 15;
			headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";

			// we only have to run this once here for use right at the very start because after that the onmouseout event listeners for the buttons run it
			hsButtonDisplay('show');
			}
		else
			{
				var left = hsBgXOffset;
				if (left > 0) {
					document.getElementById('buttonLeft').style.backgroundPosition = '0px 0px';
					hsBgXOffset -= left;
					headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";
				} else {
					document.getElementById('buttonLeft').style.display = 'none';
					document.getElementById('buttonLeft').style.cursor = 'pointer';
					return true;
				}
			}
		}

	// wait a bit then run the function again
	hsT = setTimeout(function(){hsLookGo(direction)}, 60);
	return true;
	}

// stops background-repositioning
function hsLookStop()
	{
	clearTimeout(hsT);
	document.getElementById('buttonLeft').style.backgroundPosition = '0px 49px';
	document.getElementById('buttonRight').style.backgroundPosition = '0px 49px';
	}


// show and hide the scroll buttons
function hsButtonDisplay(action)
	{
	// hide
	if (action == 'hide')
		{
		// hide buttons
		document.getElementById('buttonLeft').style.display = 'none';
		document.getElementById('buttonRight').style.display = 'none';
		}
	// show
	else if (action == 'show')
		{
		// if js has moved the background-image before
		if (hsMovedBefore == 1)
			{
			// is there enough picture to allow a look to the left?
			if (hsBgXOffset > 15)
				{	
					document.getElementById('buttonLeft').style.display = 'block';
				}
			// is there enough picture to allow a look to the right?
			if (750+hsBgXOffset + 15 < 1743)
				{
				document.getElementById('buttonRight').style.display = 'block';
				}
			}
		
		// if js has not moved the background-image before
		else if (hsMovedBefore == 0)
			{
			document.getElementById('buttonRight').style.display = 'block';
			}
		}
	else
		{
		// hide buttons
		document.getElementById('buttonLeft').style.display = 'none';
		document.getElementById('buttonRight').style.display = 'none';
		}
	}


// reposition the background image when the window has been resized
function hsWindowResize()
	{
	// set vars
	var ahrefs;
	var headerLink;

	// if the js has already moved the background-image we run this, otherwise we leave it positioned as it originally is using "top right"
	if (hsMovedBefore == 1)
		{
		// if the window is wider than the width of the background-image
		if ((750 > 1743) || (hsPrevWindowWidth > 1743))
			{
			ahrefs = document.getElementById('header_panorama').getElementsByTagName('a');
			headerLink = ahrefs[0];
			headerLink.style.backgroundPosition = "bottom left";
			hsBgXOffset = (1743 - 750);
			hsPrevWindowWidth = 750;
			}
		// else if the window is narrower than the width of the background-image
		else
			{
			// the resized window got narrower
			if (hsPrevWindowWidth > 750)
				{
				ahrefs = document.getElementById('header_panorama').getElementsByTagName('a');
				headerLink = ahrefs[0];
				hsBgXOffset += (hsPrevWindowWidth - 750);
				headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";
				hsPrevWindowWidth = 750;
				}
			// the resized window got wider
			else if (hsPrevWindowWidth < 750)
				{
				ahrefs = document.getElementById('header_panorama').getElementsByTagName('a');
				headerLink = ahrefs[0];
				hsBgXOffset -= (750 - hsPrevWindowWidth);
				headerLink.style.backgroundPosition = "-"+hsBgXOffset+"px 0px";
				hsPrevWindowWidth = 750;
				}
			}
		}
	}