var i = 0;
window.addEvent('domready', function() {
	jsonFin();
})

// setup initial images copy and variables //	
function jsonFin(){
	if(collection != ''){
		if ((collection.collection.length == 1)){
			//remove lookInside controlls and Look Inside This Guide CTA
			$('lookInside_iPhone_arrow').setStyle('display','none');
		
			$('lookInside_iPhone_controls').setStyle('display','none');
			$$('img, .container').setStyle('cursor','default');
			$$('.lookInsideBar').setStyle('display','none');
			$('lookInside_iPhone').setStyle('cursor','default');
		}
		var target = $('lookInside_iPhone').getFirst().getNext();
		target.empty();
		new Asset.image(collection.collection[0].src,{id:collection.collection[0].name, width:'285px', height:'570px'}).injectInside(target);
		if (window.ie6){
		 	fixPng();
		}
		// set initial copy
		//$('liTitle').setStyle('background-color',collection.collection[0].color);
		$('liTitle_iPhone').getFirst().empty().appendText(collection.collection[0].name);
		//$('liPosition_iPhone').getFirst().empty().appendText('sample 1'+' of '+collection.collection.length);
		$('liPosition_iPhone').getFirst().empty().appendText('1'+' of '+collection.collection.length);
		// initiate //
		enable();
	}
}

// enable buttons
function enable(){
	var imageNextA = $('lookInside_iPhone').getFirst();
	var imageNext = $('lookInside_iPhone').getFirst().getNext();
	var up = $('up');
	var down = $('down');
	i=0;
	imageNextA.addEvent('click',function(){
		if(i<collection.collection.length-1) {
		i++;
		}else{
			i=0;
		}
		if(collection.collection.length > 1) {
			changeImage()
		}
	});
	imageNext.addEvent('click',function(){
		if(i<collection.collection.length-1) {
		i++;
		}else{
			i=0;
		}
		if(collection.collection.length > 1) {
			changeImage()
		}
	});
	up.addEvent('click',function(){
		if(i<collection.collection.length-1) {
		i++;
		}else{
			i=0;
		}
		changeImage()
	});
	down.addEvent('click',function(){
		if(i>0){
		i--;
		}else{
			i=collection.collection.length-1
		}
		changeImage()
	});
}

function changeImage(){
	// set up position text and add title with style
	$('liTitle_iPhone').getFirst().empty().appendText(collection.collection[i].name);
	//$('liTitle').setStyle('background-color',collection.collection[i].color);
	//$('liPosition_iPhone').empty().appendText('sample '+(i+1)+' of '+collection.collection.length);
	$('liPosition_iPhone').empty().appendText((i+1)+' of '+collection.collection.length);
	var target = $('lookInside_iPhone').getFirst().getNext();
	var fx = target.effects({duration:300, transition:Fx.Transitions.Sine.easeIn,
	onComplete:function(){
		target.getFirst().remove();
		newImage();
	}
	});
	fx.start({'opacity':[1,0]});
}
var clicked = false;
function newImage(){
	var target = $('lookInside_iPhone').getFirst().getNext();
	new Asset.image(collection.collection[i].src,{id:collection.collection[i].name, width:'285px', height:'570px'}).injectInside(target);
	if(clicked == false){
		urchinTracker('Look Inside: ' + collection.collection[i].name);
		clicked = true; 
	}
	fy = target.effects({duration:300, transition:Fx.Transitions.Sine.easeOut, 
		onStart:function(){
			if (window.ie6){
			 	fixPng();
			}
		}
	});
	fy.start({'opacity':[0,1]});
}
function fixPng(){
	if (window.ie6){
	   for(var i=0; i<document.images.length; i++){
	      var img = document.images[i]
	      var imgName = img.src.toUpperCase()
	      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	      {
	         var imgID = (img.id) ? "id='" + img.id + "' " : ""
	         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
	         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
	         var imgStyle = "display:inline-block;" + img.style.cssText 
	         if (img.align == "left") imgStyle = "float:left;" + imgStyle
	         if (img.align == "right") imgStyle = "float:right;" + imgStyle
	         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
	        
	         var strNewHTML = "<span " + imgID + imgClass + imgTitle
	         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
	         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
	         img.outerHTML = strNewHTML
	         i = i-1
	      }
	   }
	}
}