// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})()


/*  
 * Unobtrusive image rollover with Prototype library, v1.1
 * 
 * Created by Herryanto Siatono
 * Copyright (c) 2007 Pluit Solutions <www.pluitsolutions.com>
 * 
 * This script is freely distributable under the terms of an MIT-style license.
/*------------------------------------------------------------------------------*/

var Rollover= Class.create();
Rollover.prototype = {
  // provide the container id containing image links to be rolled over.
  initialize: function(id, options) {
    this.id = id;
    this.images = {};
    this.setOptions(options);
    this.observeLinks();
  },
  
  setOptions: function(options) {
    this.options = {
      rolloverSuffix: 'over',
      selectedSuffix: 'sel',
      suffixSeperator: '_'
    };
    Object.extend(this.options, options || {});
  },

  observeLinks: function() {
    this.links = $$('#' + this.id + ' a');
    for (i=0; i<this.links.length; i++) {
      this.links[i].observe('mouseover', this.rolloverImage);
      this.links[i].observe('mouseout', this.rollbackImage);
    }
    
    images = $$('#' + this.id + ' img');
    for (i=0; i<images.length; i++) {
      imageId = images[i].id 
      if (!imageId) {
        imageId  = this.id + i;
        images[i].id = imageId;
      }
      
      this.images[imageId] = images[i].src;
      images[i].imageRollover = this;

      // preload rollover image
      (new Image()).src = this.parseRolloverImage(images[i]);
    }
  },
  
  rolloverImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
      image.imageRollover.images[image.id] = image.src;
      image.src = image.imageRollover.parseRolloverImage(image);  
    }
  },

  rollbackImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
      image.src = image.imageRollover.images[image.id];
    }
  },
  
  parseRolloverImage: function(image) {
    ext = image.src.substr(image.src.lastIndexOf('.'));
    path = image.src.match(/(.*)\/(.*\.(png|gif|jpg))/)[1]
    filename = image.src.gsub(path, '')
    basename = this.parseBasename(filename);
    basename = this.parseBasename(basename, this.options.suffixSeperator + this.options.selectedSuffix);
    return path + basename + this.options.suffixSeperator + this.options.rolloverSuffix + ext;
  },
  
  parseBasename: function(name, seperator) {
    seperator = seperator || '.';
    found = name.lastIndexOf(seperator);
    if (found > 0) {
      return name.substr(0, found);
    } else {
      return name;
    }
  }
}

function switchMenu(obj,linkText, switchBlock) {
	var el = $(obj);
	var linkText = $(linkText); 
    var switchBlock = $(switchBlock);
	if ( el.style.display != "none" ) {
			//el.hide();
			Effect.BlindUp(el,{duration:0.3,queue: 'end'});
			linkText.innerHTML = moreResources;
			switchBlock.addClassName('switchLinkPlus');
			switchBlock.removeClassName('switchLinkMinus');
			
	} else {
			//el.show();
			Effect.BlindDown(el, {duration:0.3,queue: 'end'});
			linkText.innerHTML = collapseResources;
			
			switchBlock.removeClassName('switchLinkPlus');
			switchBlock.addClassName('switchLinkMinus');
			
			
	}
		
		
}


// set or get the current display style of the div
function dsp(d,v){
	if(v==undefined){
		return d.style.display;
	}else{
		d.style.display=v;
	}
}

// set or get the height of a div.
function sh(d,v){
	// if you are getting the height then display must be block to return the absolute height
	if(v==undefined){
		if(dsp(d)!='none'&& dsp(d)!=''){
			return d.offsetHeight;
		}
		viz = d.style.visibility;
		d.style.visibility = 'hidden';
		o = dsp(d);
		dsp(d,'block');
		r = parseInt(d.offsetHeight);
		dsp(d,o);
		d.style.visibility = viz;
		return r;
	}else{
		d.style.height=v;
	}
}
/*
* Variable 'S' defines the speed of the accordian
* Variable 'T' defines the refresh rate of the accordian
*/
speed=7;
t=10;

//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially.
function ct(d){
	d = $(d);
	if(sh(d)>0){
		v = Math.round(sh(d)/d.s);
		v = (v<1) ? 1 :v ;
		v = (sh(d)-v);
		sh(d,v+'px');
		d.style.opacity = (v/d.maxh);
		d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
	}else{
		sh(d,0);
		dsp(d,'none');
		clearInterval(d.t);
	}
}

