$(document).ready(function() {

    var model = $("#divModel").text().split(",");
    width = model[0];
    height = model[1];
    //            $("#divCurrent").css("width", (parseInt(width) ) + "px");
    //            $("#divCurrent").css("height", (parseInt(height) - 20) + "px");

    //            $("#divMain").css("width", width + "px");
    //            $("#divMain").css("height", height + "px");
    items = $("#divContent .divItem");
    var divSwitch = $("#divSwitch");
    for (var i = 0; i < items.length; i++) {
        divSwitch.append("<span style='cursor:pointer;' onclick='ChangeCurrent(" + (i + 1) + ")' class='spanSwitch'>" + (i + 1) + "</span><span style='padding-left:1px;'></span>");
    }

    $("#divCurrent").empty();
    $("#divTitle").empty();

    var firstitem = $(items[0]);
    var a = $("#" + firstitem[0].id + " a");

    var img = $("#" + firstitem[0].id + " img");
    var title = a.text();
    var fulltitle = img.attr("alt");
    var url = a.attr("href");
    var img = img.attr("src");

    $("#divCurrent").append("<a href='" + url + "' target='_blank' title='" + fulltitle + "'><img height='" + height + "' width='" + width + "' src='" + img + "' /></a>");
    $("#divTitle").text(title);
    $($(".spanSwitch")[0]).addClass("CurrentSwitch");


    currentid = 0;

    intervalid = setInterval("ChangeContent()", 3000);

    $("#divCurrent").hover(function() {
        clearInterval(intervalid);
    }, function() {
        intervalid = setInterval("ChangeContent()", 3000);
    });
    $("#divTitle").hover(function() {
        clearInterval(intervalid);
    }, function() {
        intervalid = setInterval("ChangeContent()", 3000);
    });
    $("#divSwitch").hover(function() {
        clearInterval(intervalid);
    }, function() {
        intervalid = setInterval("ChangeContent()", 3000);
    });
})

var currentid;
var width ;
var height;
var items;
var intervalid;

function ChangeCurrent(id) {
    var a = $("#divContent #div" + id.toString()+" a");
    var img = $("#divContent #div" + id.toString() + " img");
    var url = a.attr("href");
    var title = a.text();
    var imagesrc = img.attr("src");
    var fulltitle = img.attr("alt");
    $("#divCurrent").empty();
    $("#divCurrent").append("<a href='" + url + "' target='_blank' title='" + fulltitle + "'><img height='" + height + "' width='" + width + "' src='" + imagesrc + "' /></a>");
    $("#divTitle").text(title);
    $(".spanSwitch").removeClass("CurrentSwitch");
    $($(".spanSwitch")[(id-1)]).addClass("CurrentSwitch");
}

function ChangeContent() {
    if (currentid == ($(".spanSwitch").length-1)) {
        currentid = 0;
    }
    else {
        currentid++;
    }

    var spanSwitch = $(".spanSwitch");
    spanSwitch.removeClass("CurrentSwitch");
    for (var i = 0; i < spanSwitch.length; i++) {
        if (spanSwitch[i].innerHTML == (currentid+1)) {
            $(spanSwitch[i]).addClass("CurrentSwitch");
            break;
        }
    }

    //$("#divCurrent").fadeOut(200);
    
    $("#divCurrent").empty();
    $("#divTitle").empty();

    var firstitem = $(items[currentid]);
    var a = $("#" + firstitem[0].id + " a");

    var img = $("#" + firstitem[0].id + " img");
    var title = a.text();
    var url = a.attr("href");
    var img = img.attr("src");
    
    $("#divCurrent").append("<a href='" + url + "' target='_blank' title='" + title + "'><img height='" + height + "' width='" + width + "' src='" + img + "' /></a>");
    $("#divTitle").text(title);

    //$("#divCurrent").fadeIn(600);
}