// javascript document

$(document).ready(function(){
	// 图片上下滚动
	var count = $("#imagemenu li").length - 5; /* 显示 6 个 li标签内容 */
	var interval = $("#imagemenu 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');
		
		$("#imagemenu 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;
	
    $("#imagemenu li img").bind("click", function(){
		if ($(this).attr("id") != "onlickimg") {
			midchange($(this).attr("src").replace("small", "mid"));
			$("#imagemenu 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": "3px solid #959595" });
		}
	}).bind("mouseout", function(){
		if($(this).attr("id") != "onlickimg"){
			$(this).removeattr("style");
			midchangehandler = window.settimeout(function(){
				midchange($("#onlickimg img").attr("src").replace("small", "mid"));
			}, 1000);
		}
	});
    function midchange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeviewimg();
        });
    }
    //大视窗看图
    function mouseover(e) {
        if ($("#winselector").css("display") == "none") {
            $("#winselector,#bigview").show();
        }
        $("#winselector").css(fixedposition(e));
        e.stoppropagation();
    }
    function mouseout(e) {
        if ($("#winselector").css("display") != "none") {
            $("#winselector,#bigview").hide();
        }
        e.stoppropagation();
    }
    $("#midimg").mouseover(mouseover); //中图事件
    $("#midimg,#winselector").mousemove(mouseover).mouseout(mouseout); //选择器事件

    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 < 600 || $viewimgheight < 600) {
                $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": 350, "left": $(".preview").offset().left + $(".preview").width() + 15 });

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