var current = "projectImage0";
var currentSubImage = "image0";
var index = 0;


 function showcontent(id, imageid)
        {

            currentSubImage = "image0";
            document.getElementById(current).className = document.getElementById(current).className.replace("focus", "");
            document.getElementById(imageid).className += " focus";
            current = imageid;
	        var ic = document.getElementById("item_content");
	        ic.style.display = "block";
	        displayLoader();
	        ajaxFetcher.FetchProject(id, section, showcontent_callback);
        }       
        
function leftScroll()
        {
            if(doScrollLeft)
            {
                heroOffset += 396;
                document.getElementById("projectHeroImagesOverflow").style.top = heroOffset.toString() + "px";
                checkScrollButtons();
            }
        }
        function rightScroll()
        {
            if(doScrollRight)
            {
                heroOffset -= 396;
                document.getElementById("projectHeroImagesOverflow").style.top = heroOffset.toString() + "px";
                checkScrollButtons();
            }
        }
function setSelected(id)
{
    var d = document.getElementById(id);
    if(d)
        d.className += " selected";
}

function unsetSelected(id)
{
    var d = document.getElementById(id);
    if(d)
        d.className = document.getElementById(id).className.replace("selected", "");
}

function swapImage(imageid)
{
   var newFocus = document.getElementById(imageid);
   document.getElementById(currentSubImage).className = "";
   newFocus.className = "focus";
   currentSubImage = imageid;
   change_hero(newFocus.src);
}

function checkRightScroll(i)
{
    if (i > 0)
        document.getElementById('rightBtn').style.visibility = 'visible';
    else
        document.getElementById('rightBtn').style.visibility = 'hidden';
}

//function leftScroll()
//{
//    index+=39;
//    document.getElementById('imageContainerOverflow').style.top = index.toString()+'px';
//    checkRightScroll(39 + index);
//    if (index == 0)
//        document.getElementById('leftBtn').style.visibility = 'hidden';
//}

//function rightScroll()
//{
//    index-=39;
//    document.getElementById('imageContainerOverflow').style.top = index.toString()+'px';
//    document.getElementById('leftBtn').style.visibility = 'visible';
//    checkRightScroll(index);
//}

//////////////////////////////////////////////////
// AJAX Functionality
//////////////////////////////////////////////////
function showcontent_callback(res)
{
	hideLoader();
	var ic = document.getElementById("item_content");
	if (res.value)
	{
		ic.innerHTML = res.value.Html;
		if (res.value.Assets)
		{
			output_images(res.value.Assets);
		}
	}
	else
	{
		ic.style.display = "none";
	}
}

function closecontent()
{
	var ic = document.getElementById("item_content");
	ic.innerHTML = "";
	ic.style.display = "none";
}

// Displays loader for AJAX calls
function displayLoader()
{
	var l = document.getElementById("loader");
	l.style.display = "block";
}

//Hides loader after AJAX calls
function hideLoader()
{
	var l = document.getElementById("loader");
	l.style.display = "none";
}

function output_images(arr)
{
	for (var i = 0; i < arr.length; i++)
	{
		if (i == 0)
		{
			change_hero ("/projects/projectImages/" + arr[i]);
		}
		var setSelected = (i == 0) ? true : false;

		create_thumbnail_instance(arr[i], "image" + i, setSelected);
	}
}

function create_thumbnail_instance(filename, id, setSelected)
{
	var a = document.createElement("a");
	a.href="#";
	
	if (typeof document.implementation != 'undefined' && document.implementation.hasFeature('Events', '2.0'))
	{
		a.addEventListener('click', thumbnail_click_listener, false);
		a.addEventListener('mouseover', thumbnail_over_listener, false);
		a.addEventListener('mouseout', thumbnail_out_listener, false);
	}
	else if (typeof document.attachEvent != 'undefined')
	{
		a.attachEvent('onclick', thumbnail_click_listener);
		a.attachEvent('onmouseover', thumbnail_over_listener);
		a.attachEvent('onmouseout', thumbnail_out_listener);
	}
	
	var t = document.createElement("img");
	if (setSelected) t.className = "focus";
	else t.className = "";
	t.src = "/projects/projectImages/" + filename;
	t.id = id;
	
	a.appendChild(t);
	
	var d = document.getElementById("imageContainerOverflow");
	d.appendChild(a);
}

//Used for attaching onmouseover and onmouseout events to the shoe instances
function thumbnail_click_listener(event)
{
	//swapImage((event.target || event.srcElement).src);
	swapImage((event.target || event.srcElement).id);
}

function thumbnail_over_listener(event)
{
	setSelected((event.target || event.srcElement).id);
}

function thumbnail_out_listener(event)
{
	unsetSelected((event.target || event.srcElement).id);
}

function change_hero(src)
{
	var hero = document.getElementById("heroImage");
	hero.src = src;
}