var panel_box = document.getElementById("panels");

function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}


function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}

function insertAfter(new_elem, target_elem) {
	parent = target_elem.parentNode;
	if (parent.lastChild == target_elem)
			{
					parent.appendChild(new_elem);
			}
	else
			{
					parent.insertBefore(new_elem, target_elem.nextSibling);
			}
}

function togglepanels (x) 
{
		var tab1 = document.getElementById("img_overview");
		var tab2 = document.getElementById("img_spec");
		if (document.getElementById("tab_video")){var tab3= document.getElementById("img_video");}
		
		
		var overpanel = document.getElementById("panel_overview");
		var specpanel = document.getElementById("panel_spec");
		if (document.getElementById("tab_video")){var videopanel = document.getElementById("panel_video");}
 
 if (x=="view")
		{ // spec panel showing
				tab1.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/overview_select.gif");
				tab1.setAttribute("class", "");tab1.setAttribute("className", "");
				tab2.setAttribute("class", "nav_tabout");tab2.setAttribute("className", "nav_tabout");
				tab2.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/specifications_out.gif");
				if (document.getElementById("tab_video")){
				tab3.setAttribute("class", "nav_tabout");tab3.setAttribute("className", "nav_tabout");
				tab3.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/video_out.gif");
				}
				
				
				specpanel.style.display="none";
				if (document.getElementById("tab_video")){videopanel.style.display ="none";}
				overpanel.style.display="block";        
				fadeIn("panel_overview",10);
		}
else if (x=="spec")
		{ // overview panel showing
		tab1.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/overview_out.gif");
		tab1.setAttribute("class", "nav_tabout");tab1.setAttribute("className", "nav_tabout");
		tab2.setAttribute("class", "");tab2.setAttribute("className", "");
		tab2.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/specifications_select.gif");
		if (document.getElementById("tab_video")){
		tab3.setAttribute("class", "nav_tabout");tab3.setAttribute("className", "nav_tabout");
		tab3.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/video_out.gif");
		videopanel.style.display ="none";
		}
		overpanel.style.display="none";
		specpanel.style.display="block";
		
		fadeIn("panel_spec",10);
		}
else 
		{
		tab1.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/overview_out.gif");
		tab1.setAttribute("class", "nav_tabout");tab1.setAttribute("className", "nav_tabout");
		tab2.setAttribute("class", "nav_tabout");tab2.setAttribute("className", "nav_tabout");
		tab2.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/specifications_out.gif");
		tab3.setAttribute("class", "");tab3.setAttribute("className", "");
		tab3.setAttribute("src", "/static/images/content_templates/Device_C/DevicePopup/video_select.gif");
		overpanel.style.display="none";
		specpanel.style.display="none";
		videopanel.style.display ="block";
		fadeIn("panel_video",10);

		}
}


$(document).ready(function(){
	
		var headers = 'h3.tableHead';
		var tables = '.specTable';
		
		// Hide content
		$('#overview-content').hide();
		$(tables).hide();
		// add show links
		$(headers).append('<a href="#"><img src="/static/images/content_templates/Device_C/Specification/twisty-arrow-right.gif" alt="expand this section" class="twister-img"></a>'); /// put the arrow in the bar
		$(headers).css ({ cursor: 'pointer'}); // give the whole bar a pointer cursor as it's clickable any moment now
		
		
		/* Collapses all panels before opening the "just clicked one"......
		$('.sect-head-wrap').click(function(){ // assign the click functionality
			// which panel opening link was clicked?
			//$('.twister-img').eq(index).attr({src:'/static/images/content_templates/Device_C/BusinessDeviceDetail/twisty-arrow-right.gif'}); // set all arrows to point right
			//$('.twister-img').css({left:'-20px', top:'0px'}); // nudge arrows back
			$('.twister-img').eq(index).attr({src:'/static/images/content_templates/Device_C/BusinessDeviceDetail/twisty-arrow-down.gif'}); // set the clicked arrow to point down
			$('.twister-img').eq(index).css({left:'-18px', top:'5px'}); // nudge selected arrow over
			$('.show-hide').slideUp("slow");// collapse all panels
			$('.show-hide').eq(index).queue(function(){$('.show-hide').eq(index).slideDown("slow"); $(this).dequeue(); }); // open selected panel
			return false; // DON'T FOLLOW ANY LINK THAT MIGHT HAVE BEEN CLICKED!
		}); // EO header bar clicks
		*/
		var index;
		$(headers).toggle(
				function(event){
				 index = $(headers).index(this);
				 $('.twister-img').eq(index).attr({src:'/static/images/content_templates/Device_C/Specification/twisty-arrow-down.gif'});
				 $('.twister-img').eq(index).css({left:'-18px', top:'5px'});
				 $(tables).eq(index).queue(function(){$(tables).eq(index).slideDown("slow",
						function(){
							$('#gradient-layer').height(($('#collapse-able').height()+220));
							//scrollWin(event.pageY);
							// Nice plane but jerks whole page
							//var cHeight = ($('#collapse-able').height()+220);
							//$('#gradient-layer').animate({ height: cHeight , duration: 'slow'})
						});
				$(this).dequeue(); });
				return false;
				},
				function(event){
				  index = $(headers).index(this);
				 $('.twister-img').eq(index).attr({src:'/static/images/content_templates/Device_C/Specification/twisty-arrow-right.gif'});
				 $('.twister-img').css({left:'-20px', top:'0px'});
				 $(tables).eq(index).queue(function(){$(tables).eq(index).slideUp("slow", 
						function(){
							$('#gradient-layer').height(($('#collapse-able').height()+220));
							//scrollWin(event.pageY);
						 });
				$(this).dequeue(); });
				return false;
				});
		var tab1 = document.getElementById("tab_overview");
		var tab2 = document.getElementById("tab_spec");
		if (document.getElementById("tab_video")){var tab3 = document.getElementById("tab_video");}
		//var close_btn = document.getElementById("btn_close");
		

				tab1.onclick = function() {togglepanels("view");return false;};
				tab2.onclick = function() {togglepanels("spec");return false;};
				if (document.getElementById("tab_video")){tab3.onclick = function() {togglepanels("video");return false;};}
	});