//Expand Timer is triggered as a setInterval to increase the height of the div exponentially.
function et(d){
	d = $(d);
	if(sh(d)<d.maxh){
		v = Math.round((d.maxh-sh(d))/d.s);
		v = (v<1) ? 1 :v ;
		v = (sh(d)+v);
		sh(d,v+'px');
		d.style.opacity = (v/d.maxh);
		d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
	}else{
		sh(d,d.maxh);
		clearInterval(d.t);
	}
}

// Collapse Initializer
function cl(d){
	if(dsp(d)=='block'){
		clearInterval(d.t);
		d.t=setInterval('ct("'+d.id+'")',t);
	}
}

//Expand Initializer
function ex(d){
	if(dsp(d)=='none'){
		dsp(d,'block');
		d.style.height='0px';
		clearInterval(d.t);
		d.t=setInterval('et("'+d.id+'")',t);
	}
}

// Removes Classname from the given div.
function cc(n,v){
	speed=n.className.split(/\s+/);
	for(p=0;p<speed.length;p++){
		if(speed[p]==v+n.tc){
			speed.splice(p,1);
			n.className=speed.join(' ');
			break;
		}
	}
}
//Accordian Initializer
function Accordion(d,s,tc,defaultOpen){
	// get all the elements that have id as content
	l=$(d).getElementsByTagName('div');
	c=[];
	for(i=0;i<l.length;i++){
		h=l[i].id;
		if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);}
	}
	sel=null;
	//then search through headers
	for(i=0;i<l.length;i++){
		h=l[i].id;
		if(h.substr(h.indexOf('-')+1,h.length)=='header'){
			
			d=$(h.substr(0,h.indexOf('-'))+'-content');
			d.style.display='none';
			d.style.overflow='hidden';
			d.maxh =sh(d);
			d.s=(speed==undefined)? 7 : s;
			h=$(h);
			h.tc=tc;
			h.c=c;
			// set the onclick function for each header.
			
			h.onclick = function(){
				for(i=0;i<this.c.length;i++){
					cn=this.c[i];
					n=cn.substr(0,cn.indexOf('-'));
					if((n+'-header')==this.id){
						ex($(n+'-content'));
						n=$(n+'-header');
						cc(n,'__');
						n.className=n.className+' '+n.tc;
					}else{
							
							cl($(n+'-content'));
							cc($(n+'-header'),'');
					}
				}
			}
			
			if(defaultOpen != null) {
				var temp =defaultOpen.substr(0,defaultOpen.indexOf('-'));
				ex($(temp+'-content'));
				$(temp +'-header').className=$(temp +'-header').className+' '+tc;	
		                defaultOpen=null;
			}
			
			if(h.className.match(/selected+/)!=undefined){ sel=h;}
		}
	}
	if(sel!=undefined){sel.onclick();}
}






var Ivaabs = Class.create();

