var origW = 0;
var origH = 0;
var zoomVal = 0;
var zoomIncr = 40;
var zoomAdj = 0;
var zoomPercent = 100;
var imgDragStart = false;

//// load css and javaascript files
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "http://site.invitationbox.com/css/pikachoose.css");
//fileref.setAttribute("href", "../../css/pikachoose.css");
if(typeof fileref!="undefined"){ document.getElementsByTagName("head")[0].appendChild(fileref); }

var jquerydraggable=document.createElement("script");
jquerydraggable.setAttribute("type", "text/javascript");
jquerydraggable.setAttribute("src", "http://site.invitationbox.com/js/jquery-ui.js");
//jquerydraggable.setAttribute("src", "../../js/jquery-ui.js");
if(typeof jquerydraggable!="undefined"){ document.getElementsByTagName("head")[0].appendChild(jquerydraggable); }

document.write('<div id="imageViewerContainer"></div>');

function loadImageViewer(mainImg, largeImg, placeholder) {	
	
	init();
	origW = largeImg.width;
	origH = largeImg.height;

	var ulHtml = "<li><img src='" + largeImg.src + "'/></li>"; //load main image
 
    var cnt = 0;
	var insetImg = '';
	var hasImages = false;
	
	for(var i= 0; i < 10; i++){
		try{			
			if(largeImg.src == eval("imginset"+i+"large.src") ){
				if(eval("imgmainimg0large").width > 1 && eval("imgmainimg0large").height > 1){ 
					ulHtml += "<li><img src='" + eval("imgmainimg0large.src") + "'></li>";
		        	hasImages = true;
					cnt++;
				}
			}
			else{
				if(eval("imginset"+i+"large").width > 1 && eval("imginset"+i+"large").height > 1){
					ulHtml += "<li><img src='" + eval("imginset"+i+"large.src") + "'></li>";
		        	hasImages = true;
			   	 	cnt++;
				}
			}
		}
		catch(e){ /*alert("e: " + e);*/ }
	}
	
	//if(!$.browser.msie)
	if($.browser.msie && $.browser.version <= 6 ){
		changeImg(largeImg, largeImg, placeholder);
		return;
   	}
	
	var imageModal = '\
	<div class="pikachoose">\
		<div class="pikaContainer" id="pikaContainer">\
			<div id="imageBtnContainer">\
				<div style="float:left;padding:8px;width:220px;">\
					<div id="zoom_in" class="imageViewerZoomIn"></div><div id="zoom_out" class="imageViewerZoomOut"></div>\
				</div>\
				<div style="float:right;padding:8px;">\
					<div class="imageViewerClose"><a  href="javascript:hideMe()"></a></div>\
				</div>\
			</div>\
			<ul id="pikame">'+ulHtml+'</ul>\
		</div>\
	</div>';
		
	$("#imageViewerContainer").html(imageModal);
	if(hasImages){
		$(document).ready(function(){$(function(){   
			$("#pikame").PikaChoose();
			$("#sub_div").draggable({revert:false, cursor:"move"});		
			$("#sub_div").css({cursor:'hand', cursor:'pointer'});
		}); });								
	}
	else{
		$("#pikame").before("<div id='singleImgContainer'><div id='singleImgInner'><img id='pika_main_img' src='" + largeImg.src + "'/></div></div>");		
		
		$("#pikame").html('');
		$("#zoom_in").bind("click", img_zoom_in);
		$("#zoom_out").bind("click", img_zoom_out);
		$(document).ready(function(){ $(function(){
			$("#pika_main_img").draggable({revert:false, cursor:"move"}); 
			$("#pika_main_img").css({cursor:'hand', cursor:'pointer'});
		}); });
	} 
		
	$("#zoom_out").hide();
	$("#imageViewerContainer").show('fast');
	$("#qvOverlay").show(); 
}

function hideMe(){
	$("#qvOverlay").hide(); 
	$("#imageViewerContainer").hide('slow');
}


function img_zoom_in(event, how){	
	$("#zoom_out").show();
	if(zoomPercent == 190){ $("#zoom_in").hide(); }
	zoomAdj = zoomAdj+5;
	zoomPercent = zoomPercent+10;
	
	if(window.imgDragStart){
		$("#pika_main_img").animate({width:zoomPercent+"%"}, 400 );
	}
	else{
		$("#pika_main_img").animate({width:zoomPercent+"%", top:0, left:(zoomAdj*-1)+"%"}, 400 );
	}
	
	
}

function img_zoom_out(){ 
	$("#zoom_in").show();
	if(zoomPercent == 110){$("#zoom_out").hide();}
	zoomAdj = zoomAdj-5;
	zoomPercent = zoomPercent-10;
	if(window.imgDragStart){
		$("#pika_main_img").animate({width:zoomPercent+"%"}, 400 );
	}
	else{
		$("#pika_main_img").animate({width:zoomPercent+"%", top:0, left:(zoomAdj*-1)+"%"}, 400 );
	}
}


function init(){
	origW = 0;
	origH = 0;
	zoomVal = 0;
	zoomIncr = 40;
	zoomAdj = 0;
	zoomPercent = 100;
	imgDragStart = false;
}