var viewportWidth = 550;
var viewportHeight = 425;
var navHeight = 25;
var navStart = 44;
var transitionTime = 400;

function initialize() {
    var navCounter = 0, vptCounter = 0;
    $$("#leftside p").each(function(p) {
            var navIndex = navCounter++;
            if (!p.hasClass("header")) {
                var vptIndex = vptCounter++;
                p.addEvent("click", function(e) { changeItem(navIndex, vptIndex); });
            }
        });

    $("headnav").addEvent("click", function(e) { changeItem(1,0); });        
    new Ajax("content.html", { method: "get", update: "display", onComplete: contentLoaded }).request();

}

function changeItem(navIndex, vptIndex) {

	if (navIndex == 1) {	
	    var navFx = $("leftside").effects( { duration: transitionTime, transition: Fx.Transitions.Quad.easeInOut } );
		if(window.ie){
			navFx.start( { "background-position-y": "0px" } );
		}else{
			navFx.start( { "background-position": "0px, 0px" } );
		}
	
	    var navFx = $("headnav").effects( { duration: transitionTime, transition: Fx.Transitions.Quad.easeInOut } );
		if(window.ie){
			navFx.start( { "background-position-y": "0px" } );
		}else{
			navFx.start( { "background-position": "0px, 0px" } );
		}	

	}else{

	    var navFx = $("leftside").effects( { duration: transitionTime, transition: Fx.Transitions.Quad.easeInOut } );
		if(window.ie){
			navFx.start( { "background-position-y": (navStart + (navHeight * navIndex)) + "px" } );
		}else{
			navFx.start( { "background-position": "0px " + (navStart + (navHeight * navIndex)) + "px" } );
		}
	
	    var navFx = $("headnav").effects( { duration: transitionTime, transition: Fx.Transitions.Quad.easeInOut } );
		if(window.ie){
			navFx.start( { "background-position-y": (navStart + (navHeight * navIndex)) + "px" } );
		}else{
			navFx.start( { "background-position": "0px " + (navStart + (navHeight * navIndex)) + "px" } );
		}
	}	

    var vptFx = $("display").effects( { duration: transitionTime, transition: Fx.Transitions.Quad.easeInOut } );
    vptFx.start( { "top": "-" + (vptIndex * viewportHeight) + "px" } );
    
    document.location.hash = navIndex + "," + vptIndex;
    
    updateSubnav(navIndex, vptIndex);
}

function contentLoaded() {

    var shortcut = document.location.hash;
    var navIndex = 1, vptIndex = 0, exampleIndex = NaN;
    if (shortcut && shortcut.length > 1) {
        var parts = shortcut.substr(1).split(",");
        if (parts.length > 1) {
            var sNavIndex = parseInt(parts[0]);
            var sVptIndex = parseInt(parts[1]);
            if (isNaN(sNavIndex) || isNaN(sVptIndex)) {
                // use defaults
            } else {
                navIndex = sNavIndex;
                vptIndex = sVptIndex;
                if (parts.length > 2) {
                    exampleIndex = parseInt(parts[2]);
                }
            }
        }
    }

    changeItem(navIndex, vptIndex);
    if (!isNaN(exampleIndex)) {
        var container = $$("#display div.item")[vptIndex];
        changeExample(container, $("boxes"), exampleIndex, navIndex, vptIndex);
    }
}

function changeExample(container, subnav, index, navIndex, vptIndex) {
	var locationhash = document.location.hash
    var fx = container.effects( { duration: transitionTime, transition : Fx.Transitions.Quad.easeInOut } );
    fx.start( { "margin-left": "-" + (index * viewportWidth) + "px" } );
    changeExampleHighlight(subnav, index);
    document.location.hash = navIndex + "," + vptIndex + "," + index;
}

function changeExampleHighlight(subnav, index) {
    $$("#" + subnav.id + " div").each(function(d) {
            d.removeClass("subnavon");
        });
    $$("#" + subnav.id + " div")[index].addClass("subnavon");
}

