//��ҳ��ͼ�л�
function settab(name, cursel, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getelementbyid(name + i);
        var con = document.getelementbyid("con_" + name + "_" + i);
        menu.classname = i == cursel ? "hover" : "";
        con.style.display = i == cursel ? "block" : "none";
    }
}

$(document).ready(function(){
	// ͼƭ���¹���
	var count = $("#imagemenu2 li").length - 5; /* ��ʾ 6 �� li��ǩ���� */
	var interval = $("#imagemenu2 li:first").width();
	var curindex = 0;
	
	$('.scrollbutton').click(function(){
		if( $(this).hasclass('disabled') ) return false;
		
		if ($(this).hasclass('smallimgup')) --curindex;
		else ++curindex;
		
		$('.scrollbutton').removeclass('disabled');
		if (curindex == 0) $('.smallimgup').addclass('disabled');
		if (curindex == count-1) $('.smallimgdown').addclass('disabled');
		
		$("#imagemenu2 ul").stop(false, true).animate({"marginleft" : -curindex*interval + "px"}, 600);
	});	
	// ��� ie6 select�� ����
	$.fn.decorateiframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateiframe.defaults, options);
            $(this).each(function() {
                var $mythis = $(this);
                //����һ��iframe
                var diviframe = $("<iframe />");
                diviframe.attr("id", opts.iframeid);
                diviframe.css("position", "absolute");
                diviframe.css("display", "none");
                diviframe.css("display", "block");
                diviframe.css("z-index", opts.iframezindex);
                diviframe.css("border");
                diviframe.css("top", "0");
                diviframe.css("left", "0");
                if (opts.width == 0) {
                    diviframe.css("width", $mythis.width() + parseint($mythis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    diviframe.css("height", $mythis.height() + parseint($mythis.css("padding")) * 2 + "px");
                }
                diviframe.css("filter", "mask(color=#fff)");
                $mythis.append(diviframe);
            });
        }
    }
    $.fn.decorateiframe.defaults = {
        iframeid: "decorateiframe1",
        iframezindex: -1,
        width: 0,
        height: 0
    }
    //�ŵ��ӵ�
    $("#bigview").decorateiframe();
    //�������ͼ
    var midchangehandler = null;
	
    $("#imagemenu2 li img").bind("click", function(){
		if ($(this).attr("id") != "onlickimg") {
			midchange($(this).attr("src").replace("small", "mid"));
			$("#imagemenu2 li").removeattr("id");
			$(this).parent().attr("id", "onlickimg");
		}
	}).bind("mouseover", function(){
		if ($(this).attr("id") != "onlickimg") {
			window.cleartimeout(midchangehandler);
			midchange($(this).attr("src").replace("small", "mid"));
			$(this).css({ "border": "2px solid #f0592e" });
		}
	}).bind("mouseout", function(){
		if($(this).attr("id") != "onlickimg"){
			$(this).removeattr("style");
			midchangehandler = window.settimeout(function(){
			}, 1000);
		}
	});
    function midchange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeviewimg();
        });
    }
  
    var $divwidth = $("#winselector").width(); //ѡ�������
    var $divheight = $("#winselector").height(); //ѡ�����߶�
    var $imgwidth = $("#midimg").width(); //��ͼ���
    var $imgheight = $("#midimg").height(); //��ͼ�߶�
    var $viewimgwidth = $viewimgheight = $height = null; //ie���غ���ܵõ� ��ͼ��� ��ͼ�߶� ��ͼ�ӵ��߶�

    function changeviewimg() {
        $("#bigview img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }
    changeviewimg();
    $("#bigview").scrollleft(0).scrolltop(0);
    function fixedposition(e) {
        if (e == null) {
            return;
        }
        var $imgleft = $("#midimg").offset().left; //��ͼ��߾�
        var $imgtop = $("#midimg").offset().top; //��ͼ�ϱ߾�
        x = e.pagex - $imgleft - $divwidth / 2; //selector�������� x
        y = e.pagey - $imgtop - $divheight / 2; //selector�������� y
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        x = x + $divwidth > $imgwidth ? $imgwidth - $divwidth : x;
        y = y + $divheight > $imgheight ? $imgheight - $divheight : y;

        if ($viewimgwidth == null) {
            $viewimgwidth = $("#bigview img").outerwidth();
            $viewimgheight = $("#bigview img").height();
            if ($viewimgwidth < 200 || $viewimgheight < 200) {
                $viewimgwidth = $viewimgheight = 800;
            }
            $height = $divheight * $viewimgheight / $imgheight;
            $("#bigview").width($divwidth * $viewimgwidth / $imgwidth);
            $("#bigview").height($height);
        }
        var scrollx = x * $viewimgwidth / $imgwidth;
        var scrolly = y * $viewimgheight / $imgheight;
        $("#bigview img").css({ "left": scrollx * -1, "top": scrolly * -1 });
        $("#bigview").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });

        return { left: x, top: y };
    }
});