dab 2012 tryout

by gion_13

HTML

<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.color.js.txt"></script>
<script type="text/javascript" src="http://www.protofunc.com/scripts/jquery/backgroundPosition/jquery.backgroundPosition.js">
</script>
<div id="wrapper">
    <div class="widget">
        <div class="super-container">
            <div class="loading_msg">loading</div>
            
            <div class="main-container">
                <div class="container">
                    <img class="img" src="http://kurrik.github.com/hackathons/static/img/sample-128.png" />
                    <div class="margin-right margin"></div>
                    <div class="margin-left margin"></div>
                </div>
            </div>
        </div>
    </div>
    
    <ul class="triggers">
        <li class="trigger _boat_model_x">
            x
        </li>
        <li class="trigger _boat_model_ms">
            mastercraft v
        </li>
        <li class="trigger _boat_model_ps">
            prostar
        </li>
         <li class="trigger _boat_model_csx">
            csx
        </li>
        <li class="trigger _boat_model_mc">
            300
        </li>
    </ul>
    
    <ul id="menu">
        <li>
            <h2>wakeboard</h2>
            <h5>take the wave on the lake</h5>
        </li>
         <li>
            <h2>luxury &amp; performance</h2>
            <h5>refined all-around performance</h5>
        </li>
         <li>
            <h2>waterski</h2>
            <h5>set a personal best</h5>
        </li>
         <li>
            <h2>all sport</h2>
            <h5>outdoor adventure revolutionized</h5>
        </li>
         <li>
            <h2>day yacht</h2>
            <h5>redefined aspirations</h5>
        </li>
    </ul>
    
    <div id="boat_container">
       
    </div>
    
</div>

CSS

body{
    background: #191919;
    font-family : verdana,tahoma;
}
#wrapper{
    margin : 100px auto;
    min-width : 700px;
    width : 70%;
    position : relative;
}
.widget{
    position : relative;
}
.widget .img{
    width : 96%;
    height : 98%;
    display : none;
    margin : 2%;
}
.super-container{
    /**/
    height : 200px;
    width : 150px;
    /**/
    position : absolute;
    top : 0px;
    left : 0px;
  
}
.super-container .loading_msg{
    position : absolute;
    top : 0;
    left : 0;
    visibility : hidden;
    font-size : 10px;
    line-height : 200px;
    color : #fff;
    text-align : center;
    height : 100%;
    width : 100%;
    padding-left : 2px;
}
.super-container.loading .loading_msg{
    visibility: visible;
}

.main-container{
    width : 0;
    height : 0;
    padding : 3px;
    position : relative;
    top : 3px;
    left : 3px;
    overflow : hidden;
    margin : 50% auto;
    display : none;
}
.container{
    width : 100%;
    height : 100%;
    position : relative;
    margin : 0 1px 1px 0;
}
.margin{
    border : 1px solid #fff;
    height : 100%;
    width : 15px;
    position : absolute;
    top : -1px;
}


.margin-right{  
    border-left : none;
    right : -1px;
}
.margin-left{
    border-right: none;
    left : -1px;
}

.triggers{
    position  :absolute;
    top : 5px;
    left: 160px;
}
.trigger{
    width : 100px;
    height : 30px;
    margin : 6px;
    background : #363636;
    line-height : 30px;
    text-align : left;
    text-transform : uppercase;
    padding-left : 10px;
    color : #8f937f;
    font-size : 10px;
    cursor : pointer;
    border : 1px solid #5b5b5b;
    opacity : 0.75;
    filter : alpha(opacity=75);
    -ms-filter : "alpha(opacity=75)";
    
    -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
    -khtml-border-radius : 5px;
    -ms-border-radius : 5px;
    -pie-border-radius : 5px;
    border-radius : 5px;
}
.trigger:hover{
    color :...

JavaScript

var boatTemplate = $('<div class="boat"><div class="dummy_border_container"><div class="dummy_border"></div></div><div class="left"><img src="http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x35.11.png" class="boat_thumb" /><div class="boat_name"></div></div><div class="right"><div class="slider">fresh water</div><div class="switch">salt water</div></div> </div></div><div id="container"></div>');
var imgs =[
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x1.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x2.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x7.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x14.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x14v.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x15.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x25.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x35.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/xstar.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x45.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x55.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/x80.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms200.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms255.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms215.11.png",
    "http://mastercraft.com/system/application/client/views/flash/dab/images/icons/ms225.11.png",
   ...