Ivaabs.prototype = {
	initialize : function(element) {
		this.element = $(element);
		var options = Object.extend({}, arguments[1] || {});
		this.menu = $A(this.element.getElementsByTagName('a'));
		this.show(this.getInitialTab());
		this.menu.each(this.setupTab.bind(this));
	},
	setupTab : function(elm) {
		Event.observe(elm,'click',this.activate.bindAsEventListener(this),false)
	},
	activate :  function(ev) {
		var elm = Event.findElement(ev, "a");
		Event.stop(ev);
		this.show(elm);
		this.menu.without(elm).each(this.hide.bind(this));
	},
	hide : function(elm) {
		$(elm).removeClassName('active-tab');
		$(this.tabID(elm)).removeClassName('active-tab-body');
	},
	show : function(elm) {
		$(elm).addClassName('active-tab');
		$(this.tabID(elm)).addClassName('active-tab-body');

	},
	tabID : function(elm) {
		return elm.href.match(/#(\w.+)/)[1];
	},
	getInitialTab : function() {
		if(document.location.href.match(/#(\w.+)/)) {
			var loc = RegExp.$1;
			var elm = this.menu.find(function(value) { return value.href.match(/#(\w.+)/)[0] == loc; });
			return elm || this.menu.first();
		} else {
			return this.menu.first();
		}
	}
}



var NetApp = {};
Object.extend(NetApp, {
	ui:{}
});
//TODO: Add the Arrow class properly
//Carousel Extension
Object.extend(NetApp.ui, {
	_defaultSlide:0,
	_currentSlide:0,
	_items:new Array(),
	_moveLeft:function() {	
		this._moveToPosition(this._currentSlide-1);	
		return false;
	},
	
	_moveRight:function() {
		this._moveToPosition(this._currentSlide+1);	
		return false;
	},
	
	_moveToPosition:function(position) {
		//alert(position);
		var direction = 876;
		if(position < 0 ) {
			position = this._items.length -1;
		} else if (position > (this._items.length - 1)) {
			position = 0;
		}
		
		if(position < this._items.length || position > -1) {
				var steps = this._currentSlide - position;
				var pixels = direction * steps;
				//alert(pixels);
				new Effect.MoveBy('sCarouselInner', 0, pixels , {
				
							  duration: 0.4,  
				
							  transition: Effect.Transitions.sinoidal,
							  
							   queue:'end'
				
				});		
				NetApp.ui._moveDots(position);
				this._currentSlide = position;	
				return false;	
		}
	},
	
	_moveDots:function(position) {
		var currentDot = this._currentSlide;
		var dotID = "dots_"+currentDot;
		$(dotID).src="http://media.netapp.com/designimages/iva-hero-pagination-off-8x8.png";
		var dotID = "dots_"+position;
		$(dotID).src="http://media.netapp.com/designimages/iva-hero-pagination-on-8x8.png";
		return false;
	},
	
	carousel:Class.create({
		options:{
			leftArrow:"",
			rightArrow:""
		},
		initialize: function(options) {
			//TODO: add options checking and verification.
			this.options = options;
		},

		add:function(item) {
			//  an id of div, or text
			var text = item;
			if($(item) != undefined) {
				// This is a div being added to the carousel
				text = $(item).innerHTML;
			} 
			// Now add the text to our array.
			NetApp.ui._items.push(text);
			
			
		},
		render: function(elem) {
			if(elem != "") {
				
				var arrowDiv = new Element('div',{id:"sArrowContainer"});

				arrowDiv.className = "arrowOuter";

				var leftArrow = new Element('a',{href:'#'}).update("<img src='http://media.netapp.com/designimages/iva-hero-arrow-left-60x72.png' width='60' height='72' border='0' alt='Previous' title='Previous'>");
				var rightArrow = new Element('a',{href:'#'}).update("<img src='http://media.netapp.com/designimages/iva-hero-arrow-right-60x72.png' width='60' height='72' border='0' alt='Next' title='Next'>");
				
				leftArrow.onclick = function() {NetApp.ui._moveLeft();return false;};
				rightArrow.onclick = function() {NetApp.ui._moveRight();return false;};
				var temp = new Element('div').insert(leftArrow);
				temp.className = "carouselLeftArrow";
				temp.id = "sCarouselLeftArrow"
				arrowDiv.insert(temp);
				
				var outer = new Element ('div',{
					id: "sCarouselOuter"
				});
				
				outer.className = "carouselOuter";
				
				var inner = new Element ('div',{
					id: "sCarouselInner"
				});
				
				var dots = new Element ('div',{
					id: "heroPagination"
				});
				inner.className = "carouselContainer";
				for(i=0;i<NetApp.ui._items.length;i++) {
					var item = NetApp.ui._items[i];
					var div = new Element('div',{id:"car-"+i}).update(item);
					div.className = "carouselSlide";
					inner.insert(div);
					//alert("ok");
					var temp = dots.innerHTML;
					
					temp += '<a href="#" onclick="NetApp.ui._moveToPosition('+(i)+');return false;"><img id=dots_'+i+' width="8" height="8" src="http://media.netapp.com/designimages/iva-hero-pagination-off-8x8.png"></a>';
					dots.update(temp);
				}
				
				
				outer.insert(inner);
				outer.insert(dots);
				arrowDiv.insert(outer);
				temp = new Element('div').insert(rightArrow);
				temp.className = "carouselRightArrow";
				temp.id = "sCarouselRightArrow"
				arrowDiv.insert(temp);
				
				$(elem).insert(arrowDiv);
				NetApp.ui._moveDots(0);
			}
		}
		
	})
});