var activeImage=0;
function Image_UI_Init(){
$("body").append("<div title='Product Image' id='zoom'><img style='width:600px;height:600px;' src='' /></div>");
$("#imageTabs").append("<img id='zoom-button' src='/common/sgraphics/zoom.png' />");
$("#zoom-button, #imageTabs div img").click(function(){
	activeImage=$( "#imageTabs" ).tabs( "option", "selected" );
	$("#zoom img").attr("src",$("#imageTabs .ui-tabs-panel img").not(".ui-tabs-hide img").attr("large"));
	$("#zoom").dialog({modal: true,width: 630,buttons: {
	Close: function() {$(this).dialog('close');},
	Next: function() {updateZoom("next");},
	Previous: function() {updateZoom("previous");}
	}});
	updateZoom();
});
$("#imageTabs").tabs({event: 'mouseover'});
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *").removeClass("ui-corner-all ui-corner-top").addClass("ui-corner-bottom");
$("#imageTabs li img").addClass("ui-corner-all");
}
function updateZoom(func){
	images=new Array();
	$("#imageTabs .ui-tabs-panel img").each(function(){if($(this).attr("large")){images.push($(this).attr("large"));}else{images.push($(this).attr("src"));}});
	if(func=="next" && activeImage<images.length-1){activeImage++;}
	if(func=="previous" && activeImage>0){activeImage--;}
	if(activeImage==0){$("#zoom").dialog( "widget").find("button:eq(2)").button("disable");}else{$("#zoom").dialog("widget").find("button:eq(2)").button("enable");}
	if(activeImage==images.length-1){$("#zoom").dialog("widget").find("button:eq(1)").button("disable");}else{$("#zoom").dialog( "widget").find("button:eq(1)").button("enable");}
	$("#zoom img").attr("src",images[activeImage]);
}