function updateSubnav(navIndex, index) {
    var container = $$("#display div.item")[index];
    var examples = $$("#" + container.id + " div");

    if (examples.length <= 1) {
        var fx = $("subnav").effects( { duration: transitionTime } );
        fx.start( { "opacity": 0.01 } );
    } else {

        var sample = $$("#subnav #boxes div")[0].clone();
        sample.removeClass("subnavon");
        var subnav = $("boxes");
        subnav.empty();
        var left = parseInt(container.getStyle("margin-left"));
        if (isNaN(left)) { left = 0; }
        var selected = left / -viewportWidth;
        var counter = 0;
        $$("#" + container.id + " div").each(function(e) {
                var example = sample.clone();
                example.injectInside(subnav);
                var idx = counter++;
                example.addEvent("click", function(e) {
                        changeExample(container, subnav, idx, navIndex, index);
                    });
            });
        changeExampleHighlight(subnav, selected);

        var fx = $("subnav").effects( { duration: transitionTime } );
        fx.start( { "opacity": 1.0 } );
    }
}

function changeCategory(cat) {
}

function categoryChanged() {
   // Build navigation
   var firstItem = undefined;
   var firstCompany = undefined;
   var sample = $("leftside").getFirst().clone();
   sample.removeClass("leftside-sel");
   $("leftside").empty();
   $$("#display .company").each(function(company) {
           var item = sample.clone();
           item.id = "nav_dynamic_id_" + company.id;
           item.getFirst().setHTML($$("#" + company.id + " .displayname")[0].innerHTML);
           item.injectInside($("leftside"));
           item.addEvent("click", function(e) { changeCompany(item, company); });
           // not very elegant, but whatever
           if (firstItem == undefined) {
               firstItem = item;
               firstCompany = company;
           }
           var holder = $$("#" + item.id + " .smallexamples-holder")[0];
           holder.empty();
           $$("#" + company.id + " .subnav .moreexamplesimg").each(function(e) {
                   $("sampleholder").clone().injectInside(holder);
               });
       });

   // select first example in each company
   $$("subnav").each(function(e) { e.getFirst().addClass("moreexamplesimg-sel"); });

   // select first company
   changeCompany(firstItem, firstCompany);
}

function changeCompany(nav, company) {
   if (nav.hasClass("leftside-sel")) {
   } else {
       // update navigation selection
       $$(".leftside-sel").each(function(n) { n.removeClass("leftside-sel"); });
       nav.addClass("leftside-sel");

       var vpt = $("display");
       var ctr = $("rightside_bottom");
       var navctr = $("rightside_top");
       var vptfx = vpt.effects({duration:400});
       var fx = ctr.effects({duration:100});
       var navfx = navctr.effects({duration:100});

       // slide viewport
       var position = findIndexOf(company, $$("#display .company"));
       vptfx.start( { "top": "-" + (position * viewportHeight) + "px" } );

       if (false) {            // temporarily removing info stuff
       // update info area
       fx.start( {"opacity": 1.0}
       	).chain(function() { this.start.delay(100, this, {"opacity": 0.0}); }
       	).chain(function() { ctr.setHTML($$("#" + company.id + " .info")[0].innerHTML); this.start({}); }
       	).chain(function() { this.start({"opacity": 1.0}); }
		);
       }

       // update subnavigation
       $$("#leftside .smallexamples").each(function(i) { i.empty(); });
       $$("#" + nav.id + " .smallexamples")[0].setHTML($$("#" + company.id + " .subnav")[0].innerHTML);
       var imgs = $$("#" + nav.id + " .smallexamples .moreexamplesimg");
       imgs.each(function(img) {
               img.addEvent("click", function(e) {
                       var fx = company.effects({duration:200});
                       var position = findIndexOf(img, imgs);
                       fx.start( { "margin-left": "-" + (viewportWidth * position) + "px" } );
                       $$("#" + company.id + " .moreexamplesimg-sel").each(function(e) { e.removeClass("moreexamplesimg-sel"); });
                       imgs.each(function(e) { e.removeClass("moreexamplesimg-sel"); });
                       $$("#" + img.id).addClass("moreexamplesimg-sel");
                   });
           });
   }
}

function findIndexOf(item, list) {
   var index = 0, winner = -1;
   list.each(function(i) {
           if (i.id == item.id) {
               winner = index;
           } else {
               index++;
           }
       });
   return winner;
}

function log(s) {
   $("display").innerHTML = s + "<br>" + $("display").innerHTML;
}

function showui(){
        var fx = $("loadingdiv").effects( { duration: transitionTime } );
        fx.start( { "opacity": 0.0 } );
}

Window.addEvent("domready", initialize);
Window.addEvent("load", showui);