var bar_layer, menu_layer, pic_layer, loading_layer, pic, ad_layer;
var window_w, window_h, menu_w, menu_h;
var n_img = '';
var timeoutProcess;
var blacklist = '55F830C1';

function IsVisible(object) {
    return object.css("display") != "none";
}

function lightup(object, opacity) {
    object.fadeTo(200, opacity / 100);
}

function GetWindowSize() {
    window_w = $(window).width();
    window_h = $(window).height();
}

function CenterElement(Obj) {
    GetWindowSize();
    Obj = $(Obj);
    var w = Obj.width();
    var h = Obj.height();
    var l, t;
    l = (w < window_w) ? (window_w - w) / 2 : 0;
    t = (h < window_h) ? (window_h - h) / 2 : 0;
    Obj.css({
        left: l + "px",
        top: t + "px"
    });
}

function AdjustElementsPos() {
    CenterElement(loading_layer);
    if (IsVisible(bar_layer))
        CenterElement(menu_layer);
    CenterElement(pic_layer);
}

function showbar() {
    bar_layer.fadeTo(200, 0.85);

    CenterElement(menu_layer);
}

function GetCRC32() {
    n_img = location.pathname.substr(1, 8)
    if (blacklist.indexOf(n_img) > -1) { n_img = '00000000'; }
    if (location.protocol == 'file:')
        n_img = '2F97193D';
}

function initialize() {
    $('body').show();
    GetCRC32();
    GetWindowSize();
    window.onresize = AdjustElementsPos;
    menu_layer = $('#menu_layer');
    bar_layer = $('#bar_layer');
    pic = new Image();
    pic_img = document.getElementById('pic');
    ad_layer = $('#ad_layer');
    pic_layer = $('#pic_layer');
    loading_layer = $("#loading_layer");
    loading_layer.html("LOADING...").css({
        width: 'auto',
        height: 'auto',
        background: '#000'
    }).fadeTo(200, 0.85);
    CenterElement(loading_layer);
    pic.onerror = picError;
    readWidth();
    pic.src = "http://pic.inspic.com/pic/" + n_img;
    document.onmousemove = TransparentAD;
}

function ResetPicLayerPosition() {
    pic_layer.css({
        left: 0,
        top: 0
    });
}

function ResetActualSize() {
    ResetPicLayerPosition();
    $(pic_img).removeAttr('width');
    $(pic_img).removeAttr('height');
    CenterElement(pic_layer);
}

function FitPageWidth() {
    ResetActualSize();
    $(pic_img).removeAttr('width').removeAttr('height');
    for (var i = 0; i < 2; i++) {
        GetWindowSize();
        pic_img.width = window_w;
    }
    CenterElement(pic_layer);

}

function FitPageHeight() {
    ResetActualSize();
    $(pic_img).removeAttr('width');
    for (var i = 0; i < 2; i++) {
        GetWindowSize();
        pic_img.height = window_h;
    }
    CenterElement(pic_layer);
}

function picError() {
    clearTimeout(timeoutProcess);
    loading_layer.css({ color: "#FF0000" }).text('READ ERROR');
    CenterElement(loading_layer);
    location.href = 'read_error.htm';
}

function readWidth() {
    if (pic.width == 0) {
        timeoutProcess = setTimeout("readWidth()", 20);
        return false;
    }

    $(pic_img).attr('src', pic.src);
    var pic_size_label = String.format('[{0}x{1}]', pic.width, pic.height);
    pic_layer.fadeIn();
    loading_layer.append(pic_size_label);
    window.document.title += pic_size_label;

    loading_layer.delay(1500).fadeOut(1000);
    AdjustElementsPos();

    ResizePic();
}

function ResizePic() {
    if (pic.width < window_w && pic.height < window_h) { }
    else {
        if (pic.width > window_w) {
            FitPageWidth();
        }
    }
}

function ResizePic1() {
    var pratio = pic.width / pic.height;
    var sratio = window_w / window_h;

    if (pratio == sratio) { FitPageWidth(); }
    else {
        if (pratio / sratio > 1) {
            if (pic.height > window_h) {
                FitPageHeight();
            }
            else {
                // do nothing
            }
        }
        else if (pratio / sratio < 1) {
            if (pic.width > window_w) {
                FitPageHeight();
            }
            else {

            }
        }
    }

}

function GotoFlashPage() {
    location.href = String.format("http://inspic.com/{0}f", n_img);
}

function VisitURL(URL) {
    location.href = URL;
}

function FlashPic() {
    var url = location.href;
    var offset = url.indexOf("/", 8) + 1;
    var n_img = url.substring(offset, offset + 8);
    document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="flashpic" align="middle">  <param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/flashpic.swf?pic_id=' + n_img + '" /><embed src="flash/flashpic.swf?pic_id=' + n_img + '" width="100%" height="100%" name="flashpic" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>');
}

var y;
function TransparentAD(evt) {
    if (IsVisible(bar_layer)) return;
    evt = evt || window.event;
    if (evt.clientY)
        y = evt.clientY;
    if (y < 100) {
        ad_layer.show();
    }
    else
        ad_layer.hide();
}

$(document).ready(function () {

    initialize();

    function TrackEvent(label) {
        _gaq.push(['_trackEvent', 'Action', 'Clicked', label]);
    }

    $('#pic').click(function () {
        showbar();
        TrackEvent('Image');
    });

    $('#ad_layer a').click(function () {
        TrackEvent($(this).text());
    });

    $('#menu_layer p').click(function () {
        TrackEvent($(this).text());
    });

    $('#search_google').attr('href', 'http://www.google.com/searchbyimage?sbisrc=cr_1_0_0&image_url=' + pic.src);

    $('#reset_actual_size').click(ResetActualSize);

    $('#fit_page_width').click(FitPageWidth);

    $('#fit_page_height').click(FitPageHeight);

    $('#menu_layer #back_to_pic').click(function () {
        bar_layer.fadeOut(200);
    });

    $('#menu_layer #help').click(function () {
        VisitURL('http://inspic.com/demo/demo2.htm');
    });

    $('#menu_layer #home').click(function () {
        VisitURL('http://www.inspic.com');
    });

    $('#menu_layer #go_to_flash').click(GotoFlashPage).hide();

    $(loading_layer).click(function () { window.open('http://www.inspic.com'); });

});